文档流的解析
Posted knowledge-is-infinite
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文档流的解析相关的知识,希望对你有一定的参考价值。
<!-- 文档流
1,跨级元素独占一行,几个块级元素就独占几行。
2,行内元素会从左向右排满,折行继续排版。
3,绝对定位(absolute) 固定定位(fixed) 会脱离文档流,不占位,前后元素会忽略它们。
根据指定位置进行排版,且任何元素进行以上两种定位都会变成块级元素,可以设置宽高。
4,浮动元素,会脱离文档流,且一定会占位,后面如果是块级元素则会忽略它的存在,
围绕着它进行排版,另外浮动后的元素就变成块级元素,可以设置宽高,
包括行内元素,如行内元素没有设置,则按照原来宽高进行占位。 -->
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .two,p 8 border: 1px solid red; 9 margin-top: 10px; 10 11 /* .p1//注释比较好分析,可以拿掉注释进行分析 12 float: left; 13 border: 1px solid #f0f; 14 width: 100px; 15 height: 60px; 16 */ 17 .sp1 18 float: left; 19 border: 1px solid #f0f; 20 width: 100px; 21 height: 60px; 22 23 </style> 24 </head> 25 <body> 26 <div class="one"> 27 <p class="p1">的熟练度福建省打飞了</p> 28 <div class="two">上路的分开就速度飞</div> 29 <span class="sp1">sdfljsdf</span> 30 <span class="sp">索拉卡电风扇大理石开发动机阿斯顿发</span> 31 <span class="sp">索拉卡电风扇大理石开发动机阿斯顿发</span> 32 <p class="p2">slfdksdjflkdsj</p> 33 </div> 34 </body> 35 </html> 36 37 <!-- 默认情况下所有元素的层级如下排列: 38 1,最下面一层是标准文档流,后出现元素会覆盖先出现元素。 39 2,浮动元素在第二层。 40 3,绝对定位的元素是最后渲染的,所以在最上面。 41 4,z-index的前提是:必须进行定位才可以设置。 42 position:relative/absolute/fixed,只有进行定位才可以设置z-index的值, 43 否则设置是无效的。 44 5,设置z-index时,可以使用范围设置,如:导航层,内容层,蒙版层 45 内容层:100~200 46 导航层:200~300 47 蒙版层:300~400 48 49 外边距折叠:如有两个块级元素,上A下B, 50 上A 设置 margin-bottom:10px; 51 下B 设置 margin-top:20px; 52 那么A,B之间的边距为20,以边距大的为准,正所谓所谓边距折叠。 53 -->
以上是关于文档流的解析的主要内容,如果未能解决你的问题,请参考以下文章