内边距
1.内边距就是内容和边框之间的距离。
2.格式
2.1.非连写
.san1{width: 100px;height:100px;border: 1px solid black;padding-top: 20px;padding-left: 20px;padding-bottom: 20px;padding-right: 20px;}
2.2.连写
{padding:上 右 下 左;}
省略的规律同边框属性。
注意： 1.在设置内边距之后，div的大小会发生变化，原来的+内边距的大小 2.有边框属性才会有内边距属性。 3.内边距也会有背景颜色。
外边距
1.外边距就是标签和标签之间的距离。
2.格式
2.1非连写
.san1{width: 100px;height:100px;border: 1px solid black;margin-top: 10px;margin-left: 10px;margin-bottom: 10px;margin-left: 10px;}
2.2连写
margin:上 右 下 左;
3.应用
用
body{margin: 0px;}
来消除网页和浏览器之间的距离。
注意
1.没有设置外边距margin属性时，会发现两个标签之间仍旧存在一段距离，这是因为字符实体的原因，HTML将回车自动当做1个空格来识别。
2.margin那一部分没有背景颜色。
外边距合并现象
在默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距比较大就听谁的。
盒子模型
1.HTML中的所有标签都是盒子模型 content+padding+border+margin
2.盒子模型的宽度和高度
2.1 content的宽度和高度
通过标签设置的width和height
2.2 元素的宽度和高度
宽度=左边框+左内边距+width+右内边距+右边框
高度=上边框+上内边距+height+下内边距+下边框
border：50px;
注意：这相当于上、右、下、左的边框都为50px。
2.3 元素空间的宽度和高度
宽度=左外边距+元素的宽度+右外边距
高度=上外边距+元素的高度+下外边距
盒子box-sizing属性（CSS3新增属性）
怎么在增加border、padding时元素的大小仍旧保持不变（不采用直接增减content的宽、高）
box-sizing: border-box;/*和直接增减content的宽、高原理相同*/
box-sizing: border-box / content-box;
content-box元素的宽高=边框+内边距+设置的宽高
盒子居中
大盒子里面一个小盒子，让小盒子在大盒子里水平垂直居中。
1.padding(用padding挤下来)
.big{width: 500px;height: 500px;background-color: red;padding: 150px;/*大盒子和小盒子之间的距离，小盒子此时相当于大盒子的内容*/box-sizing: border-box;}.small{width: 200px;height: 200px;background-color: green;margin: 150px;}
2.margin
.big{width: 500px;height: 500px;background-color: red;border: 1px solid red;}.small{width: 200px;height: 200px;background-color: green;margin: 150px;}
注意
1.如果两个盒子是嵌套关系，那么当给里面的盒子设置了顶部的外边距，外面的盒子也会被顶下来。
2.解决这个问题的方法是给外面那个盒子设置边框属性。
3.解决嵌套关系盒子之间的距离，首先考虑padding，再考虑margin，margin本质上用于控制兄弟关系之间的间隙。
水平居中
.big{width: 500px;height: 500px;background-color: red;}.small{width: 200px;height: 200px;background-color: green;margin: 0 auto;/*只对水平居中管用，垂直居中用像素*/}
盒子的居中和内容的居中
text-align: center;和margin: 0 auto;的区别
text-align: center;设置盒子里的文字和图片的水平居中
margin: 0 auto;设置盒子自己水平居中
注意
默认清空标签的外边距和内边距
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
在这个网址里直接复制
/3.18.1/build/cssreset/cssreset-min.css
行高和字号
在CSS中所有的行都有自己的行高
行高和盒子的高是不同的，行高是指某一行内容的高度，盒子的高度是指标签的高度。
line-height设置行高
规律
1.文字是在行高中垂直居中的。
2.文字在盒子里的垂直居中
1.一行文字：
将盒子的高度设置和行高设置为一样，就可以保证一行文字在盒子的高度中是垂直居中的。
2.多行文字:
.big{margin: 0px;box-sizing: border-box;width: 500px;height: 200px;border: 1px solid #000;padding-top: 20px;padding-top: 80px;/*用padding挤*/}p{line-height: 20px;}
