1、页面布局基本规则

浏览器的布局会遵循一些规则，包括：

盒模型计算
内联元素和块元素布局规则
文档流布局
元素堆叠

盒模型计算

盒子的组成

css将页面所有的元素都设置为一个矩形的盒子，每个盒子由以下四个部分组成：

外边距margin
边框border
内边距边界padding
内容content

box-sizing属性

通过设置box-sizing属性来设置盒模型的计算方式

box-sizing的取值：

content-box(默认）
border-box

box-sizing:content-box时盒子的总宽高(盒子可见框大小）组成：border+padding+content(指定的width/height或内容撑起来的宽高)

默认的盒模型计算方式中，外边距、盒子边框、内容区共同决定盒子可见框的大小，外边距marin不影响盒子可见框的大小，但是会影响盒子的位置（也可以说是盒子的具体占地面积），margin-left和margin-top会移动自己的位置，margin-right和margin-bottom会影响其他的盒子位置

box-sizing:border-box时盒子的总宽高(盒子可见框大小）就是指定的width/height

案例：

//默认的情况下，盒子宽度：20px(padding-left)+1px(border-left)+200px(content)+1px(border-right)+20px(padding-right)= 242px，盒子高度算法相同
<div style="width:200px;height:200px;border:1px solid red;padding:20px;margin:20px;"></div>
//指定为border-box时候，盒子宽度为200px;此时盒子的content宽度为：200-20-1-1-20=158px
<div style="box-sizing:border-box;width:200px;height:200px;border:1px solid red;padding:20px;margin:20px;"></div>

盒模型垂直外边距的重叠现象

定义：相邻的垂直方向外边距会发生重叠现象

兄弟元素间的相邻垂直边距取值情况

两者都是正值：会取两者之间的较大者
一正一负：取两者的和
两个都是负值：取两者中绝对值大的父子元素间的相邻垂直外边距：子元素的外边距会传递给父元素（上外边距margin-top）,会影响到页面的布局，必须进行处理

处理方式：使用一个空的 table 标签可以隔离相邻的两个父子元素，阻止外边距的重叠

案例： box1如果设置外边距，与父元素box发生重叠，box和box1同时margin-top：50px，为防止子元素box1和父元素box相邻，可以在box1之前添加一个伪元素 table

<style>
.box{
    width:300px;
    height:300px;
}
.box1{
    width:100px;
    height:100px;
    margin-top:20px;
}
//利用伪元素解决重叠（隔开，使之不相邻）
.box1:before{
    display: table;
    content: "";
}
</style>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

内联元素与块级元素

元素可分为内联元素和块状元素

内联元素与块级元素的区别

内联元素可与其他内联元素位于同一行，设置宽高无效
块级元素独占一行，可设置宽高

内联元素与块级元素的转化

可以通过设置display属性来对元素进行调整

display:block,设置为块级元素，可设置宽高
display：inline,设置为内联元素，设置宽高无效
display：inline-block，块级与内联的结合，位于块级元素或者其他内联元素内、可容纳其他块元素和内联元素、可设置宽高

文档流和元素定位

文档流

正常的文档流在HTML里面为从上到下，从左到右的排版布局文档流布局方式调整：使用position属性

position属性值：

static(默认）
inherit（继承父元素）
relative(相对定位)
absolute（相对非static父元素绝对定位）
fixed（相对浏览器窗口进行绝对定位） position:static，设置top/bootom/left/right/z-index无效 position:relative,元素会保持原有文档流，但会相对自身的原始位置发生位移，且会占用空间，超过父元素时，会溢出父元素，撑开整个页面，出现滚动条，若要隐藏超出部分，给父元素设置overflow:hidden属性即可。 position:absolute,且设置了top/bottom/left/right时，元素会脱离文档流，相对其包含块（非static父元素）来定位，且不占空间，下一个普通流元素会略过该绝对定位元素，跟在上一个元素的后方。 position：fixed,相对于浏览器窗口定位，在无static定位以外的父元素的时候，会相对于document进行定位。

使用场景：回到顶部按钮、固定的导航栏等

元素的堆叠z-index

同一个位置存在多个元素的时候，会发生元素的堆叠，元素的堆叠方式和顺序，与position定位和z-index有关，通过设置z-index，可以设置元素的堆叠顺序。当同级元素不设置z-index或者z-index相等时，后面的元素会叠在前面的元素上方，当同级的元素z-index不同时，z-index大的元素会叠在z-index小的元素上方

使用场景：弹框一般是需要在最上层，可以通过设置较大的z-index来控制。

注意：z-index的设置只决定同一父元素内的同级子元素的堆叠顺序，所以，即使某元素的z-index设置为9999999，依然可能因为父元素的z-index值小于其他父元素同级的元素，而被其他元素遮挡