CSS-行内元素、块、行内块的特点以及选择器权重

最新推荐文章于 2024-07-09 15:09:19 发布

原创最新推荐文章于 2024-07-09 15:09:19 发布 · 270 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

行内、块元素的特性与选择器权重

内联元素（了解）

《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>