第4章：CSS的盒子模型、浮动和定位分析
学习HTML和CSS中的盒模型和浮动布局
学习HTML和CSS中的盒模型和浮动布局HTML和CSS是现代网页设计不可或缺的两个重要技术，其中盒模型和浮动布局是学习HTML和CSS的基础，本文将逐一介绍盒模型和浮动布局的相关知识。
第一章：盒模型盒模型是指HTML中元素的布局和设计的基本单位。
一个HTML元素可以看作一个盒子，盒模型描述了这个盒子的内容、填充、边框和外边距。
在CSS中，盒模型是由四个部分组成的：内容（content）、填充（padding）、边框（border）和外边距（margin）。
1.1 内容（content）一个元素的内容指的是它所包含的文本、图片或其他媒体等信息。
内容的尺寸由元素的宽度和高度属性来决定。
1.2 填充（padding）填充是指元素内容与边框之间的空白区域。
填充可以通过padding属性来设置，可以为元素增加空白区域，使其内容看起来更加美观。
1.3 边框（border）边框是围绕元素内容和填充的线条。
边框可以通过border属性来设置，可以调整线条的宽度、样式和颜色。
1.4 外边距（margin）外边距是指元素与其他元素之间的空白区域。
外边距可以通过margin属性来设置，可以调整元素与其周围元素之间的间隔。
第二章：浮动布局浮动布局是指通过使用CSS中的float属性来控制元素在页面中的位置。
通过设置元素的float属性，可以将元素向左或向右浮动，使其脱离正常的文档流并在页面中移动。
2.1 浮动的基本原理浮动元素会尽可能地靠近页面的左边或右边，并且尽量与前一个元素或后一个元素保持距离。
当元素浮动之后，其他元素会围绕着浮动的元素排列。
2.2 浮动的应用场景浮动布局可以用于实现多栏布局、图文混排以及响应式布局等。
它常用于网页中的导航栏、侧边栏和图片等元素的布局。
第三章：盒模型和浮动布局的综合运用在实际的网页设计中，盒模型和浮动布局经常会同时被使用。
通过对盒模型的设置，我们可以控制元素的尺寸、外观和间距；而通过浮动布局，我们可以实现元素的位置自由调整和多列布局。
了解CSS中的盒模型和定位属性
了解CSS中的盒模型和定位属性CSS（层叠样式表）是我们在网页设计中经常用到的一种技术，其中的盒模型和定位属性也是我们必须掌握的内容。
一、盒模型在CSS中，元素的盒子可以看作是一个三维的盒子，其中包含了内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分。
1.1内容(content)内容部分是元素盒子中的第一部分。
这部分用于展示元素的内容，它的大小由元素的宽度(width)和高度(height)属性所决定。
1.2内边距(padding)内边距是内容部分和边框之间的距离。
使用内边距可以在元素内容和边框之间留出空间，使元素看起来更美观。
1.3边框(border)边框是围绕元素内容和内边距的可视化边界。
它可以设置颜色、宽度和样式。
可以为元素设置多个边框，每个边框都具有独立的样式和属性。
1.4外边距(margin)外边距是元素盒子和邻近元素盒子之间的距离。
外边距可以被用来分隔元素。
它们可以在网页设计中被用于创建边距和空格。
二、定位属性定位属性是CSS中另一个重要的概念。
定位可以被用来控制元素的位置。
2.1 positionposition属性可以设置元素的定位类型。
它有以下四个值可用：static、relative、absolute和fixed。
其中static是默认值，元素将遵循正常的文档流，而其他三个值则可以使元素变得具有定位特性，可以通过top、bottom、left和right属性进一步控制它们的位置。
2.2 top该属性指定元素应该向上定位的距离。
它是相对于已定位的父元素而言的。
2.3 bottom该属性指定元素应该向下定位的距离。
它是相对于已定位的父元素而言的。
2.4 left该属性指定元素应该向左定位的距离。
它是相对于已定位的父元素而言的。
2.5 right该属性指定元素应该向右定位的距离。
它是相对于已定位的父元素而言的。
2.6 z-index此属性用于控制元素的堆叠顺序。
CSS属性(3)-浮动定位
现因为用overflow：hidden超出的部分会被隐藏，父元素高度也不用写死，我们
只要在页面写一次清浮动的代码，在需要清浮动的位置加个clearfix类名就可以了。
定位属性
• position: static; 默认值。 • 无定位，在HTML文档流中默认的位置。
• position: absolute;(表示绝对定位) • 这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、
定位的特性
1、行内元素添加了绝对定位可以直接给高和宽不用转换
2、块元素添加了绝对定位，如果没有指定宽度，会自动收缩到内容的宽度。
3、绝对定位的盒子不受父盒子padding的影响。
4、父元素有绝对定位，可以不需要清除浮动
堆叠属性
z-index:规定元素的堆叠顺序 • 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 • 元素可拥有负的 z-index 属性值 • z-index的默认属性值是0 • 仅能在定位元素上奏效（relative,fixed,absolute)
bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对
定位。如果不存在这样的元素，则相对于body元素。
定位属性
• position: relative;（表示相对定位）
• 相对于它在正常文档流的位置进行定位。
• 它通过left、right、top、bottom属性确定元素在正常文档流中的偏移 位置
• 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示
区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
定位使用的范围
层布局模型（定位）就像是图像软件PhotoShop中非常流行的图层编辑功 能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小 的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其
css三大模块：盒子模型、浮动、定位
css三⼤模块：盒⼦模型、浮动、定位⼀、盒⼦模型把HTML页⾯中的元素看作是⼀个矩形的盒⼦（装内容的容器），每个矩形都由元素的内容、内边距padding、边框border和外边距margin 组成。
看下⾯的代码：<style>.box{width: 200px;height: 200px;float: left;padding: 100px;margin: 100px;border: 50px solid orangered;background-color: bisque;}</style><div class="box"></div>代码效果如下：浏览器下的效果在Chrome的开发者⼯具中 box的⼆维分析图盒⼦模型⼀般分为两种：IE盒模型（⼜称怪异盒模型）和标准盒模型css3中可以通过box-sizing来指定盒模型，如下：标准盒模型：box-sizing: content-box; /*盒⼦⼤⼩为：width+padding+border*/IE盒模型：box-sizing: border-box; /*盒⼦⼤⼩为：width 即padding和border是包含到width⾥⾯的*/代码如下：<style>div{width: 200px;height: 200px;float: left;padding: 100px;margin: 100px;border: 50px solid orangered;background-color: bisque;}.box1{box-sizing: content-box; /*盒⼦⼤⼩为：width+padding+border*/}.box2{box-sizing: border-box; /*盒⼦⼤⼩为：width 即padding和border是包含到width⾥⾯的*/}</style><div class="box1">box1</div><div class="box2">box2</div>两种盒模型效果图如下（box1为标准盒模型、box2为IE盒模型）：浏览器下的效果在Chrome的开发者⼯具中两个盒⼦的⼆维分析图⽹页布局的本质：把⽹页元素（⽂字、图⽚等），放⼊到盒⼦⾥⾯，然后利⽤css摆放盒⼦的过程。
CSS之盒子的浮动与定位
实验六 全部向左浮动
• 实例：float_all_left.html（在BOX-1中增加一 行） • 观察结果
实验七 使用clear属性清除浮动的影响
准备代码
• 先制作一个基础的页面，来演示浮动的效 果。 • 实例：float01.html
实验一 设置第1个浮动的div
• 实例：float_son1.h源自ml • 观察结果 • 注意：box-2的左边框与box-1的左边框是重 合的，而box-2中的文字会围绕着box-1排列。
实验二 设置第2个浮动的div
• relative：元素框偏移某个距离。元素仍保 持其未定位前的形状，它原本所占的空间 仍保留。 • 说明：通过left或right属性指定其水平偏移 量，通过top或bottom属性指定其垂直偏移 量。通过设置垂直或水平位置，让这个元 素“相对于”它的起点进行移动。 • 实例：relative_position.html • 说明：当子块使用相对定位以后，即使移 动到了父盒子的外面，父盒子也不会变大。
– 使用绝对定位的盒子是以它的最近的一个已经 定位的祖先元素为基准进行偏移。 – 如果没有已经定位（只要该盒子的position属性 不是static，并且已经被设置）的祖先元素，则 以浏览器窗口为基准进行定位。
2.3 绝对定位absolute
• 实例：absolute_position_2.html • 观察结果：将父块的定位设置为relative;
• • • • • • • • • • • • • • • • • •
<html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1 } </style> </head> <body> <h1>这是一个标题</h1> <img class="x" src="/i/eg_mouse.jpg" /> <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p> </body> </html>
《网页设计》课件——第四章 盒子模型
边框成脊形
dashed 虚线
inset
使整个方框凹陷，即在外框内嵌入一个立体边框
solid
实线
outset 使整个方框凸起，即在外框内嵌外一个立体边框
double 双实线
➢ border-style属性为综合属性设置四边样式，必须按上右下左的顺时针顺序，省略时同样采用值复制的 原则，即1个值为4边，2个值为上下/左右，3个值为上/左右/下。
在复合属性中，边框属性border能同时设置4种边框。若果只需要给出一组边框的宽度、样式与颜色，可以通 过border-top、border-right、border-bottom、border-left分别设置。
举例 演示
【实例6-2】border边框属性的设置。
2 边距属性
边距属性分为：内边距padding和外边距marign两种。
比，使用百分比时，内边距的宽度值随着父元素宽度width的变化而变化而变化，与height无关。 ➢ padding也遵循值复制的原则，与border属性类似。 ➢ 当只对某个方向的内边距进行设置时，可以通过padding-top（上内边距）、padding-right
（右内边距）、padding-bottom（下内边距）、padding-left（左内边距）分别设置。
表示4个边框的宽度都为3像素。 表示上下边框的宽度都为3像素，左右边框的宽度都为6像素。 表示上边框的宽度都为3像素，左右边框的宽度都为6像素 下边框的宽度都为9像素。
也可以按照border-top-width:宽度值、border-right-width:宽度值、border-bottomwidth:宽度值、border-left-width:宽度值逐个定义。
盒子属性，浮动，定位
盒⼦属性，浮动，定位1.盒⼦常见属性1）容器盒⼦Box-size:设置盒⼦模型，CSS3标准，content-box:正常默认模式，起源于⾕歌，元素的整体⼤⼩会被内边距和边框撑开border-box：怪异模式，起源于IE，元素的整体⼤⼩不会被内边距和边框撑开Width:宽度Height:⾼度注意：width,height会根据box-size盒⼦模型的不同来决定是内容的宽度和⾼度，还是整个元素⼤⼩的宽度和⾼度。
2）Padding:内边距Padding-left,padding-right,padding-top,padding-bottomPadding:上右下左;Padding:上右下；左边距等于右边距Padding:上右；下跟上边⼀样，左跟右⼀样3）Margin:外边距外边距跟内边距⼀致。
但是两个元素的外边距会重叠。
4）Border:边框语法：border: 边框宽度边框样式颜⾊;可以分开设置，例如border-width: 30px;border-style: dashed;border-color: purple;分别设置上下左右边框，例如border-bottom:50px dotted green;5）Box-shadow:盒⼦阴影box-shadow: 阴影的⽔平偏移值阴影的垂直偏移值阴影的模糊度阴影的颜⾊;6）Display:设置盒⼦是块级元素还是⾏级元素还是弹性元素Block:块级元素，会占据⼀整⾏，有宽⾼，div,h1,p,li,ul...Line-block:⾏块元素，不会占据⼀整⾏，有宽⾼,img...Line:⾏元素，不会占据⼀整⾏，也没有宽⾼,a,span...7）Border-radius:边框的圆⾓8）Background:设置元素的背景，背景图⽚，背景颜⾊Background:是⼀个综合性的属性，可以分出背景颜⾊，背景图⽚，背景是否重复，背景图⽚的位置，背景图⽚的⼤⼩Background-position:设置背景图⽚的位置，left,right,top,bottom,center,百分⽐⼀般可以设置2值，第⼀个值是设置⽔平位置，第⼆个值设置垂直位置Background-size:设置背景图⽚的⼤⼩，注意：有时候不知道图⽚的确切⽐例的时候，只需要设置⼀个宽度或者⾼度，另外⼀个值设置为auto即可。
CSS盒子模型、浮动与定位
body <li> <li> ul ul <ul> <li> li li li li <li> <body> <ul>
标准文档流
块级元素（block level） li占据着一个矩形的区域，并且和相邻的li依次竖直排列， 不会排在同一行中。 ul也具有同样的性质，占据着一个矩形的区域，并且 和相邻的ul依次竖直排列，不会排在同一行中。 因此，这类元素称为“块级元素”（block level）， 即它们总是以一个块的形式表现出来，并且跟同级的 兄弟块依次竖直排列，左右撑满。 思考：哪些标记是块级元素？
静态定位(test05-11.html)
没有设置position属性时的状态
1．一个子块的情况
#block1{ background-color:#fff0ac; border:1px dashed #000000; padding:10px; position:relative; /* relative相对定位 */ left:30px; top:30px; }
绝对定位
1．创建基础页面(test05-12.html) 2．使用绝对定位 #block2{ position:absolute; top:0px; right:0px; } 将父div增加一个定位样式： #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; position:relative; }
Margin-left
span2
行内元素之间的margin
盒子的浮动与定位
主讲：毛丽娟
盒子的浮动-float属性
css1中首先提出浮动的概念。 float属性的设置会打破原标准流中盒子的默 认布局方式。 浮动不完全是定位，也不是标准流。
案例1-页面效果
制作一个包含4个div块（其中一个父块，三 个子块）的基础页面，页面效果如下：
案例1-结构代码
float小结
标准流布局
浮动后的布局
分析：在标准流中，即使设置了盒子的较小尺寸，块级元素依然遵循标准流 默认的布局规则；当出现浮动元素后，被浮动的框1脱离了标准流，原先在父 元素中占据的标准流空间也随之关闭（如果父盒子是未设置高度的，此时会 发现父盒子的高度也随之减小）。
float小结-浮动元素的叠放次序
案例3-static定位
下面是没有设置任何position属性的页面效果， 相当于使用static方式。
案例3-样式代码
body{ margin:20px; font :Arial 12px; } #father{ background-color:#a0c8ff; border:1px dashed #000000; padding:15px; } #block1{ background-color:#fff0ac; border:1px dashed #000000; padding:10px; }
案例-两栏布局样式代码
.news { p标记的float属性 background-color: gray; 值也可以改成left； border: solid 1px black; 如果没有width属 } 性将会出现p标记 .news img { 内容被img内容挤 到下一行。 float: left; } .news p { float: right; width:70%; margin-left:10px; } .clear { clear: both; }
CSS框模型、定位和浮动
提示：因为绝对定位的框与文档流无关，所以它们可以覆 盖页面上的其它元素。可以通过设置 z-index 属性来控制 这些框的堆放次序。
定位和浮动
绝对定位
例:
#box_relative { position: absolute; left: 30px; top: 20px; }
定位和浮动
CSS浮动
•
•
框模型(Box Model)
水平、垂直属性
•
水平格式化： margin-left、border-left、padding-left、width、 padding-right、border-right、margin-right 垂直格式化： margin-top、border-top、padding-top、height、 padding-bottom、border-bottom、marginbottom 使用auto auto的属性会确定所需的长度，从而使用元素框的宽 度等于父元素的width
•
定位和浮动
CSS浮动
•
如果包含框太窄，无法容纳水平排列的三个浮动元素， 那么其它浮动块向下移动，直到有足够的空间。如果浮 动元素的高度不同，那么当它们向下移动时可能被其它 浮动元素“卡住”：
定位和浮动
CSS浮动
•浮动框Biblioteka 边的行框被缩短，从而给浮动框留出空间，行 框围绕浮动框。
定位和浮动
CSS浮动
框模型(Box Model)
元素之间的外边距合并
•
当一个元素包含在另一个元素中时（假设没有内边距或 边框把外边距分隔开），它们的上和/或下外边距也会发 生合并。
框模型(Box Model)
元素自身的外边距合并
•
CSS框模型、定位、浮动、显示和隐藏
CSS框模型（盒模型）、定位、浮动、显示和隐藏◆目标理解块元素和行内元素理解框模型掌握框模型的样式属性掌握定位属性掌握浮动属性掌握显示和隐藏属性◆内容1 块元素和行内元素块元素和行内元素的转换HTML常见的块元素和行内元素2框模型网页中的框框的特点框的样式属性3 定位4 浮动5 清除浮动6 显示和隐藏1 块元素和行内元素网页中的元素分为块元素和行内元素。
块元素成块状显示，独占行；行内元素不占满行，多个行内元素可在一行上显示。
块元素内能容纳其他的块元素和行内元素，行内元素内只能容纳行内元素。
◆块元素和行内元素的转换使用display（显示）属性，当设置标签的display属性值为block时，标签就呈块元素显示，当设置标签的display属性值为inline时，标签就呈行内元素显示。
一个网页就是大型的方框，里面包含着一大堆小方框。
◆网页中的框：块元素都是框（行内元素不是框，行内元素的高，宽都不能改变）。
框具有外边距、边框、、内边距和内容内容（content）：包含文字、图片、flash动画、应用程序、视频等内边距（padding）：内容和边框之间的距离边框（border）：盒的边界外边距（margin）：2个盒之间的空白，透明我们可以看到框模型的4个面：顶部（top）、右侧（right）、底部（bottom）和左侧（left）◆框的特点(1) 外边距和内边距只有宽度属性(2) 边框有大小和颜色之分，可以对每一条边框设置不同的样式(3) width和height定义的是内容的宽度和高度，而不是整个框的宽度和高度◆框的样式属性1内容的属性：widthheight2padding属性padding属性设置对象四边的内边距如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
（顺时针）如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下不允许负值设置对象四边的外边距检索或设置对象四边的外延边距。
盒子的定位与浮动
CSS系列：CSS中盒子的浮动与定位1. 盒子的浮动在标准流中，一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直方向与相邻元素依次排列，不能并排。
CSS中float属性，默认为none。
将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。
同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。
float: left;可以使用clear来清除浮动：clear: left | right | both;2. 盒子的定位在CSS中有一个position属性，用来进行定位操作。
position属性可以设置为4个属性值之一：◊ static：默认的属性值，该盒子按照标准流（包括浮动方式）进行布局；◊ relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。
相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。
◊ absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。
绝对定位的盒子从标准流中脱离。
它对其后的相邻盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。
◊ fixed：固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，当拖动浏览器的滚动条时，依然保持对象位置不变。
2.1 staticstatic为默认值，表示块保持在原本的位置上，不会有任何移动的效果。
没有设置任何position属性相当于使用static方式。
2.2 relative使用relative相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向通过left或者right属性来指定，竖直方向通过top或bottom来指定。
<!DOCTYPE html><html><head><title></title><style type="text/css">.relative {position: relative;top: 20px;left: 20px;width: 500px;}</style></head><body><div class="relative">Position相对偏移</div></body></html>在上面的示例中，.relative若不设置width，则由于block元素会自动伸展到宽度与父元素相同，且加上left的20px，则在浏览器中预览时，会出现横向滚动条。
CSS布局的知识点
CSS布局的知识点CSS（层叠样式表）是一种用于描述网页样式的标记语言，通过CSS可以实现网页的各种布局效果。
在网页开发中，掌握CSS布局的知识点是非常重要的。
本文将介绍CSS布局的常用知识点，包括盒模型、定位、浮动、弹性盒子等。
1. 盒模型盒模型是CSS布局的基础，它描述了一个元素在页面中所占的空间。
盒模型由内容区域、内边距、边框和外边距组成，可以通过设置相关属性改变盒模型的大小和样式。
常用的盒模型属性有width、height、padding、border和margin等。
2. 定位定位是指通过设置元素的位置属性使其定位在网页中的特定位置。
常用的定位属性有position、top、bottom、left和right等。
静态定位(static)是元素的默认定位方式，不会改变元素的布局。
相对定位(relative)相对于自身原来的位置进行定位。
绝对定位(absolute)相对于最近的已定位的祖先元素进行定位。
固定定位(fixed)相对于浏览器窗口进行定位。
3. 浮动浮动是CSS布局中常用的一种方式，可以让元素脱离文档流并向左或向右浮动。
浮动元素会尽可能向左或向右移动，直到遇到父元素或其他浮动元素为止。
浮动元素会影响其他元素的布局，可以通过清除浮动来解决这个问题。
4. 弹性盒子弹性盒子(flexbox)是CSS3中新增的一种布局方式，用于解决传统布局中的一些痛点。
弹性盒子布局具有灵活性，可以方便地实现垂直居中、自适应布局等效果。
通过设置容器和子元素的属性，可以实现灵活的布局效果。
5. 响应式布局随着移动设备的普及，响应式布局成为了重要的考虑因素。
响应式布局是指根据设备的特性和屏幕大小自动调整布局，使网页在不同的设备上都能够良好地显示和操作。
通过使用媒体查询、百分比布局和弹性盒子等技术，可以实现响应式布局。
6. 栅格系统栅格系统是一种基于网格的布局方式，常用于响应式布局。
栅格系统将页面划分为若干列，通过设置元素所占的列数和列宽来实现网页布局。
CSS--盒子的浮动与定位
1
复习在标准流中盒子的排列方式
2
盒子的浮动
3
盒子的定位
1
复习在标准流中盒子的排列方式
复习在标准流中盒子的排列方式
1、网页中的元素是以盒子的形式显示，盒 、网页中的元素是以盒子的形式显示， 子之间或并列或嵌套。 子之间或并列或嵌套。 2、文档流是指浏览器处理文档（即网页） 、文档流是指浏览器处理文档（即网页） 中元素（盒子）的流程。 中元素（盒子）的流程。 标准文档流（即标准流）， ），是指在没 标准文档流（即标准流），是指在没 样式影响（ 有CSS样式影响（默认）下，浏览器对网 样式影响 默认） 页中元素（盒子）的排列规则。 页中元素（盒子）的排列规则。
复习在标准流中盒子的排列方式
4、行级元素和块级元素对于浏览器来讲， 、行级元素和块级元素对于浏览器来讲， 就是显示处理方式的不同。 就是显示处理方式的不同。 一个元素是块级元素还是行级元素可以 通过css的display属性进行更改。 属性进行更改。 通过 的 属性进行更改 display：block； ： ； display：inline； ： ； 设置为块级元素 设置为行级元素
盒子的定位 相对定位（relative） 1、相对定位（relative） 分析实例09-12.htm 分析实例0909 结论： 结论： 相对定位是盒子相对原来的位置 原来的位置， 1）相对定位是盒子相对原来的位置， 通过指定偏移量， 通过指定偏移量，到达新位置 2）相对定位对父盒子及兄弟盒子没 有影响
复习在标准流中盒子的排列方式 3、标准流中盒子的排列方式： 、标准流中盒子的排列方式：
1）一般的原则是浏览器从上至下，由外及 一般的原则是浏览器从上至下， 里显示各个盒子。 里显示各个盒子。 具体到元素： 2）具体到元素： • 块级元素在水平方向上自动伸展，直 块级元素在水平方向上自动伸展， 到包含它的元素的边界； 到包含它的元素的边界；在竖直方向 上与兄弟元素依次排列，不能并排。 上与兄弟元素依次排列，不能并排。 • 行级元素则自动显示在一行中，在行 行级元素则自动显示在一行中， 的最右端自动换行。 的最右端自动换行。3源自盒子的定位盒子的定位
2022年第讲盒子的浮动与定位
在本讲中，我们介绍的是广义的“定位”：
绝对定位 相对定位 默认的属性值
position定位-1
position定位分为：绝对定位与相对定位。
案例演示
position从字面意思上看就是指定块的位置，即块相对于 其父块的位置和相对于它自身应该在位置。
常用属性： position:absolute; position:relative; left:50px; top:50px; z-index:1;
如何将文字分别放在一个盒子的左右两端呢？ position定位-2
在默认情况下，div作为块级元素是占满整行从上到下依次排列的，但在网页的分栏布局中，例如1-3-1固定宽度布局，我们希望中间三 栏（三个div盒子）从左到右并列排列，这时就需要将这三个div盒子都设置为浮动。 clear是清除浮动属性，它的取值有left、right、both和none（默认值），如果设置盒子的清除浮动属性clear值为left或right，表示该盒 子的左边或右边不允许有浮动的对象。
18
clear属性既可以用在未浮动的元素上，也可以用在浮动的元素上，如 果对Box-3同时设置清除浮动和浮动，即：
.son3{clear:both; float:left;}
总结：清除浮动是清除其它盒子浮动对该元素的影响，而设置浮动是 让元素自身浮动，两者并不矛盾，因此可同时设置元素清除浮动和浮 动
浮动的应用举例
1 图文混排及首字下沉效果等
2菜单的竖横转换
对li设置浮动即可实现
3 制作栏目框标题栏
标题栏的左端是栏目标题，右端是“更多”之类的链接。 在默认情况下，div作为块级元素是占满整行从上到下依次排列的，但在网页的分栏布局中，例如1-3-1固定宽度布局，我们希望中间三
CSS盒子模型与浮动
CSS的盒子模型
margin-top border-top
padding-top
padding-right
padding-left
border-right
margin-right
border-left
margin-left
height
content
padding-bottom border-bottom margin-bottom width
CSS的盒子模型
CSS的盒子模型
每个HTML元素都可以看作是一个装了东西的盒子 盒子里面的内容到盒子的边框之间的距离即填充 (padding),盒子本身有边框(border),而盒子边框 外和其它盒子之间，还有边界(magin),如图所示 默认情况下盒子的边框是无，背景色是透明，所 以我们在默认情况下看不到盒子
浮动导致问题
• 常见问题 父元素高度无法自动扩展 元素上移，填满浮动元素右侧（或中间）的间隙 浮动元素对相邻元素的影响，会导致页面布局混乱
清除浮动
• 清除浮动的常用方法 clear属性—常用clear:both; 同时设置width:100%(或固定宽 度)+overflow:hidden;
盒子模型尺寸
•尺寸计算： 盒子模型尺寸=边框+外边距 +内边距+盒子中的内容尺寸
#MyBox { margin:10px; padding:2px; border:dotted; border-width:3px; border-color:#0F0; width:120px; //内容的宽度 }
浮动（float属性）
• 3个属性值
left—左浮动
right—右浮动 none—不浮动 • 特点：
CSS布局之浮动（float）和定位（position）属性的区别
CSS布局之浮动（float）和定位（position）属性的区别CSS 布局 - position 属性position 属性规定应⽤于元素的定位⽅法的类型（static、relative、fixed、absolute 或 sticky）。
position 属性position 属性规定应⽤于元素的定位⽅法的类型。
有五个不同的位置值：staticrelativefixedabsolutesticky元素其实是使⽤ top、bottom、left 和 right 属性定位的。
但是，除⾮⾸先设置了 position 属性，否则这些属性将不起作⽤。
根据不同的 position 值，它们的⼯作⽅式也不同。
CSS 布局 - 浮动和清除float 属性float 属性⽤于定位和格式化内容，例如让图像向左浮动到容器中的⽂本那⾥。
float 属性可以设置以下值之⼀：left - 元素浮动到其容器的左侧right - 元素浮动在其容器的右侧none - 元素不会浮动（将显⽰在⽂本中刚出现的位置）。
默认值。
inherit - 元素继承其⽗级的 float 值最简单的⽤法是，float 属性可实现（报纸上）⽂字包围图⽚的效果。
float: left|right; 可以⾃动排列⾃动折⾏, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.position: absolute|relative; 要配合top,left等定位;使⽤：position: absolute会导致元素脱离⽂档流，被定位的元素等于在⽂档中不占据任何位置，在另⼀个层呈现，可以设置z-index。
PS的图层效果就是position: absolute。
float也会导致元素脱离⽂档流，但还在⽂档或容器中占据位置，把⽂档流和其它float元素向左或向右挤，并可能导致换⾏。
图⽚的⽂字环绕布局效果就是float。
网页设计与制作实践(HTML+CSS)第4章盒子模型
该设置方式中，宽度、样式、颜 色顺序任意，不分先后，可以只 指定需要设置的属性，省略的部 分将取默认值（样式不能省略）。
4.2 盒子模型相关属性
• 4.2.1 边框属性—综合设置边框
• 像border、border-top等这样，能够一个属性定义元素的多种样式，在CSS中称之为复合属性。 • 常用的复合属性有font、border、margin、padding和background等。 • 复合属性可以简化代码，提高页面的运行速度，但是如果只有一项值，最好不要应用复合
4.2 盒子模型相关属性
• 4.2.1 边框属性—设置边框样式（border-style）
• 既可以对盒子的单边进行设置，也可以综合设置四条边的样式：
border-top-style:上边框样式 border-right-style:右边框样式 border-bottom-style:下边框样式
值为四边，两个值为上下/左右，
border-left-width：左边框宽度
三个值为上/左右/下。
border- width：上边框宽度 [右边框宽度 下边框宽度 左边框宽度]
4.2 盒子模型相关属性
• 4.2.1 边框属性—设置边框颜色（border-color）
– 边框颜色的单边与综合设置如下：
• 使用border-style属性综合设置四 边样式时，必须按上右下左的顺
border-left-style:左边框样式
时针顺序。
border-style:上边框样式
右边框样式 下边框样式
左边框样式
• 省略时采用值复制的原则，即一
border-style:上边框样式 左右边框样式 下边框样式
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
极目商城首页布局实现
第一步：根据商城首页规划网站
极目商城首页布局实现
完成后基本布局如下图，我们将其分为六个部分
1. Header 网站头部 width: 760px height: 50px 2.search 搜索全站的功能，包含网站的logo 3. Main Navigation 导航条，具有按钮特效。 4.左侧分类 height: 根据类型变化 5.幻灯片放映效果的广告（暂以静态图片代替） 6.广告
特点是只占内容的宽度，默认不会换行，行内元素一般放文本或 者其它的行内元素。常见内联元素<span><a>
块元素(block element)
特点不管内容有多少，它要换行，同时沾满整行，块元素可以放 文本，行内元素，块元素。常见块元素：<div>，<p>。 <div> <p> <span class="s1">span1 hello,world</span> </p> <div class="s2">div1</div> </div>
行内元素和块元素转换
行内元素和块元素转换
如果我们希望一个元素按照块元素方式显示 则： display：block； 如果我们希望一个元素按照行内元素方式显示 则： display：inline；
盒子模型
盒子模型
所有的页面中的元素都可以看成是一个盒子，占据着一定的页面 空间。
盒子模型的主要属性
行内元素和块元素区别
行内元素只占内容的宽度，块元素内容不管内容多少要 占全行。 行内元素只能容纳文本和其它行内元素，块元素可以容 纳文本，行内元素和块元素。（与浏览器类版本和类型 有关） 一些CSS属性对行内元素不生效，比如margin, left, right, width, height。建议尽可能使用块元素定位。（ 与浏览器版本和类型有关）
Relative.css源代码
.s1{width:100px; height: 60px; background-color: yellow; margin-left: 10px; float: left;} #special{position: relative;/*这里我们使用了相对定位*/ left:40px;/*在原来的位置，向右移动大小（如果向左移动，则值 是负数）*/ top:70px;/*在原来的位置，向下移动大小（如果向上移动，则值是负 数）*/}
CSS的相对定位
相对定位（relative）
Relative.html源代码： <div class="s1">div1</div> <div id="special" class="s1">div2</div> <div class="s1">div3</div> <div class="s1">div4</div>
在网页设计中常用的属性名：内容（content）、填充（ padding）、边框（border）、边界（margin）
盒子模型几个属性值解释：
几个属性值解释：
border: 1px solid red; 这里我们给body指定了border的宽度，样式，颜色（顺序可以
随意）
margin: 0 auto; 0表示上下，auto表示左右居中
CSS的绝对定位
把上例中relative换成absolute即为绝对定位 特别说明
relative的参照点是它原来的位置.进行一定排列 absolute定位是对离自己最近的那个非标准流盒子而言的
流:网页设计中就是指元素(标签)的排列方式。 标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出 现,排在后面的元素(标签)内容后面出现。 非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排 列,我们统称为非标准排列。
极目商城首页布局实现
第二步：创建html模板及文件目录等
1、创建html模板，将其保存为index.html,并创建文件夹css， images 2、创建网站的大框：建立一个宽100%的盒子，它将包含网站的 所有元素。在html文件的<body>和</body>之间写入 <div id="page-container"> Hello world. </div> 在css中设置 background-color: yellow;width: 100%; margin: 0 auto;
CSS的定位
CSS定位（positioning）属性允许你对元素进行定位。 Position属性值：
static(默认值)：元素框正常生成。块级元素生成一个矩形框， 作为文档流/标准流的一部分，行内元素则会创建一个或者多个 行框，置于其父元素中。（对定位left，right不生效。） relative：元素框偏移某个距离。元素仍保持其未定位前的形状 ，他原来所占的空间仍保留，从这一角度看，好像改元素仍然在 文档流/标准流中一样。 absolute：元素框从文档流完全删除，并相对于其包含块定位 。包含块可能是文档中的另一个元素或者是初始包含块。元素原 先在正常文档流中所占的空间会关闭，就好像元素原来不存在一 样。元素定位后生成一个块级框，而不论原来它在正常流中生成 何种类型的框。 fixed：元素框的表现类似于将position设置为absolute，不过 其包含块是视窗本身。（以body本身来定位）
<Insert Picture Here>
第四章 CSS盒子模型、 浮动和定位
本章内容
块元素和行内元素 CSS的盒子模型
概念 主要属性
CSS的浮动
左浮动 右浮动
CSS的定位
绝对定位 相对定位
应用CSS相关知识做极目商城首页面
行内元素和块元素
行内元素（inline element）
CSS的浮动
左ቤተ መጻሕፍቲ ባይዱ动
是指让该元素，尽量向左边移动，让出自己右边空间，给下一个 元素显示。
右浮动
是指让该元素，尽量向右移动，直到碰到他的父元素的右边界。 （特别强调：浮动对块元素和行内元素都生效！）
CSS浮动注意事项
如果我们的div框很多，外面的框无法容纳水平排列的浮 动div元素，那么其它浮动块向下移动，直到有足够的空 间。 如果浮动元素的高度不同，那么当它们向下移动时可 能被其它浮动元素“卡住”，如下图：