层叠、继承与盒模型

—Miss. Z—

已于 2022-08-11 15:51:41 修改

阅读量145

点赞数

分类专栏： HTML5/CSS3 文章标签：前端 css 盒模型继承层叠

于 2022-08-11 15:24:10 首次发布

本文链接：https://blog.csdn.net/weixin_42071236/article/details/126119669

版权

HTML5/CSS3 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

层叠

声明冲突：同一个样式，多次应用到同一个元素
层叠：解决声明冲突的过程，浏览器自动处理（权重计算）

1. 比较重要性

重要性从高到底：

作者样式表：开发者书写的样式

1）作者样式表中的 !important 样式
2）作者样式表中的普通样式
3）浏览器默认样式表中的样式

2. 比较特殊性

看选择器

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个4位数（x x x x）

千位：如果是内联样式，记1，否则记0
百位：等于选择器中所有id选择器的数量
十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
个位：等于选择器中所有元素选择器、伪元素选择器的数量

3. 比较源次序

代码书写靠后的胜出

test1：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: lightcoral;
        }

        .container p.test2 {
            color: purple;
        }

        p:nth-child(3) {
            color: lightblue;
        }

        p#demo1 {
            color: lightgray;
        }

        div p.test2 {
            color: lightseagreen;
        }
    </style>
</head>

<body>
    <main>
        <div class="container">
            <p>Lorem ipsum dolor sit amet.</p>
            <a href="https://www.baidu.com/">这是一个超链接</a>
            <p style="color:navy" class="test2" id="demo1">Saepe ipsa eum provident corrupti?</p>
            <p id="demo2" class="test1">Optio blanditi isquidem suscipit deserunt!</p>
            <div>
                <span>HTML</span>+<span>CSS</span>+<span>JavaScript</span>编程
                <p>下面是一条水平线
                    <hr>
                </p>
            </div>
        </div>
        <p>分隔段落</p>
    </main>
</body>

</html>

test2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main div.container a {
            color: lightgoldenrodyellow;
        }

        .container span a[href] {
            color: lightcoral;
        }

        a:first-child#demo {
            color: lightseagreen;
        }

        span.box a.test {
            color: lightslategray
        }

    </style>
</head>

<body>
    <main>
        <div class="container">
            <a>百度</a>
            <span class="box">
                点击可跳转：<a href="https://www.google.cn/" class="test" id="demo">谷歌</a>
            </span>
            <div>
                <img src="planet.ico">
                <a href="https://baike.baidu.com/item/%E6%98%9F%E7%90%83/18584?fr=aladdin">星球百度百科</a>
            </div>
        </div>
        <p>You can reach Michael at:</p>
        <ul>
            <li><a href="https://example.com">Website</a></li>
            <li><a href="mailto:m.bluth@example.com">Email</a></li>
            <li><a href="tel:+123456789">Phone</a></li>
        </ul>

    </main>
</body>

</html>

test3：在重要性和特殊性相同的情况下，比较源次序，代码越靠后的胜出！(如左图)

在作者样式表中加!important则表示最重要，但不到万不得已的情况，建议不要使用该方法(如右图)。

继承

子元素会继承父元素的某些CSS属性
通常，跟文字内容相关的属性都能被继承

属性值的计算过程

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件：该元素的所有CSS属性必须有值
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程

特殊的两个CSS取值：

inherit：手动（强制）继承，将父元素的值取出应用到该元素
initial：初始值，将该属性设置为默认值

盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：

行盒，display等于inline的元素
块盒，display等于block的元素

行盒在页面中不换行、块盒独占一行(display默认值为inline)

无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：

内容 content
width、height，设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
内边距 padding：也就是对象的内容与对象边框之间的距离，它可以通过padding属性进行设置。该属性可指定1~4个属性值，各属性值以空格分隔。
padding属性的语法格式如下：padding:length;
length：百分比或长度数值。百分比是基于父对象的宽度
padding属性可以通过以下几种方式设置对象的内边距：

提供4个属性值，分别用于按照上、右、下、左的顺序依次指定内边距
只提供一个属性值，用于设置全部的内边距
提供两个属性值，第一个用于设置上、下分向的内边距，第二个用于设置左、右方向的内边距
提供3个属性值，第一个用于设置上方的内边距，第二个用于设置左、右方向的内边距，第三个用于设置下方的内边距
填充区+内容区 = 填充盒 padding-box

边框 border
边框 = 边框样式(border-style) + 边框宽度(border-width) + 边框颜色(border-color)
border-color属性只有在设置了border-style属性，但不能将border-style属性值设置为none，并且不能将border-width属性值设置为0像素时才有效，否则不显示边框。
边框+填充区+内容区 = 边框盒 border-box
外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
速写属性margin

盒模型应用

改变宽高范围

默认情况下，width和height设置的是内容盒宽高。
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒

精确计算
box-sizing：border-box / content-box

改变背景覆盖范围

默认情况下，背景覆盖边框盒
可以通过background-clip进行修改(background-clip:content-box / border-box / padding-box)

溢出处理
overflow，控制内容溢出边框盒后的处理方式
overflow:auto / visible / scroll / hidden

overflow是 overflow-x 和overflow-y的简写属性
断词规则
word-break，会影响文字在什么位置被截断换行

normal：普通。C(Chinese)J(Japan)K(Korean)字符（文字位置截断），非CJK字符（单词位置截断）
break-all：截断所有。所有字符都在文字处截断
keep-all：保持所有。所有文字都在单词之间截断

空白处理
white-space: nowrap

normal：连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子 (line boxes)」时是必要。
nowrap：和normal一样，连续的空白符会被合并。但文本内的换行无效。
pre：连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。
pre-wrap：连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充「行框盒子 (line boxes)」时才会换行。
pre-line：连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充「行框盒子 (line boxes)」时会换行。
break-spaces与pre-wrap的行为相同，除了：
1.任何保留的空白序列总是占用空间，包括在行尾。
2.每个保留的空格字符后都存在换行机会，包括空格字符之间。
3.这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

	换行符	空格和制表符	文字换行	行尾空格
normal	合并	合并	换行	删除
nowrap	合并	合并	不换行	删除
pre	保留	保留	不换行	保留
pre-wrap	保留	保留	换行	挂起
pre-line	保留	合并	换行	删除
break-spaces	保留	保留	换行	换行

行盒的盒模型

常见的行盒：包含具体内容的元素
span、strong、em、i、img、video、audio

显著特点

盒子沿着内容沿伸
行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。
内边距（填充区）/ 边框 / 外边距：水平方向有效，垂直方向不会实际占据空间。

行块盒
display：inline-block 的盒子

不独占一行
盒模型中所有尺寸都有效

空白折叠
空白折叠，发生在行盒（行块盒）内部或行盒（行块盒）之间
可替换元素和非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
可替换元素：img、video、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒，盒模型中所有尺寸都有效。

object-fit：指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框

contain：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
cover：被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
fill：被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
none：被替换的内容将保持其原有的尺寸。
scale-down：内容的尺寸与none或contain中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。