一.块级元素block
div、p:独占一行
水平居中方案（有宽度）：margin：0 auto
二.行内元素inline(行内替换元素和行内非替换元素)
行内非替换元素：span/a/strong/i
- 和其他内容在一起显示，设置width、height不生效。
- 内边距padding；边框border上下会被撑起来，但是不占据空间，
- 外边距margin上下不生效
- 水平居中方案(包括inline-block)：在父元素中设置text-align:center
行内替换元素：img/input
伪元素也属于行内级元素（例如::before）
将多个行内级元素中间的空格（间隙）去除的方法：
1⃣️删除换行符（不推荐）
2⃣️将父级元素的font-size设置为0，但是需要子元素设置回来（不推荐）
3⃣️通过子元素（span）统一像一个方向浮动即可
4⃣️flex布局（如果需要考虑兼容性不推荐）
三、定位
position:relative相对定位，不会脱离标准流，适用于微调，相对于自己原来的位置进行调整
如果实现img图片居中并随着浏览器缩放始终居于中间地位时，常采用：
div{
position:relative;
transform:translate(-50%); 先将图片往左移动图片的一半
margin-left:50% 再往右移动div的一半
}
或者使用background-image对图片调整：
div{
height:
background:url("") center
}
positive:absolute绝对定位，脱离标准流，定位参照对象是最邻近的祖先元素，如果祖先元素没有设置定位，则参照对象是视口
position:sticky粘性定位， 定位的结合体，定位参照对象是最近的滚动祖先包含滚动的视口而不是视口，适用于页面滚动到顶部时固定不变（比用js监听方便），但有可能存在兼容性问题
div{
position:sticky;
top:0
}
四、z-index比较原则
如果是兄弟关系：z-index越大，层叠在越上面
z-index相等，写在后面的那个元素层叠在上面
如果不是兄弟关系：各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
而且这2个定位元素必须有设置z-index的具体数值
五、浮动
1、多列布局（例如京东）
<div class="content">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
中间内容宽度给定并居中
.content{
width: 1190px;
height: 800px;
margin:0 auto
}
五个盒子在一行展示
.item{
width: 230px;
height: 322px;
float: left;
margin-right: 10px;
}
但是最后一个空间不够挤下来，解决方案一：
找到最后一个元素设置距离右边的间距为0，但是可能存在兼容性问题
.item:nth-child(5n){
margin-right: 0;
}
解决方案二：
给每一行的最后一个盒子设置类名然后使用 margin-right: 0;但是太麻烦
解决方案三：最外层添加一个盒子
<div class="content">
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</div>
设置外层盒子距离右边的间距，这样就可以实现在一行显示
.box{
margin-right: -10px;
}
实现原理：因为最外层的盒子设置宽度为1190，我们自己增加了一个box盒子，它的宽度是自动的所以也是1190
又因为 父级盒子的宽度=子盒子+ml+mr 因为ml和mr默认等于0
即1190 = 1190 + 0 + 0 但是我们设置mr等于-10
即1190 = 1190 + 0 + -10 此等式就不相等了 又因为box盒子的宽度是自动的，所以子盒子的宽度自动设置为1200即1190 = 1200 + + -10，所以可以在一列展示了
也可以使用flex布局较简单，但是考虑兼容性问题的话建议浮动
但其实最简单的方法是将宽度设置为1200px，虽然偏移了一点点，但是用户也看不出来
2、浮动高度塌陷解决
最佳解决方案：伪元素清除浮动（给父元素增加::after伪元素）
六、flex布局
1、flex container中的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
2、flex-item中的属性
- order
- align-self
- flex-grow
- flex-shrink
- flex-basis
- flex
如图，下图最后一行和第一行一样按顺序排列
解决方案一：计算margin数值
解决方案二：在盒子下面添加span元素，添加span的个数是列数-2，（react中动态添加时用react.items.map(item=>)添加span元素即可，vue中v-for同理添加），也可以使用grid布局但是兼容性太差
七、盒子模型box-sizing
用于设置盒子模型的宽高，两个属性：content-box、border-box
1、content-box（默认）:
padding、border都设置在width、height外边
元素的实际占用宽度= border + padding + width
元素的实际占用高度= border + padding + height
2、border-box:
padding、border都设置在width、height里边
元素的实际占用宽度= width
元素的实际占用高度= height
