css页面布局基本规则

盒子模型

• box-sizing:设置浏览器盒子模型计算规则，默认为content-box.
• content-box:在高度和宽带内容之上，绘制内边距和边框。
• border-box:在高度和宽度内容内，绘制内边距和边框。

内联元素和块级元素

• 内联元素：内联元素之间存在于一行，且高度宽度无效，如a标签。
• 块级元素，不可与其他元素在一行，且设置高度宽度有效，如div标签。

display:block,// 可将元素设置为块级元素
display:inline,//可将元素设置为内联元素。
disPlay:inline-block,// 位于内联元素或者会计元素内，可容纳其他块级元素与内联元素，宽度高度起作用

文档流和元素定位

position：static // 默认，设置时，left/righr/bottom/top,z-index等失效
position:relative //元素保持原有文档流但对自身的原始位置发生位移且会占用空间,元素占有原本位置（文档流中的位置与原本占有的位置相同）,因此下一个元素会排到该元素后方。占位和static相同,不同的是会溢出父元素.
poistion:absolute // 设置定位时,元素会脱离文档流,相对于其包含块来定位,且不占位.
position:fixed //元素会脱离文档流,且不占位,且位置不会发送改变.其相对于浏览器窗口进行定位
position:sticky //粘性布局，根据正常文档流进行定位，sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上

• poistion:absolute和position:fixed、float浮动(元素会变成块级元素可设置宽高)会使得元素脱离文档流
• z-index //渲染层级，受父元素的渲染层级影响
• position:fixed相对于浏览器的窗口定位，position:sticky 相对于父元素而言，在父元素完全可视化时，父元素范围内保持固定位置，超出可视化区域后就会随着父元素滚动。

清除浮动

• 额外标签：clear：both(不建议，添加无意义标签)

 <div class="content">
  <div class="box"> </div>
  <div class="box1"> </div>
  <div class="clear"> </div>
 </div>
 ...
 .box{
 	float:left
 }
 .box1{
 	float:rights
 }
 .clear{
   clear:both
  }

• 父级添加overflow方法，触动格式化上下文（一块独立的渲染区域）

 <div class="content">
  <div class="box"> </div>
  <div class="box1"> </div>
 </div>
 ...
  .box{
 	float:left
 }
 .box1{
 	float:rights
 }
 .content{
   overflow:hidden
  }

• 使用after伪类元素清除浮动（加在父级元素）

 <div class="content">
  <div class="box"> </div>
  <div class="box1"> </div>
 </div>
 ...
 .content：before, .content：after{
   content:'';
  }

Flex布局和Gird布局（网格布局）

• Flex布局：一维布局，子元素之间提供强大的空间分布和对齐能力。
• Gird布局：二位布局，定位主要区域大小，位置和层次关系，行列分布。