【第二部分 | CSS】3：如何摆放网页的元素 —— 网页布局

川长思鸟来 2023-09-26 09:54 106阅读 0赞

**目录**

| 元素显示模式

元素显示模式简介

块元素

行元素

行内块元素

总结：元素显示模式

元素显示模式间的转换

垂直居中

| CSS 三大特性

层叠性

继承性

优先级（重点）

优先级 - 复合选择器的权重

| 网页布局核心概论

--------------------

### **| 元素显示模式** ###

#### **元素显示模式简介** ####

在学习网页布局之前，我们必须要了解一下HTML各种元素的元素显示模式。

就好比你想上大分，不能一个劲地就开始游戏吧？你得先了解一下各个英雄的技能。。。。

了解元素的显示模式可以更好的让我们布局页面。网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页

元素显示模式就是元素（标签）以什么方式进行显示，比如 <div> 自己占一行，比如一行可以放多个 <span>

HTML 元素一般分为 块元素 和 行内元素 两种类型

--------------------

#### **块元素** ####

这里介绍 【CSS 元素显示模式 —— 块元素】

![846e7df2e2944d1caf2e0b2d8b0ec101.png][]

**特点**

*  块元素都是独占一行的，即使在其后面写了别的语句，它们也会被显示在块元素的下一行
 *  height width 外边距 内边距 都可以设置
 *  宽度默认是容器（父级宽度）的100%。 如：body占浏览器的100％，其子标签 div 默认宽度是 body 的100％
 *  块元素是一个容器（盒子），里面可以放行级元素 或 块级元素

**注意**

*  文字类的元素内不能使用块级元素
 *   p 标签主要用于存放文字，因此 p 里面不能放块级元素，特别是不能放 div 
 *  同理，h1~h6 标签也是文字类块级标签，里面也不能放其它块级元素

--------------------

#### **行元素** ####

这里介绍【CSS元素显示模式 —— 行元素】

![17f199fa719149189d73208889843509.png][]

**特点**

*  相邻行内元素在一行上，一行可以显示多个
 *  高、宽直接设置是无效的
 *  默认宽度就是它本身内容的宽度
 *  行内元素只能容纳文本或其他行内元素

**注意**

*  链接里面不能再放链接
 *  特殊情况链接 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全

--------------------

#### **行内块元素** ####

这里介绍【CSS元素显示模式 —— 行内块元素】

![21b1b0c30edf4642869ca7907498eab7.png][]

**特点**

*  和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
 *  默认宽度就是它本身内容的宽度（行内元素特点）。
 *  高度，行高、外边距以及内边距都可以控制（块级元素特点）。

--------------------

#### 总结：元素显示模式 ####

学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素

掌握了元素显示模式，才能在接下来更好地理解盒子模型

![3e747d9da7044018bae914d7fcf4d4f1.png][]

--------------------

#### **元素显示模式间的转换** ####

特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性

例如：想给行级元素 <a> 增加触发的范围 （让用户点击链接所在的矩形也能进入目标url），即把 a 标签转为块级元素 从而可以设置宽度和高度

请务必记住：想给行级元素设置高、宽的时候，务必转为块级元素 / 块级行内元素

语法：（在标签的 CSS 样式标签 内申明）

转换为块元素：display:block;

转换为行内元素：display:inline;

转换为行内块：display: inline-block;

示例：

![03b85d45268541ecb2f33392833183ec.png][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            a {
                display: block;
                width: 120px;
                height: 40px;
                background-color: beige;
                color: black;
                text-decoration: none;
                text-align: center;
            }
    
            a:hover {
                color: rgb(58, 150, 207);
            }
        </style>
    </head>
    
    <body>
        <a href="https://ys.mihoyo.com/" target="__blank">Genshin Impact</a>
    </body>
    
    </html>

--------------------

#### **垂直居中** ####

把文字设置垂直居中的原理：把文字的行间距 line-height 设置为行高 即 文本 line-height == div容器高度 height

a {
    	display: block;      /* 把 a 转为块级元素 */
    	line-height: 40px;   /* 文字行高 = 容器高度   则是垂直居中 */
    	height: 40px;        /* a 块级元素（容器）的高度 */
    }

###    **| CSS 三大特性** ###

#### **层叠性** ####

*  CSS代码从上到下执行，若定义了相同的两个样式，则生效最下面的（类似 Java 中的变量重复赋值会覆盖）

![e1d647555dc04757ad286a614e9e8cdd.png][]

--------------------

#### **继承性** ####

*  子标签会继承父标签的某些样式，如文本颜色和字号。 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
 *  font: 大小/行高 字体样式; 的说明： 行高可以不带单位：表示子元素的行高具体值 = 字号 \* 行高数字
 *  ![df68bd90bff849f0b803c16ce1ec7941.png][]

####    **优先级（重点）** ####

*  **选择器相同，则执行层叠性**
 *  **选择器不同，则根据选择器权重执行**（优先级） style\{ \} > ID选择器 > 类/伪类选择器 > 标签选择器 > 继承（继承的权重为0）

![e26c315a42224c9681d4ee29433d19c3.png][]

![e9356b60c5564d1f840a032557e635f6.png][]

--------------------

#### 优先级 - 复合选择器的权重 ####

先复习一下CSS各选择器的优先级：

![532b75edc1ea484ab8b2f7a21de47358.png][]

*  复合选择器权重的基本公式：Σ ( 第 i 个选择器的权重) 
 *   需要注意的是，权重仅仅是各位进行相加。并不存在进位、更不是二进制
 *  如：10个 0,0,0,1 权重相加，所得结果是 0,0,0,10 而不是 0,0,1,0 ； 如： 0,0,0,1 + 0,0,0,1 = 0,0,0,2 而不是 0,0,1,0
 *  复合选择器权重的计算例子如下
    
     *  .nav li 类选择器 + 标签选择器 权重：0,0,1,0 + 0,0,0,1 = 0,0,1,1 可以看作权重是11
     *  ul li 标签选择器 + 标签选择器 权重： 0,0,0,1 + 0,0,0,1 = 0,0,0,2 可以看作权重是2
     *  综上， 标签优先级 .nav li 大于 ul li （11 > 2）

###    **| 网页布局核心概论** ###

页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们封装网页元素，把网页的开发分为一个个小的盒子进行

盒子模型解决的是：网页元素摆放在哪里的问题。就好比堆积木，放在那里就OK了

浮动解决的是：让网页元素更加精确地摆放在我们所需要的地方。就好比剪视频，粗剪后再细剪

定位解决的是：解决盒子模型和浮动无法解决的问题：元素在网页视窗中绝对静止、以其它盒子为相对参照移动。

总之，接下来三篇文章，分别介绍盒子模型、浮动、定位。

学完了这些，估计CSS基础也差不多入门了。

[846e7df2e2944d1caf2e0b2d8b0ec101.png]: https://img-blog.csdnimg.cn/846e7df2e2944d1caf2e0b2d8b0ec101.png
[17f199fa719149189d73208889843509.png]: https://img-blog.csdnimg.cn/17f199fa719149189d73208889843509.png
[21b1b0c30edf4642869ca7907498eab7.png]: https://img-blog.csdnimg.cn/21b1b0c30edf4642869ca7907498eab7.png
[3e747d9da7044018bae914d7fcf4d4f1.png]: https://img-blog.csdnimg.cn/3e747d9da7044018bae914d7fcf4d4f1.png
[03b85d45268541ecb2f33392833183ec.png]: https://img-blog.csdnimg.cn/03b85d45268541ecb2f33392833183ec.png
[e1d647555dc04757ad286a614e9e8cdd.png]: https://img-blog.csdnimg.cn/e1d647555dc04757ad286a614e9e8cdd.png
[df68bd90bff849f0b803c16ce1ec7941.png]: https://img-blog.csdnimg.cn/df68bd90bff849f0b803c16ce1ec7941.png
[e26c315a42224c9681d4ee29433d19c3.png]: https://img-blog.csdnimg.cn/e26c315a42224c9681d4ee29433d19c3.png
[e9356b60c5564d1f840a032557e635f6.png]: https://img-blog.csdnimg.cn/e9356b60c5564d1f840a032557e635f6.png
[532b75edc1ea484ab8b2f7a21de47358.png]: https://img-blog.csdnimg.cn/532b75edc1ea484ab8b2f7a21de47358.png