CSS各种布局
左右布局
1.两个div都设为inline-block。
2.两个元素都float。
3.一个元素float，设置外边距。
左中右布局
1.三个都设为inline-block。
2.三个都float
3.左右两个float，中间的设为inline-block
（4.代码前两个设float，设置外边距）
水平居中
- 内联元素：给父元素设置text-align:center;
- 块级元素：
-宽度已知
margin:0 auto;
-宽度未知
1.display:inline-block; 将它变为内联元素，给父元素设置text-align:center;
2.marginleft和marginright设为相同
3.父元素position:relative;
display:flex;
justify-content:center; //主轴上居中对齐
垂直居中
内联元素
给父元素设置 vertical-align: center;
块级元素：
父元素没写height
padding-top和bottom设一致
image.png
父元素写了height
1. 该元素
position: absolute;
top:50%
margin-top: -1/2自身高度 或
transform：translateY(-50%)；相对于自身高度上移50%
父元素 position：relative
2.父元素display:flex
align-items:center
justify-content:center;
3.父position:relative
margin:10px auto;
子{
position:absolute;
top和bottom设为相等
margin：auto 4px；
}
image.png
其他小技巧
清除浮动——解决浮动元素父元素塌陷
给父元素添加clearfix类
.clearfix::after{
content: "";
display:block;
clear:both;
}
行内文字垂直居中——用line-height，padding
父div中的儿div——儿子div的margin能否使父div高度增加
-取决于是否有阻挡儿子margin的样式，如父的border/padding，没有阻挡，就不会使得父div高度增加。
-父元素设置overflow:hidden(不建议使用)
实现一个1:1的div
div{
border:1px solid red;
padding-top:100%;
}
text-indent 属性 规定了 一个元素 首行 文本内容之前应该有多少水平空格。
image.png
box-sizing
默认值：content-box
width，height只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距都会被增加到最后绘制出来的元素宽度中。
尺寸计算公式：
width = 内容的宽度
height = 内容的高度
宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。
image.png
image.png
border-box
width，height属性包括内容，内边距和边框，但不包括外边距。
尺寸计算公式：
width = border + padding + 内容的宽度
height = border + padding + 内容的高度
image.png
content-box向外扩充
border-box向内扩充
