前端之 CSS 知识点回顾
前言
总结收集CSS的一些关键知识点
设置样式的方式有几种
3种
- 外部样式表，使用link引入一个外部css文件。
- 内部样式表，在head标签中使用style标签设置样式。
- 内联样式，在HTML元素中使用style属性定义样式
选择器都有哪些
- 派生选择器（根据文档的上下文关系来确定某个标签的样式。li strong {font-style: italic;font-weight: normal;}）
- id选择器（id）
- 类选择器（class）
- 属性选择器（用DOM的属性进行声明）
- 后代选择器（使用空格间隔，div p{}）
- 群组选择器（使用逗号分隔，div,p,a{}）
选择器的优先级
- 当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
- 当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body><p>标签内的文字的颜色是red，优先级相等的时候与文件中样式定义的先后顺序有关，即是后面的覆盖前面的，与在class定义中的先后关系无关。
- 一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
下面列表中，选择器类型的优先级是递增的：
- 派生选择器（例如,
h1）和伪元素（例如,::before） - 类选择器(例如,
.example)，属性选择器（例如,[type="radio"]），伪类（例如,:hover） - ID选择器（例如,
#example） - 通配选择符(
*), 关系选择符 (+, >, ~, ' ') 和否定伪类(:not()) 对优先级没有影响。（但是，在:not()内部声明的选择器是会影响优先级）。 - 给元素添加的内联样式 (例如,
style="font-weight:bold") 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。
例外的!important规则
- 当在一个样式声明中使用一个
!important规则时，此声明将覆盖任何其他声明。 - 当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
- 使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。
一些经验法则
- 一定要优化考虑使用样式规则的优先级来解决问题而不是
!important - 只有在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用
!important - 永远不要在全站范围的 css 上使用
!important - 永远不要在你的插件中使用
!important
木已成舟！怎样覆盖!important
- 再添加一条带
!important的CSS规则 - 给选择器更高的优先级
- 添加一样选择器，把它的位置放在原有声明的后面，让其覆盖
- 干脆改写原来的规则，以避免使用
!important
什么是CSS Hack
由于不同厂商的浏览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等）， 对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。 我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本编写特定的CSS样式， 我们把这个针对不同的浏览器/不同版本写相应的CSS的过程，叫做CSS Hack。
分类
- 属性前缀法(即类内部Hack)：例如 IE6能识别下划线
_和星号*，IE7能识别星号*，但不能识别下划线_，IE6~IE10都认识\9，但firefox前述三个都不能认识。 - 选择器前缀法(即选择器Hack)：例如 IE6能识别
*html.class{}，IE7能识别*+html.class{}或者*:first-child+html.class{}。 - IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：
<!--[if IE]>IE浏览器显示的内容 <![endif]-->，针对IE6及以下版本：<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
一般情况下，我们尽量避免使用CSS hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才使用hack。
使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。
display:none与visibility:hidden的区别
display:none元素完全从渲染树中消失，渲染的时候不占据任何空间。visibility: hidden不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见。display: none是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显示。- 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
- 读屏器不会读取
display: none;元素内容；会读取visibility: hidden;元素内容。
Sass、LESS、Stylus是什么
Sass、LESS、Stylus均是CSS预处理器。
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。 它支持嵌套、变量、混入、继承、函数等。
优势
- 结构清晰，便于扩展。
- 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
- 可以轻松实现多重继承。
- 完全兼容 CSS 代码，可以方便地应用到老项目中。
CSS的content属性
CSS的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。
CSS可以在元素的前后插入文本：在选择器的后面加上::before或者::after。在声明中，指定 content 属性，并设置文本内容。
可以通过将content 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。
rgba()和opacity的透明效果有什么不同
- rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
- rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）