css样式：表格、字体、文本、布局（盒模型、浮动、定位、弹性盒子等等）
盒模型 ：css的一种开发布局 模式，它根据标签在文档流中的特点来布局
（标签在文档流中的特点： 块元素、行内元素、行内块的特点）
一旦标签脱离文档流 ，标签在文档流中的特点也就不存在了。
盒模型的布局方式一定是最主要的，最基础
网页把页面中所有的标签，所有的内容都当作一个个小盒子（小区块），我们在布局时，需要考虑盒子的大小及位置，不需要考虑它的形状
文档流 ：网页开发存在多层结构，我们把页面的最底层叫文档流
我们写的标签默认都在网页最低层
一、盒子模型的构成
盒模型 冰箱快递
内容区 冰箱
内边距 泡沫
边框 纸箱子
外边距 位置
- 盒模型的大小跟哪些组成部分有关？
跟内容区、内边距、边框有关，跟外边距无关
- 内容区 ：用来装内容 （默认设置的宽高 ，是盒模型的内容区大小）
二、盒子模型------边框
1、设置边框的简写方式
border: 边框的大小 边框的样式 边框的颜色;
2、设置边框的完整写法
（1）border-width: 10px; 可选：默认大小1-3px
（2）border-style: solid; 必选：默认时none
- 可选值：
solid 实线
dotted 点状的虚线
double 双线
dashed 条状的虚线
（3）border-color: red; 可选值：默认黑色
以上的完整写法，样式名后都能跟多个样式值，空格隔开；
4个 上 右 下 左
3个 上 左右 下
2个 上下 左右
1个 上下左右
3、自定义小箭头
width: 0px;
height: 0px;
border: 10px solid red;
border-color: transparent orange transparent transparent ;
4、分别设置某一边的边框
border-bottom: 10px solid red;
border-top: 10px solid red;
border-left: 10px solid red;
border-right: 10px solid red;
5、去除某一边的边框线
border-xxx: none;
三、盒子模型------内边距
1、简写
padding：；
也可跟多个值，规则跟border-width一样
eg：padding:10px 30px 40px;
2、分别设置某一边的内边距
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
四、盒子模型------外边距
外边距：设置盒子与盒子之间的距离，影响盒子的位置
1、简写
margin: ;
属性值也可以写多个，规则跟border-width一致
2、分别设置某一边的外边距
margin-top: 20px; 在盒子上方增加正值 大小的空白，盒子向下移动
负值 ， 向上移动
margin-left: 20px; 正值 ，盒子向右移动
负值 ， 向左移动
margin-bottom: 20px; 正值 ，盒子本身不动 ，下面的盒子向下移动
负值 ， 下面的盒子向上移动
margin-right: 20px; 正值 ，盒子本身不动，右侧的盒子向右移动
负值 ， 右侧的盒子向左移动
五、盒子模型------圆角效果
border-radius: 50%; （border-radius: 30px;）
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;