CSS盒子模型、浮动与定位
css（5）脱离文档流-定位position
css（5）脱离⽂档流-定位position CSS中重要的东西就三个：盒模型、浮动、定位。
position:relative; 脱离⽂档流，但保留原来的位置！
相对定位就是相对⾃⼰原来的位置，进⾏位置移动。
移动的时候需要使⽤定位值。
top：正数向下移动
bottom：正数向上移动
left：正数向右移动
right：正数向左移动
position:absolute;
绝对定位的元素，脱离标准⽂档流。
⽤top、bottom、left、right来进⾏定位。
参考的是页⾯的左上⾓。
参照点: 离⾃⼰最近的、已经定位了的祖先盒⼦
1 <style type="text/css">
2 div{
3 width: 600px;
4 height: 200px;
5 background-color: yellowgreen;
6 position: absolute;
7 left:50%; 绝对定位的元素居中
8 top: 0;
9 margin-left: -300px; 要往回拉⼀半的⾃⼰宽度
10 }
</style>
固定定位: fixed
position: fixed;
固定定位的参考点⼀定是浏览器
z-index 叠压顺序
压盖顺序：
1）定位了的能够压住没有定位的；
2）如果都定位了，那么HTML顺序后⾯的能够压住前⾯的；。
有几种定位方式？分别是如何实现定位的？参考点是什么？使用场景是什么？
有⼏种定位⽅式？分别是如何实现定位的？参考点是什么？使⽤
场景是什么？
CSS 有三种基本的定位⽅式：⽂档流、浮动和定位。
⽂档流(normal flow)：⽂档流是所有元素布局的基础，作为从左到右、从上到下的布局⽅式，这是最常⽤的⼀种排版布局⽅式。
浮动(float)：float:left/right；浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另⼀个浮动框的边框为⽌。
由于浮动框不在⽂档的普通流中，所以⽂档的普通流中的块框表现得就像浮动框不存在⼀样。
适⽤于实现⽂字环绕图⽚和多列布局。
定位(position)有以下四种⽅式：
定位⽅
实现⽅式使⽤场景式
static默认布局，按照⽂档流定位；默认布局；
relative相对于元素⾃⾝正常位置进⾏定位，元素在⽂档流中仍占据原来空间，只是表现出来的位置
适⽤于层叠效果；
会相对原来的位置偏移；
absolute绝对定位，相对于有定位属性的第⼀个⽗元素偏移，absolute定位元素会脱离⽂档流；适⽤于⼩区块的布局使⽤频繁
fixed相对浏览器窗⼝定位，设置的偏移属性，是相对于浏览器窗⼝的位置。
适⽤于⼴告等意图⼀直出现在⽤户眼
前的信息。
CSS3浮动与定位
✎ 6.3 知识点讲解
1、元素的类型
（2）行内元素 行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同 时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和它前后的其他 行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图 像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面 中文本的样式。 常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、 <u>、<a>、<span>等，其中<span>标记是最典型的行内元素。
✎ 6.3 知识点讲解
1、元素的类型
（1）块元素 块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自 占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局 和网页结构的搭建。 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div>标记是最典型的块元素。
相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属 性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后， 可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
✎
✎ 6.4 知识点讲解
3、相对定位relative
相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属 性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后， 可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
《网页设计》课件——11-CSS浮动布局
PART ONE
重难点分析
重点：
1、浮动布局 2、消除浮动影响
难点：
1、浮动布局 2、消除浮动影响
B
PART TWO
课程讲解
常见网页布局
这是常见的1-2-1 布局。 上部：导航部分； 中部：主体部分； 下部：版权部分；
每一块都是一个div
常见网页布局
这是常见的1-3-1 布局。 上部：导航部分； 中部：主体部分； 下部：版权部分；
4. 多个块一起浮动，如果外层块缩小，使得同行浮动块空间不足时，浮动块会依 次向下一行移动。
5. 行内元素浮动后会强制转换成块级元素。此时要注意，一些内联属性将失效 （比如：vertical-align）.
浮动规则-1
1、浮动的块可以向左或向右移动，直到它 的外边缘碰到包含它区块的边框、或另 一个浮动框的边框、或一个标准流块的 下一行。
文档流布局方式
块级元素独占 一行，所以文档 流布局只能依次 顺序向下排列， 不能进行复杂布 局。
在实际应用中， 都采用浮动布局 或定位布局
网页元素的三种位置方式
• 普通流
• 浮动
• 定位
相对定位 绝对定位 固定定位
浮动——float属性
• 浮动的方式 取值 float : left float : right float : none
ShenYang ChinaSoft International 沈阳中软国际
浮动规则-3-1
3、如果多个块一起浮动，那么它们按照HTML代码顺序从前向后依 次跟随。 靠近页面边缘的一端是前，远离页面边缘的一端是后。
A、B块都向左浮动： A块向左浮动，B块依次跟随向左浮动。
浮动规则-3-2
CSS盒子模型定位方式研究与应用
CSS盒子模型定位方式的研究与应用摘要：在web标准设计模式下，div+css布局方式与传统的表格排版相比有了本质的区别，实现了样式与内容的分离，而且使网页代码简洁，维护方便。
css定位是其应用的难点，下面对css盒模型常用的几种定位方式进行研究和应用分析。
关键词：盒子模型；css布局；定位中图分类号：tp393.092文献标识码：a文章编号：1007-9599 (2013) 06-0000-02级联样式表简称为css，还被称为风格样式表，由名字中我们就可以看出，它是用来进行网页风格设计的。
如果将其和传统的html 相比较看来，css可以对网页中的各个目标的位置排版进行精确的控制和管理，其精确的控制管理程度可以达到像素级别，css可以对网页目标的模型样式进行编辑和管理，除此之外，还可以进行初步的交互设计工作，功能比较的丰富多样，也比较的强大，css是当今最令人满意的表现设计语言。
1盒子模型1.1关于盒子模型的简单叙述盒子模型是说我们可以将各种html标签都看成一个个的盒子，这些html标签可以发挥盒子的功能，将网页上的不同元素装入其中，就像是汉字、符号、等等，除此之外，还能够嵌套另一个css 盒子。
一个盒子模型由内至外由content（内容），padding（填充），border(边框)，margin(边界)四部分组成，如图1-1所示。
图1-1我们能够将其看成现实生活中上方开口的普通小盒子，然后从盒子的正上方向下看盒子，我们可以将边框当作盒子的厚度，我们将盒子的填充物看作具有良好防震功能的塑料泡沫，边界和内容就更好理解了，我们将边界当作盒子需要取出时所留下的空间，内容就当作这个虚拟小盒子能够装载物体的空间就可以了，这样的理解和比喻比较的直白，可以让人们产生很好的立体思维。
如此看来，盒子模型在具体的页面中占据的宽度就是左边界+左边框+左填充+内容+右填充+右边框+右边界几部分共同构成的，但是在css中width所代表的宽度则没有这么的复杂，它只是代表了盒子中内容部分的宽度。
（二）css盒子模型
属性作⽤padding-left 左内边距padding-right 右内边距padding-top 上内边距padding-bottom 下内边距写法意思padding:10px;上下左右内边距均为 10像素padding:5px 10px;上下内边距是5像素，左右内边距是10像素padding:5px 10px 15px;上内边距是5px ，左右内边距是10px ，下边距是15px padding:5px 10px 15px 20px;上是5px ，右是10px ，下是15px ，左是20px 从上顺时针（⼆）css 盒⼦模型记录前端学习过程，⽅便查漏补缺，如有错误，请评论告知~⼀、⽹页布局的本质⽹页布局过程： 1、先准备好相关的⽹页元素，⽹页元素基本都是盒⼦Box 2、利⽤CSS 设置好盒⼦样式，然后摆放到相应位置 3、往盒⼦⾥装内容⽹页布局的核⼼本质：就是利⽤CSS 摆盒⼦。
⼆、盒⼦模型所谓盒⼦模型：就是把HTML 页⾯中的布局元素看作是⼀个矩形的盒⼦，也就是⼀个盛装内容的容器。
CSS 盒⼦模型本质上是⼀个盒⼦，封装周围的HTML 元素，它包括：边框、外边框、内边距和实际内容其中：content ：实际内容padding （内边距）：盒⼦边框与内容之间的距离margin （外边距）：盒⼦与盒⼦之间的距离border （边框）：字⾯意思三、内边距（padding ）padding 属性⽤于设置内边距，即边框与内容之间的距离padding 属性的复合写法可以有⼀到四个值也可以单独指定padding 值：padding-top ：10px; （其他⽅位同理）注：padding 可能会影响盒⼦的实际⼤⼩。
属性作⽤margin-left左外边距margin-right右外边距margin-top上外边距margin-bottom下外边距如上图，⼀个100 x 100的盒⼦，在设置padding 为30px 以后，盒⼦实际⼤⼩变为160 x 160因此在使⽤时，应当注意padding 对盒⼦⼤⼩的影响，以设置盒⼦的最终⼤⼩。
盒模型
我们可以通过声明宽和高来定义一个元素的内容（content）的宽度和高度。
如果没有做任何的声明，宽度和高度的默认值将是自动（auto）w3schools上对于盒子模型的图示如下在图的下方有一段很重要的话Important：When you specifythe width and height properties of an element with CSS，you are just settingthe width and height of the content area.也就是说当我们在css中设计一个块级元素的width和height属性时比如.box{width ：100px; height:100px}时，其中的width 和height仅仅是对content部分设置的，即定义上图中padding下虚线方框内区域的长和宽。
而不是内容，内边距，边框的总和（但在IE的早期版本包括IE6中，盒子模型的width和height却恰恰是这样定义的，尽管符合人们思考的逻辑，但是不符合规范，这会造成严重的问题）对宽度为自动状态的静态（static）定位元素（即无定位），和相对定位（relatively positioned）元素来说，计算宽度的方法是，将他们包含块（containing block）［注释2］的宽度减去此元素的横向的所有外边距，内边距，边框，滚动条。
也就是说，从包含块的宽度中除去元素的横向外边距，内边距，边框，滚动条（如果存在的话）的宽度，所剩的值就是了。
［注释2］：包含块（containing block）。
如果你知道绝对定位和相对定位的实现原理的话，这个注释可以忽略。
包含块可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，内部元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。
例如在绝对定位中，距离它最近的已定位（position为fixed，relative或absolute）的祖先元素即为包含块。
《网页设计》课件——第四章 盒子模型
边框成脊形
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、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
盒子模型
边框与背景()
#outerBox{ width:128px; height:128px; border:10px black dashed; background:silver; } <div id=“outerBox”></div>
盒子模型
设置内边距
#box{ width:128px; height:128px; padding:0 20px 10px; /*上 padding-left:10px; border:10px gray dashed; }
盒子的浮动与定位
属性position （3）absolute：绝对定位，盒子的位置以它的包 含框为基准进行偏移。 绝对定位的盒子从标准流中脱离。 这意味着它们对其后的兄弟盒子的定位没有影 响，其他的盒子就好像这个盒子不存在一样。 （4）fixed：称为固定定位，它和绝对定位类似， 只是以浏览器窗口为基准进行定位，也就是当 拖动浏览器窗口的滚动条时，依然保持对象位 置不变。
其中子块的margin将以父块的内容为参考， 如下图所示。
父div 父div的padding 子div的margin 子div 子div的padding 子div的内容
父子块的margin
图 父子块的margin
图 IE与Firefox对待父height的不同处理
盒子的浮动与定位
盒子的浮动:float(test05-10.html) 设置第1个浮动
对p标记设置外边距：5px
分析p实际的占据空间宽度和高度:
“盒子”与“模型”的概念探究
分析p实际的占据空间宽度和高度: 宽度：5px+1px+5px+内容宽度+5px+1px+5px 高度：5px+1px+5px+内容高度+5px+1px+5px 宽度(或高度)： Margin-top 内容+内边距+ Border-top Padding-top 边框+外边距
标准文档流
行内元素（inline） 对于文字这类元素，各个字母之间横向排列， 到最右端自动折行，这就是另一种元素，称为 “行内元素”（inline）。 思考：哪些标记是行内元素？
标准文档流
标准流：不使用其他排列和定位，按照css默认 规定的块级元素和行内元素的排列方式。 判断各种元素具体的排列位置： 从body标记开始，逐个查看其包含的子元素， 依次把其中的子元素按块级元素或行内元素的 方式放到适当的位置，分配区域及设置格式等， 直到所有的元素都检查一遍
清除浮动对左侧影响后的效果：对p设置clear属性
清除浮动对右侧影响后的效果：对p设置clear属性
扩展盒子的高度
包含浮动div的容器将不会适应高度：div的范围是由它里面的标 准流内容决定的，与里面的浮动内容无关
希望实现效果的方法：在3个div后面增加一个div，清除浮动的影响
盒子的浮动与定位
盒子之间的关系 (test05-05.htm)
body <li> <li> ult; li li li li <li> <body> <ul>
标准文档流
块级元素（block level） li占据着一个矩形的区域，并且和相邻的li依次竖直排列， 不会排在同一行中。 ul也具有同样的性质，占据着一个矩形的区域，并且 和相邻的ul依次竖直排列，不会排在同一行中。 因此，这类元素称为“块级元素”（block level）， 即它们总是以一个块的形式表现出来，并且跟同级的 兄弟块依次竖直排列，左右撑满。 思考：哪些标记是块级元素？
盒子在标准流中的定位原则
盒子在标准流中的定位原则 行内元素之间的水平margin(test05-07) 块级元素之间的竖直margin(test05-08) 嵌套盒子之间的margin(test05-09)
行内元素之间的水平margin
下图所示为两个块并排的情况。
span1
Margin-right
content
“盒子”与“模型”的概念探究
盒子模型
盒子的宽(高)度：内容+内边距+边框+外边距 边框：border 内边距：padding 外边距：margin
Margin-top
设置部分内容， 从上方开始按 顺时针方向对应
Border-top Padding-top content
盒子之间的关系
设置绝对定位前的效果
将中间的div设置为绝对定位后的效果
设置偏移量后的效果
将父块设置为“包含块”后的效果
盒子的浮动与定位
z-index空间位置 盒子的display属性
用CSS设置表格样式
控制表格 表格中的标记 设置表格的边框、合并 美化表格 html结构 整体设置 单元格样式 斑马纹效果
盒子的定位 在CSS中有一个非常重要的属性position （1）static：这是默认的属性值，也就是该盒子 按照标准流（包括浮动方式）进行布局。 （2）relative：称为相对定位，使用相对定位的 盒子的位置常以标准流的排版方式为基础，然 后使盒子相对于它在原本的标准位置偏移指定 的距离。 相对定位的盒子仍在标准流中，它后面的盒 子仍以标准流方式对待它。
盒子模型
#outerBox{ width:200px; /*宽度和高度*/ height:100px; border:2px black solid; /*4个边框*/ border-left:4px green dashed; /* 左边框*/ border-color:red gray orange blue; /*上 右 下 左 */ border-right-color:purple; }
#box img{ border:1px blue solid; }
左右
下*/
盒子模型
设置外边距 body{ border:1px black solid; background:#cc0; }
.son1{ /* 这里设置son1的浮动方式*/ } 将.son1盒子设置为向左浮动，代码为： .son1{ /* 这里设置son1的浮动方式*/ float:left; }
注：Box-2的左边框与 Box-1的左边框重合， Box-1脱离标准流， Box-2顶到原来Box-1 的位置
设置第1个div浮动时的效果：标准流中的Box-2的文字在围绕着 Box-1排列，Box-1的宽度不再伸展，是容纳下内容的最小宽度
这个现象称为margin的“塌陷”（或称为“合并”） 现象，意思是说较小的margin塌陷（合并）到了较 大的margin中。
图 块元素之间的margin
嵌套盒子之间的margin
除了上面提到的行内元素间隔和块级元素间 隔这两种关系外，还有一种位置关系，它的 margin值对CSS排版也有重要的作用，这就 是父子关系。 当一个<div>块包含在另一个<div>块中时， 便形成了典型的父子关系。 margin的值也可以设置为负数
绝对定位
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; }
相对定位
一个div设置为相对定定位后的效果
以右侧和下侧为基准设置相对定定位
2．两个子块的情况
设置为相对定位前的效果
#block1{ position:relative; bottom:30px; right:30px; }
两个兄弟div的情况下， 其中一个设置为相对定位后的效果
绝对定位
各种position属性都需要通过配合偏移一定的 距离来实现定位，而其中核心的问题就是以 什么作为偏移的基准。 使用绝对定位的盒子以它的“最近”的一个 “已经定位”的祖先元素为基准进行偏移， 若没有已经定位的祖先元素，则以浏览器窗 口为基准进行定位
Margin-left
span2
行内元素之间的margin
块级元素之间的竖直margin
如果不是行内元素，而是竖直排列的块级元素， margin的取值情况就会有所不同。
两个块级元素之间的距离不是margin-bottom与 margin-top的总和，而是两者中的较大者，如下图 所示。
块级元素之间的竖直margin
改变浮动方向后的效果
div被挤到下一行时的效果
盒子的浮动与定位
再次改变浮动的方向：box-2为右浮动，box-3为左浮动
交换div位置时的效果
div被挤到下一行的效果
全部向左浮动
设置3个div浮动时的效果
div挤倒下一行被卡住时的效果
使用clear属性清除浮动的影响
设置浮动后文字环绕的效果
所有的元素都相当于一个盒子，占据一定的 页面空间(test05.html) 一个页面由各个盒子组成
“盒子”与“模型”的概念探究
在p标记外加div标记(test05-01.html) 观察以下css设置的页面效果
对p标记设置边框：1px的实线
设置div标记边框：1px的实线 对p标记设置内边距：5px
<div>与<span>标记
<div>与<span>标记的区别(test05-06.html)： <div>标记：是一个通用的块级元素，一般用于放 置各种元素方便排版，其他的块级元素一般具 有一定的逻辑语义 <span>标记：是一个行内元素，当其他行内元素 不合适时使用该标记，作用与<div>标记一样