网页布局本质之盒子模型、盒子定位.pptVIP

盒子模型 1.盒子模型的结构 a.Margin b.Border c.Padding d.Content Div和span 1.div是块级元素的代表 2.span是行内元素的代表 A.div与span的区别（标准流中即：没有float属性） a. 块级元素默认自动上下排列,宽度默认撑满容器 b. 行内元素默认宽度是：其内部元素的宽度 行内元素顾名思义就是标准流中默认显示在同一行内 例：span之间的margin值 * div div body p 30px 40px 实际值是：70px c. Div块的maring 理论上是80px 实际上却是50px，相当于取了其中的 较大者 d.盒子嵌套之间的margin，固定宽高的布局， 要注意ie6不符合标准w3c的规定 未设置高度时： nei hezi Ie6、7、8firefox Ie7、8firefox 设置高度时： Ie6 盒子的浮动 father a. 未浮动状态 b. box1左浮动 Box2的区域 Box1的区域 c. 增加box2左浮动 Box3未添加浮动的时候，在box3下面再添加一个p标签(块儿级元素) 文字不受浮动影响，依然跟着box3 d. 增加box3左浮动 Box脱离标准流之后，foteher 块就会忽略box。并且高度不会 自动延展。但box内容仍然会影 响father块的内容。 father 总结： float属性会使块级元素脱离标准流，使其后面块忽略前面块， 但是前面块的内部元素仍然占有标准流的位置，从而影响后面块。 加上p标签以后由于box1、box2、box3都脱离了标准流，p就忽略box1、box2、 Box3的存在，但其内部的元素仍然受到box内容和margin的影响。 e. box3向右浮动 P标签的范文不受box的影响 器内部元素依然受到box内部 元素影响。就形成了文字环绕 效果。 当其中一个box内容增加的时 候器内部内容继续影响p内部 的文字 给p加一个clear:属性 1.如果给p加个clear:right 属性,p就不再受到又变浮动 的影响，就像与box3划清界限。 P内文字就会围绕左边box 2.如果p加上clear:left属性，同理 P内文字环绕右边box排列 3. 给p添加clear:both属性，p内 的元素不再受到浮动box的影响。 总结： 1.宽度不会伸展，一内容宽度为准。 2.脱离标准流，独立存在。 3.其内容会对标准流内容产生影响。 块儿级元素添加float属性后 盒子的定位 1.广义定位：标准流布局放置盒子，或表格方式等 2.狭义定位：是以他的包含框为基准进行偏移。绝对定位的框，从标准流中脱离。 对其他兄弟盒子定位没有影响。 盒子的定位方法：css样式的position值，设置为 Static： 这是默认的属性值，就是按照标准流(包括浮动方式)进行布局 Relative： 相对定位，仍在标准流中，其后面的盒子仍以标准流方式对待他。 其内部盒子常以绝对定位脱离标准流。 Absolute：绝对定位，盒子的位置以他的包含框为基础进行偏移。绝对定位的框， 脱离标准流，对其兄弟盒子没有影响。 Fixed：固定定位，他和绝对定位类似，只是他是以浏览器为基准进行定位。 a. a-1.Relative 拥有relative属性的box， 设置top，left ，right、 Bottom才有效果， 其属性值就该盒子的 偏移量，但该盒子仍在 标准流中。 a. a-2 relative box都设置了向左 浮动 Box2设置的了相对 定位，box3仍然认为 Box2在原来的位置上 并且所占的空间不变。 b. absolute 如果absolute的所有祖先框都没有定位属性，他就按照浏览器窗口定位， 如果他的祖先框有定位属性，他就选择离他最近的祖先框定位。 c. fixed 定义了Fixed属性的元素，再定义top、left、right、bottom属性 该元素会以浏览器为基准进行定位。 可惜ie6并不支持。 right content 2列布局 left a.定宽布局,content 、left、right均定义宽度，left 、right定义float属性实现 在底部放置一个不占空间的清除模块，可以避免对后面标准流的影响 Clear:both; *