css知识点
目录
1 width属性只指定内容区的宽度
2 text-align属性只能在块元素上设置，直接内联元素设置不生效，比如
3 选择符
4 类上样式，id上行为。
5 样式穿透第三方组件库 >>> 、 /deep/
6行高 line-height 会继承
1 width属性只指定内容区的宽度
元素他包括“内容区、内边距、边框、外边距”
当为一个元素指定width属性时，记住他作用再内容区的宽度。
从上图可以看出，当给元素挂上border时，实际上盒子的高度和宽度不包含margin，margin是盒子外边距，虽然margin不是盒子宽度 但却占用 像素
是否可以对内联元素设置内边距，实际上也可以，但是其设置的会与其他内联元素重叠，可以加下border试下效果。
2 text-align属性只能在块元素上设置，直接内联元素设置不生效，比如![]()
在块元素设置后，所有内联内容都会对齐，实际上他适用于对任何类型的内联元素。该属性会被继承，所以块元素内所有都会对齐
3 选择符
1）id 选择器（#myid）
2）类选择器（.myclassname）
3）标签选择器（div，h1，p）
4）相邻选择器（h1 + p）
5）子选择器（ul > li） IE6不兼容
6）后代选择器（li a）
7）通配符选择器（* ）
8）属性选择器（ a[rel = "external"]）
9）伪类选择器（a: hover, li: nth - child）
- 静态伪类：只能用于超链接
link：超链接点击之前 针对所有写了href属性的超链接
visited：超链接点击之后
- 动态伪类：针对所有标签都适用
focus（聚焦，点击某个文本框后输入文字，可以定义文本框和文字的属性）：是某个标签获得焦点的时候（比如某个输入框获得焦点）
hover（盘旋，鼠标停留在上面）：鼠标放到某个标签上的时候
active（长按状态）：点击某个标签没有松鼠标时
10）交集选择器（h3.special）
css
11）并集选择器（h1,h2）
12) 结构伪类序选择器 IE6、7不兼容
ul li:first-child
ul li:last-child
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n
css3 用双冒号，但是IE78不兼容
13）兄弟选择器 + 表示选择下一个兄弟 IE6不兼容
14）通用兄弟选择器（E~F） 所有直接兄弟 不包括子
4 类上样式，id上行为。
意思是说，class属性交给css使用，id属性交给js使用。
5 样式穿透第三方组件库 >>> 、 /deep/
在使用vue构建项目的时候，引用了第三方组件库，需求只需要在当前页面修改第三方组件库的样式以做到不污染全局样式。通过在样式标签上使用scoped达到样式只制作用到本页面，但是此时再修改组件样式不起作用。
因此需要通过 >>> 穿透scoped。如果使用了sass 在scss里面用样式穿透可能不能被解析出来，所以要另写一个 /deep/
全局的话不用>>> 穿刺。
局部穿刺还有另外的方法
通过外层组件添加唯一class来区分组件+第三方样式来实现实现了类似于scoped的效果，又方便修改各种第三方组件的样式。
// Less || Sass
index.less
.num-input {
width: 90px;
.ivu-input { text-align: center!important; }
}
6行高 line-height 会继承
比如div line-height :1em 则子元素继承1em或者说该div元素字体大小的一倍。若想子元素行高是根据其本身字体大小来决定行高倍数，则div line-height :1em。不要“em/%”
大多数浏览器的默认行高约为110%至120%。其计算为 行内容+距离下一行的行距）
7层叠作用
如果想知道元素的font-size究竟是什么值，你可以按照下面的方式进行排序。
浏览器读样式的顺序为以下：
第一步：收集所有的样式表（按文件插入的顺序）
第二步：找到所有匹配的声明
第三步：现在对所有匹配的规则排序（作者-》读者-》浏览器 （这里假设你是作者角色，则自然作者重要，反之不是）
！important比谁都重要）
第四步：现在按特定性对所有声明排序
第五步：特定性相同下，若对于有冲突的规则，按照他们在各自样式表中的出现的顺序进行排序，越往下优先级越高
特定性计算方式：
用 0 0 0 初始
自左第一个0表示 这个选择器包含id吗？每个id加1分 =》1 0 0
第二个0表示 是否包含类或者伪类，每个类或者伪类 加1分 =》 0 1 0
第三个0表示 是否包含元素名？一个元素名加1分，比如p div这些 =》 0 0 1
eg
ol li p => 0 0 3
h1.greentea => 0 1 1
#ad h1 = > 1 0 1