CSS各种布局

左右布局

1.两个div都设为inline-block。
2.两个元素都float。
3.一个元素float，设置外边距。

左中右布局

1.三个都设为inline-block。
2.三个都float
3.左右两个float，中间的设为inline-block
（4.代码前两个设float，设置外边距）

水平居中

1. 内联元素：给父元素设置text-align:center;
2. 块级元素：
   -宽度已知
   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向内扩充