CSS盒子模型

默认盒子的大小

边框会影响盒子的大小。

连写：border：1px solid red；设置1像素，实线，红色的边框

border-width：边框的粗细数值+px

border-style:边框的样式 solid实线、dashed虚线、dotted点线(这三个常用）

border-color:边框的颜色

可以根据方向连写：border-top/bottom/left/right:1px solid red；

内容与边框之间的距离，会影响盒子的大小

后面跟的数值有4种，按顺时针，没有看对面

1值：padding:10px 代表上右下左都10px

2值：padding:10px 20px 上下10px，左右20px

3值：padding:10px 20px 30px 上10px 左右20 下 30

4值：padding:10px 20px 30px 40px 上右下左

也可以单写：padding-top/bottom/left/right:数值+px

盒子与盒子之间的距离

后面跟的数值有4种，按顺时针，没有看对面（写法与padding同理）

让盒子水平居中：margin:0 auto;

边框盒子模型（自动内减） ：box-sizing：border-box;加上该样式不会影响盒子的实际大小，会在内容的盒子减少