CSS盒子模型、浮动与定位

1、CSS -盒子模型、浮动与定位 “盒子”与“模型”的概念探究v页面中的元素都由html标记定义html, head, title, style, link, body等h1h6, p, marquee, ol, li, ul, bgsound, a, div(区块容器标记), span(容器标记), frameset, table, tr, td等img, br, hr, frame等v所有的元素都相当于一个盒子，占据一定的页面空间(test05.html)v一个页面由各个盒子组成“盒子”与“模型”的概念探究v在p标记外加div标记(test05-01.html)v观察以下css设置的页面效果

2、对p标记设置边框：1px的实线设置div标记边框：1px的实线对p标记设置内边距：5px对p标记设置外边距：5pxv分析p实际的占据空间宽度和高度:“盒子”与“模型”的概念探究v分析p实际的占据空间宽度和高度:宽度：5px+1px+5px+内容宽度+5px+1px+5px高度：5px+1px+5px+内容高度+5px+1px+5px 宽度(或高度)：内容+内边距+边框+外边距Margin-topBorder-topPadding-topcontent “盒子”与“模型”的概念探究Margin-top盒子模型盒子的宽(高)度：内容+内边距+边框+外边距边框：border内边距：padding外边

3、距：margin设置部分内容，从上方开始按顺时针方向对应Border-topPadding-topcontent盒子之间的关系盒子之间的关系(test05-05.htm)bodyulullililili标准文档流块级元素（block level）li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。 ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。 因此，这类元素称为“块级元素”（block level），即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。哪些标记是块级元素？标准文档流行内元素（inlin

4、e）对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）。哪些标记是行内元素？ 标准文档流v标准流：不使用其他排列和定位，按照css默认规定的块级元素和行内元素的排列方式。v判断各种元素具体的排列位置：从body标记开始，逐个查看其包含的子元素，依次把其中的子元素按块级元素或行内元素的方式放到适当的位置，分配区域及设置格式等，直到所有的元素都检查一遍与标记v与标记的区别(test05-06.html)：标记：是一个通用的块级元素，一般用于放置各种元素方便排版，其他的块级元素一般具有一定的逻辑语义标记：是一个行内元素，当其他行内元素不合适时

5、使用该标记，作用与标记一样盒子在标准流中的定位原则盒子在标准流中的定位原则行内元素之间的水平margin(test05-07)块级元素之间的竖直margin(test05-08)嵌套盒子之间的margin(test05-09)行内元素之间的行内元素之间的margin行内元素之间的水平marginv下图所示为两个块并排的情况。块级元素之间的竖直marginv 如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。v两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如下图所示。图图 块元素之间的块元素之间的margin块级

6、元素之间的竖直marginv这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。嵌套盒子之间的marginv 除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种位置关系，它的margin值对CSS排版也有重要的作用，这就是父子关系。v当一个块包含在另一个块中时，便形成了典型的父子关系。vmargin的值也可以设置为负数v其中子块的margin将以父块的内容为参考，如下图所示。父子块的父子块的margin 图图 父子块的父子块的margin图图 IE与与Firefox对待父对待父height的不同处理的不同处理盒子

7、的浮动与定位盒子的浮动:float(test05-10.html)设置第1个浮动.son1 /* 这里设置son1的浮动方式*/ 将.son1盒子设置为向左浮动，代码为： .son1 /* 这里设置son1的浮动方式*/ float:left; 设置第设置第1个个div浮动时的效果：浮动时的效果：标准流中的Box-2的文字在围绕着Box-1排列，Box-1的宽度不再伸展，是容纳下内容的最小宽度注：注：Box-2的左边框与的左边框与Box-1的左边框重合，的左边框重合，Box-1脱离标准流，脱离标准流，Box-2顶到原来顶到原来Box-1的位置的位置盒子的浮动与定位设置第2个浮动设置前两个设置前

8、两个div浮动时的效果：浮动时的效果：Box-2变为根据内容确定宽度，Box-3的文字围绕Box-2排列思考：思考：Box-3的的左边框在哪？左边框在哪？盒子的浮动与定位设置第3个浮动设置第设置第3个个div浮动时的效果：浮动时的效果：p标记中的文字围绕浮动的盒子排列盒子的浮动与定位改变浮动的方向:box-3为右浮动改变浮动方向后的效果改变浮动方向后的效果 div被挤到下一行时的效果被挤到下一行时的效果 盒子的浮动与定位再次改变浮动的方向：box-2为右浮动，box-3为左浮动交换交换div位置时的效果位置时的效果 div被挤到下一行的效果被挤到下一行的效果全部向左浮动设置设置3个个div浮动

9、时的效果浮动时的效果 div挤倒下一行被卡住时的效果挤倒下一行被卡住时的效果使用clear属性清除浮动的影响设置浮动后文字环绕的效果设置浮动后文字环绕的效果 清除浮动对左侧影响后的效果：对清除浮动对左侧影响后的效果：对p设置设置clear属性属性清除浮动对右侧影响后的效果：对清除浮动对右侧影响后的效果：对p设置设置clear属性属性扩展盒子的高度包含浮动包含浮动div的容器将不会适应高度：的容器将不会适应高度：div的范围是由它里面的标的范围是由它里面的标准流内容决定的，与里面的浮动内容无关准流内容决定的，与里面的浮动内容无关希望实现效果的方法：在希望实现效果的方法：在3个个div后面增加一个

10、后面增加一个div，清除浮动的影响，清除浮动的影响盒子的浮动与定位盒子的定位在CSS中有一个非常重要的属性position（1）static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。 （2）relative：称为相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。 相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。盒子的浮动与定位属性position（3）absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。 绝对定位的盒子从标准流中脱离。 这意味着它们对其后的兄弟盒子的定位没有影响，

11、其他的盒子就好像这个盒子不存在一样。（4）fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。静态定位(test05-11.html)没有设置没有设置position属性时的状态属性时的状态相对定位v1一个子块的情况#block1background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:relative;/* relative相对定位 */left:30px;top:30px;一个一个div设置为相对定定位后的效果设置为相对定定

12、位后的效果 以右侧和下侧为基准设置相对定定位以右侧和下侧为基准设置相对定定位 2两个子块的情况设置为相对定位前的效果设置为相对定位前的效果 #block1position:relative;bottom:30px;right:30px;两个兄弟两个兄弟div的情况下，的情况下，其中一个设置为相对定位后的效果其中一个设置为相对定位后的效果绝对定位v各种position属性都需要通过配合偏移一定的距离来实现定位，而其中核心的问题就是以什么作为偏移的基准。v使用绝对定位的盒子以它的“最近”的一个“已经定位”的祖先元素为基准进行偏移，若没有已经定位的祖先元素，则以浏览器窗口为基准进行定位v1创建基础页

13、面(test05-12.html)v2使用绝对定位#block2position:absolute;top:0px;right:0px;将父div增加一个定位样式：#fatherbackground-color:#a0c8ff;border:1px dashed #000000;padding:15px;position:relative;绝对定位设置绝对定位前的效果设置绝对定位前的效果 将中间的将中间的div设置为绝对定位后的效果设置为绝对定位后的效果 设置偏移量后的效果设置偏移量后的效果 将父块设置为将父块设置为“包含块包含块”后的效果后的效果 盒子的浮动与定位z-index空间位置盒子的

14、display属性用CSS设置表格样式控制表格表格中的标记设置表格的边框、合并美化表格html结构整体设置单元格样式斑马纹效果盒子模型#outerBoxwidth:200px; /*宽度和高度*/height:100px;border:2px black solid; /*4个边框*/border-left:4px green dashed; /* 左边框*/border-color:red gray orange blue; /*上 右 下 左*/border-right-color:purple; 盒子模型边框与背景()#outerBoxwidth:128px;height:128px;border:10px blac