一、摘要
总结前端部分css选择器、css继承关系、css盒子模型等相关知识，并对容易出错的地方进行分析说明。
二、原因
在开发前端页面时如果对css选择器、继承关系，层叠，以及padding、margin区别和浮动问题理解不到位，会导致不知道什么时候该用哪种方法来处理问题。此文档是针对这些问题进行说明。
以下是对相关知识点的总结与分析：
三、选择器
1、基本选择器
（1）* 通配符选择器 代表所有元素
例子： *{ margin：0; padding:0;}
（2）标签选择器 代表网页中的所有的该标签
例子： p{ width：250px; border:1px solid red;}
（3）class选择器 .class名称
例子： .sub{ width:250px;} 代表所有class名为sub的元素
（4）id选择器 # id名称
例子：#uname{ background:red;}代表id名为uname的唯一元素
2、层次选择器
(1)后代选择器 选择1 选择2
例子: ul li{color：blue;}
>选择1>选择2 直接子元素选择器
代表li元素的父亲元素（父辈）必须是ul
（2）并列选择器 选择器A，选择器B
例子:#uname，#upass{ border:1px solid red}
uname 和upass 都设置一个红色的边框
注意:要想操作一个元素就要用上面的选择器先选择元素 再开始 设置css
3、过滤选择器
（1）基本过滤选择器
:first-letter 第一个字母
:first-line 第一行
（2）子元素过滤选择器
[1] ul li:first-child
ul的第一个li元素 （li必须是ul的第一个子元素）
[2] ul li：nth-child（2）
选择ul 第二个li元素（li必须是ul的第二个子元素）
[3] ul li：nth-child（2n）/（2n+1）
选择ul 的奇数或偶数个li元素
（3）伪类选择器
[1] a:link {color:#FF0000;} / 未访问的链接 / （只用于a标签）
[2] a:visited {color:#00FF00;} / 已访问的链接 / （只用于a标签）
[3] a:hover {color:#FF00FF;}/* 鼠标移动到链接上
[4] a:active {color:#0000FF;} / 选定的链接 /
5、属性选择器
1、选择包含某一属性的元素
a[title]{color:red;} 选择包含title的a标签
四、css的继承
在css中子元素会继承父亲元素的文字属性
但是a 不会继承颜色属性和文字装饰属性
h不会继承文字大小属性和粗细属性
五、盒子模型
1、 对盒子模型的理解
[1]盒子模型就是一个有高度和宽度的矩形区域，所有html标签都 是盒子模型
[1] 标准盒子模型 由 content+padding+border+margin组成
[2] 一个元素的实际宽度
width（内容）+padding（内边距）+border（边框的宽度）
设置的width 只是设置了内容的宽度
[3] 边框到自己的内容（文字&子元素）的距离可以用
a、设置该元素的padding （会增加该元素的宽高，只用写一次）
b、子元素上面设置margin（不会增加父亲元素的大小，所有的子元素都要设置margin
c、 父亲元素的padding+子元素的margin
2、margin写法
margin 元素的边框到别的元素（父亲元素 兄弟元素）距离
（1）、margin简写
| 上下左右 | margin：50px; |
| 上下 左右 | margin： 50px 100px |
| 上 左右 下 | margin：50px 100px 150px |
| 上 右 下 左（顺时针） | margin：50px 100px 150px 250px |
（2）、指定方位
margin-left
margin-right
margin-top
margin-bottom
（3）、文本居中
当一个元素有设置宽度 maring-left maring-right 为auto
会自动在它的父亲元素里面水平居中(元素不能设置浮动 float)
例如：.container{ width:1000px; margin:0 auto;}
*区分text-align与margin:0 auto;
p{ text-align：center;}/*p 里面的文字在p的范围内居中*/
p{ width:250px; margin:0 auto;}/*p 元素宽度为250px 并且整个p元素在它的父亲元素的里面居中*/