作者：hh_phoebe
转发链接：https://juejin.im/post/5ee0cf335188254ec9505381
目录细品100道css知识点（上）【干货满满】本篇
前言看到小伙伴留言说期待后面整理的CSS和JS篇，工具人小编整理出了本篇有关CSS部分的知识点。本篇文章作为对CSS知识点的统筹，囊括了目前大部分在面试当中常见的内容，包括一些易踩雷的知识点。文章篇幅较长，建议收藏慢慢细品。
文中篇概念性的内容也蛮多，小编一如既往的做了分割线，记忆力好的童鞋请自行忽略。
1.标准的CSS盒的模型及其和低版本的IE盒子模型的区别？
标准（W3C）盒子模型：width = 内容宽度（content） border padding margin
低版本IE盒子模型： width = 内容宽度（content border padding） margin
图片展示:
区别： 标准盒子模型盒子的height和width是content（内容）的宽高，而IE盒子模型盒子的宽高则包括content padding border部分。
2.几种解决IE6存在的bug的方法- 由float引起的双边距的问题，使用display解决；
- 由float引起的3像素问题，使用display: inline -3px;
- 使用正确的书写顺序link visited hover active，解决超链接hover点击失效问题；
- 对于IE 的z-index问题，通过给父元素增加position: relative解决；
- 实用!important解决Min-height最小高度问题；
- 使用iframe解决select在IE6下的覆盖问题；
- 使用over: hidden, zoom: 0.08, line-height: 1px解决定义1px左右的容器宽度问题；
注意：有关IE6支不支持!important的问题，对于单个类是支持的。例如：
.content { color: pink !importent };
.content { color: orange };
// 这里IE6及以上，FF，google等都将显示粉红色
复制代码
当是，当一个样式内部有多个相同属性的时候。例如：
.content { color: pink !importent; color: orange };
// IE7及以上，FF, google显示粉红色，而IE6将显示橙色（原因是一个样式内重复设置了属性，后面的就会覆盖掉之前的）
复制代码3.CSS选择符有哪些？哪些属性可以继承？
常见的选择符有一下：
id选择器（#content），类选择器（.content）, 标签选择器（div, p, span等）, 相邻选择器（h1 p）, 的选择器（ul li）, 后代选择器（li, a）， 通配符选择器（*）, 属性选择器（a[rel = "external"]）， 伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size, font-family, color, UL, LI, DL, DD, DT;
不可继承的样式属性： border, padding, margin, width, height；
4.CSS优先级算法如何计算？- 考虑到就近原则，同权重情况下样式定义以最近者为准
- 载入的样式按照最后的定位为准
优先级排序：
同权重情况下： 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
!important > # > . > tag
注意： !important 比 内联优先级高
5.CSS3新增伪类有那些？- :root 选择文档的根元素，等同于html元素
- :empty 选择没有子元素的元素
- :target 选取当前活动的目标元素
- :not(selector) 选择除 selector 元素以外的元素
- :enabled 选择可用的表单元素
- :disabled 选择禁用的表单元素
- :checked 选择被选中的表单元素
- :after 在元素内部最前添加内容
- :before 在元素内部最后添加内容
- :nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
- nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
- :nth-child(odd)
- :nth-child(even)
- :nth-child(3n 1)
- :first-child
- :last-child
- :only-child
- :nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
- :nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
- :nth-of-type(odd)
- :nth-of-type(even)
- :nth-of-type(3n 1)
- :first-of-type
- :last-of-type
- :only-of-type
- ::selection 选择被用户选取的元素部分
- :first-line 选择元素中的第一行
- :first-letter 选择元素中的第一个字符
css:
* {margin: 0; padding: 0;}
.content {
margin: 0 auto;
width: 100px;
height: 100px;
background: pink;
}
html:
<div class="content"></div>
复制代码垂直居中
css:
* {margin: 0; padding: 0;}
.content {
width: 100px;
height: 100px;
background: pink;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%); // 更新： 此处感谢小伙伴留言指出
}
html:
<div class="content"></div>
复制代码居中浮动元素
css:
* {margin: 0; padding: 0;}
.content {
width: 100px;
height: 100px;
background: pink;
position: relative;
top:50%;
left: 50%;
margin: -150px 0 0 -250px;
}
html:
<div class="content"></div>
复制代码如何让绝对定位的div居中
css:
* {margin: 0; padding: 0;}
.content {
margin: 0 auto;
position: absolute;
width: 1500px;
background: pink;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
html:
<div class="content"></div>
复制代码7.display有哪些值？它们的作用是什么？
