<!-- 文档流
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 -->
原文地址：https://www.cnblogs.com/Knowledge-is-infinite/p/11148330.html
时间： 2024-11-06 21:09:46