01_CSS
CSS选择器优先级
!important > 行间样式 > id > class/属性选择器 > 标签选择器 > 通配符
css权重:
选择器 | 权重 |
---|---|
!important | infinity |
行间样式 | 1000 |
id | 100 |
class/属性/伪类 | 10 |
标签/伪元素 | 1 |
通配符 | 0 |
- 进制是256
css选择器的解析顺序
浏览器css匹配核心算法的规则是以 right-to-left 方式匹配节点的。
这样做是为了使规则能够快、准、狠地与render树上的节点匹配,通俗地将就是 就近原则。
如果从左向右需要遍历所有的分支直到最后的叶子节点,如果发现不符合规则则会返回上一级节点。会有很多失败查找
而从右向左,只要发现最右边选择器不匹配,就可以直接舍弃了,避免了许多无效匹配。
提升css选择器性能
理解了CSS选择器从右到左匹配的机制后,明白只要当前选择器的左边还有其他选择器,样式系统就会继续向左移动,直到找到和规则匹配的选择器,或者因为不匹配而退出。我们把最右边选择器称之为关键选择器。
- 避免使用通用选择器
/* Not recommended */
.class * { ... }
- 避免使用tag限制class
/* Not recommended */
div.class { ... }
- 避免使用tag和class限制id
/* Not recommended */
div#id { ... }
- 避免使用多层标签选择器。用class代替,减少css查找
/* Not recommended */
div ul li a { ... }
- 避免使用子选择器
/* Recommended */
.list .item { ... }
/* Much to recommended */
.list-item { ... }
- 使用继承(#)
BFC ( block format context 块级格式化上下文)
它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
触发一个盒子的BFC
position: absolute;
display: inline-block;
float: left/right;
overflow: hidden;
margin塌陷和margin合并
<style>
.wrapper {
width: 100px;
height: 100px;
background: red;
margin-left: 100px;
margin-top: 100px;
}
.content {
width: 100px;
height: 100px;
background: black;
margin-left: 50px; /* 正常效果 */
margin-top: 50px; /* 无效 */
/* margin-top: 150px; 当值大于父级margin-top当值时,带动父级一起生效 */
}
</style>
<div class="wrapper">
<div class="content"></div>
</div>
这就是margin塌陷:锤子方向的margin取父子的最大值。
解决方法:
- 给父级一个border-top,不推荐使用。
- 让该元素变成BFC元素
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
margin-bottom: 100px;
}
.box2 {
width: 100px;
height: 100px;
background: red;
margin-top: 100px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
实际效果:两个box间垂直方向间隔不是200px,而是100px。
这就是margin合并:兄弟结构垂直方向的margin是合并计算的
可通过BFC解决:把两个兄弟结构或者其中一个放在一个BFC的父级中。
注意:实际开发中不能随意再加结构,所以在开发中一般不解决该问题,只设置一个元素的margin值。
浮动 float:left/right;
浮动元素会产生浮动流,块级元素看不到它们,
产生了BFC的元素和文本类属性的元素(inline-)以及文本都能看到浮动元素。
清除浮动:
- 在父级元素的逻辑最后清除浮动。(只用块级元素才能使用clear)
<style> .wrapper::before { content: ""; display: block; /* 只有块级元素才能使用clear */ clear: both; } .wrapper { border: 1px solid black; } .content { float: left; width: 100px; height: 100px; background: red; } </style> <div class="wrapper"> <div class="content"></div> <div class="content"></div> <div class="content"></div> </div>
- 使父级变成BFC元素或display: inline-block;
( 扩展:position: absolute; 和float: left; css时执行内部把元素转换为inline-block; )
定位 position
- position: absolute;
脱离原来的位置进行定位,最近的有有定位的父级进行定位,如果没有,则相对于文档进行定位 - position: relative;
保留原来的位置进行定位,相对自己原来的位置进行定位