1.css的三大特性
1.1层叠性
给相同的选择器设置相同的样式，其中一个样式会覆盖另一个样式，覆盖的原则是就近原则
1.2继承性
就像现实生活中，孩子可以继承父亲的财产一般，子元素可以继承父元素的大部分样式，例如文字类的样式 font text line-height color等
案例：
段落p继承了来自父亲元素的字体颜色和字体大小…
1.3行高的继承性
子元素继承父元素的行高规则是，假如父元素的行高没有设置一个具体的像素大小，而是一个倍数数字；那么，子元素的行高就等于 子元素的字体大小*倍数，如果子元素没有设置字体大小，默认的字体大小就是从父亲继承来的字体大小。
1.4优先级
如果给不同的选择器设置相同的属性，那么就根据选择器的优先级来决定，到底使用哪一个选择器的样式
！important >> 行内样式style >> #id选择器 >> .类选择器,伪类选择器 >> 元素标签选择器>>*统配选择器>>继承
权重 无穷大 》》 1，0，0，0 》》0，1，0，0 》》 0，0，1，0 》》 0，0，0，1 》》0
注意点: 浏览器默认给链接加了一个颜色为蓝色的元素选择器
继承的权重是0
如果是复合选择器是后代选择器，就要加上父元素选择器的权重
.nav li权重是10加上1 等于11
1.4.1复合选择器的优先级
如果选择器是复合选择器，就要进行权重叠加来判断 到底使用哪一个选择器
注意：权重进行累加不会有进位的问题
例如
ul li{ 权重是 两个元素选择器相加 0,0,0,1加上0，0，0，1等于0，0，0，2color:green;}li{ 权重是一个元素选择器 等于0，0，0，1color:blue;}.nav li{ 权重是一个类选择器加上一个元素选择器 等于0，0，1，0加上0，0，0，1等于0，0，1，1color:pink;}所以.nav li的权重大于ul li的权重大于li的权重
2盒子模型
网页上的元素都可以看作是一个盒子，盒子模型由边框 ，内容，内边距，外边距四部分组成
2.1边框border
2.2.1边框的三部分组成
border-width边框的粗细
border-style边框样式
border-color边框的颜色
2.2.2边框的复合写法
border: 粗细，样式，颜色 没有顺序要求 只要属性写对没有任何顺序要求
例子：border: 2px solid pink;
border分为上下左右，可以单独设置它们的属性
可以利用css的层叠性给边框的四条边设置不同的样式
border-top,border-bottom,border-left,border-right
例子：
border-bottom: blue 5px dashed;
2.2.3边框的粗细
给盒子内容加上边框，会使盒子的大小变大 ，盒子的大小等于盒子本身的大小加上边框大小
2.2.盒子的内边距
给盒子加上内边距，会使盒子里面的内容距离盒子左上角有一定的距离，方位定位内容
paddind-left paddind-top padding-bottom padding-right
2.2.1内边距的复合写法
padding: 5px;如果只有一个值，代表上下左右都有5px的内边距padding :5px 10px如果有两个值，代表上下5px, 左右10pxpadding : 5px 10px 20px如果有三个值，代表上5px, 左右10px, 下20pxpadding: 5px,10px,20px,30px如果有四个值，代表上右下左 顺时针分别是 5,10,20,30px的内边距2.2.2内边距会撑大盒子的大小（如果当前盒子设置了宽/高）
如果要解决实际开发中的需要，为了让盒子保证原有的大小，并且也能有内边距，则让盒子的宽度和高度减去多出来的内边距大小即可（因为内边距会撑大盒子的大小）
内边距撑大盒子也会带来优点
我们可以通过提前给盒子设置内边距，并设置固定的高度（块元素/行内块元素才可以），然后填充内容，可以实现盒子宽度根据内容实时 变化
如果盒子本身没有指定宽或者高，那么padding就不会撑开盒子的大小
假如盒子只指定了宽，那么padding只会撑开左右的大小
假如盒子只指定了高，那么padding只会撑开上下的大小
假如盒子既指定了宽又指定了高，那么pdding会撑开上下左右的大小
2.2.3内边距的合并
border-collapse: collapse;
2.3盒子的外边距
margin指的是盒子与盒子之间的距离
和内边距padding类似,外边距也分上下左右
margin-left margin-right margin-top margin-bottom
2.3.1也能复合着写，复合的效果和padding内边距一致
通过调试器中的computed能够更直观的看到盒子模型的结构
2.3.2外边距实现盒子水平居中
需要满足的两个前提条件是
盒子必须指定了宽度（因为如果没有指定宽度，默认的宽度就是父元素的宽度就没有居中的效果，而是全屏铺满）
盒子的左右外边距设置为auto
实现：
margin: 0 auto;margin: auto ;水平垂直都居中margin-left:auto; margin-right:auto;margin:100 auto; 水平居中，上下100px的外边距如果想要行内/行内块元素水平居中，只需要找到它们的父元素，添加text-align:center的属性即可
2.3.3外边距的合并塌陷
介绍：如果有两个嵌套块元素，如果子元素设置了外边距，那么父元素会随着子元素一起向下塌陷（巧记：这个子元素还不不独立，还依赖着父元素，会拉着父元素一起变化）
如果父元素和子元素都设置了外边距，那么子元素和父元素会一起塌陷，塌陷的程度由两个元素外边距较大的那个决定
解决方案：
1.给父元素设置边框，（父元素和子元素划立了界限，子元素开始独立）
border: 1px solid transparent; transparent代表透明
2.为父元素定义内边距 （父元素给子元素在内部划了一条界限）
3.给父元素加上overflow: hidden的属性
2.4清除内外边距
在第一行css代码上写上
*{padding:0;margin:0;}
就能清楚一些原本带有内外边距的元素了
行内元素尽量只设置左右的内外边距，因为行内元素的上下边距浏览器本来就不显示
