码迷,mamicode.com
首页 > 其他好文 > 详细

文档流的解析

时间:2019-07-07 22:49:59      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:福建省   ack   固定   tle   div   osi   one   round   margin   

<!-- 文档流
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 -->

 

文档流的解析

标签:福建省   ack   固定   tle   div   osi   one   round   margin   

原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/11148330.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!