行内、块元素的特性与选择器权重
内联元素(了解)
《CSS权威指南》中指出:任何不是块级元素的可见元素都是内联元素,其表现的特性是“行布局”形式。
注意:inline
容易与内联元素的概念混淆,inline
元素一定是内联元素,但不是所有的内联元素都是inline
inline
行内元素的特点
- 和其他元素都在一行上;
- 高
height
,行高line-height
及外边距margin
和内边距padding
不可改变; - 宽度由内容决定并且不可改变
- 内联元素只能容纳文本或者其他内联元素
- 只有水平方向
margin-left、margin-right、padding-left、padding-right
会产生边距效果 - 行内元素之间先默认水平排列,若剩余空间不足以容纳下一个内联元素,则换行显示,只是遵循文本流规则换行,而不将整个行内元素换行
block
块元素特点
- 会独占一行,可以容纳内联元素和其他块级元素
- 高度、行高、以及外边距和内边距都可控制
- 只要一点须记住:宽度缺省时默认为百分之百
inline-block
行内块与前两者的区别
- 使元素变成行内元素,拥有行内元素的特性,既可以与其他行内元素一起共享一行,不会独占一行。
- 同时,相比行内元素,能够调节宽高、边距,宽度默认100%,同时容纳块、行内、行内块;
- 可用于换行,但有一个缺点,行内元素依然值按照文本流换行
补充
flex
和inline-flex
区别:
- 对于容器
div
自身来说,一个表现为块级元素,一个表现为块级内联(行内块)元素。 - 它们唯一的区别就是
inline-flex
可以将当前元素转换为行内块元素,flex
不进行转换。 - 对于它们的内部子项目没有任何影响,只是对自身和自身与周边元素的关系产生一些影响
CSS
样式权重
权重顺序
-
!important
正无穷 -
a级:内联样式
1000
<div class="box1" style="background-color: burlywood"></div>
-
b级:
id
选择器100
-
c级:类选择器(
.class
)、属性选择器([attribute]
)、伪类选择器(:hover
等) 权重值10
(实际测试属性选择器的权重要高于类选择器,但低于id
选择器) -
d级:元素选择器(
div、span
等)、伪元素选择器(::before
等)权重值1
-
e级:通配符选择器
0
**选择器比较规则:**先进行高级权重比较,如果在高级无法比较时,同级权重进行累加,案例如下
<div class="box3">
<p class="content"></p>
</div>
<style>
.box3 .content {
background-color: #664d03;
}
.content {
height: 100px;
background-color: #52c147;
}
</style>
因为.box3 & .content
都是类选择器,所以采用累加比较两个样式的权重,前者权重为10+10,而后者权重为10,所以最终结果为background-color: #664d03;
生效
但还是如果我们采用一个ID
选择器和类选择比较,则会优先比较选择器的等级
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4">
<div class="box5">
<div class="box6">
<div class="box7">
<div class="box8">
<div class="box9">
<div class="box10">
<div class="box11" id="box"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
div{
height: 100px;
}
#box{
background-color: #1abc9c;
}
.box1 .box2 .box3 .box4 .box5 .box6 .box7 .box8 .box9 .box10 .box11{
background-color: #67C23A;
}
</style>
哪怕我们类选择器的计算值已经为110了,可最后的效果还是显示id
选择器的样式