css盒子模型

一.类型

共包括四种盒子：
块级盒子、内联级盒子、内联块级盒子、弹性盒子

二.组成

共有四部分组成：
内容区(content)、填充区(padding)、边框区(border)、外边框(margin)

1.内容区(content)

width:200px;
height:100px;
box-sizing:content-box 默认宽高针对内容区设置

2.填充区(padding)

从上开始，顺时针进行旋转，不够了找对称：
padding: 50px;(上下左右50)
padding: 50px 20px;（上下50，左右20）
padding: 50px 20px 10px;（上50，左右20，下10）
padding: 50px 20px 10px 100px;（上50，右20，下10，左100）

结合上下左右单独对某一个方向进行设置：
padding-top: 50px;（上50）
padding-bottom: 10px;（下10）
padding-left: 100px;（左100）
padding-right: 30px;（右30）

3.边框区(border)

border是复合属性

border-style: 边框样式
border-color: 边框的颜色
border-width: 边框宽度
border: solid 10px blue; 值不区分顺序，空格隔开

结合上下左右四个方向单独设置：
border-top: solid 10px blue; 上边框
border-bottom: dashed 10px pink; 下边框
border-left: dotted 10px red; 左边框
border-right: double 10px green; 右边框

三个方面，四个方向，十二种情况：
border-top-color: aqua; 上边框颜色
border-top-width: 30px; 上边框宽度

4.外边框(margin)

从上开始，顺时针进行旋转，不够了找对称（同内容区）：
margin: 50px;
margin: 50px 20px;
margin: 50px 20px 100px;
margin: 50px 20px 100px 0;

结合上下左右四个方向单独设置（同内容区）：
margin-top: 50px;
margin-left: 100px;
margin-bottom: 10px;
margin-right: 30px;

auto:水平方向居中 用于块级元素