前端 HTML/CSS （五）

刺骨的言语ヽ痛彻心扉 2022-12-30 13:44 164阅读 0赞

### 目录 ###

*   *   *   *  文本缩进
             *  换行
             *  隐藏内容
             *  水平对齐
             *  行内框盒子模型
             *  行高
             *  垂直居中
             *  图片空白节点问题
             *  图片垂直居中
             *  多行文本垂直居中

#### 文本缩进 ####

格式：`text-indent:value`

*  `px`，像素。
 *  `em`，`1 em=1`个设置的大小。

**注意：**

1.  如果要缩进只能应用到块级元素上。行内元素不行。
2.  文本缩进只会影响第一行，即使有多行也是如此。

#### 换行 ####

`white-space`，用来处理元素内文本是否允许换行。

*  normal，默认值。
    
    CJK（中日韩）文本遇到容器边界会自动换行，非CJK文本由`word-break`的值来决定。
 *  nowrap，对长行不进行换行。

`word-break`，用来标明怎么样进行单词的断句。

*  none，根据浏览器默认设置决定是否进行换行。
 *  break-all，换行会出现在任何字符之间。
 *  keep-all，用的不是特别多（了解一下）。禁止在字符之间进行换行。

1.  如果要换行：`word-break:break-all;`
2.  如果不换行：`white-space:nowrap;`

#### 隐藏内容 ####

格式：`overflow:value`

*  hidden，超出元素框的内容将会被隐藏。
 *  visible，超出元素框的内容是可见的。
 *  scroll，超出元素的内容将会以滚动条的方式显示出来。
 *  auto，浏览器自己决定，通常具有不确定性。

#### 水平对齐 ####

格式：`text-align:value`，水平对齐方式

*  left，默认值，文字放在左边。
 *  right，放在右边。
 *  center，放到中间。

**注意：**

1.  `text-align`可以用在块状元素、行内块状元素。
2.  `text-align`影响的内容是元素中的内容（行内元素和行内块状元素）

#### 行内框盒子模型 ####

所有内联元素的样式表现都与行内框盒子模型有关。

![在这里插入图片描述][20201225200623276.png]  
内联盒子不会让内容成块显示，而是排成一行。

*  内联盒子模型的类型：
    
     *  如果内容被行内标签包含那么属于内联盒子。
     *  如果是光秃秃的文字，则属于匿名内联盒子。
 *  内联盒子的组成

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]

*  内容区域：是一种围绕着文字看不见的一块区域，内容区域的大小和font-size的大小有关。
 *  行间距：行间距是该元素的内容区域和该元素的line-height的差。（`line-height-内容区域=行间距`）
 *  得到行间距之后除以2，就得到的半行间距（上半行间距、下半行间距）
 *  行框盒子（line box），每一行是一个行框盒子，每个行框盒子中包含的是一个一个的内联盒子。
    
    宽度不足时造成的换行都不属于一个行框盒子。
 *  包含盒子，该盒子由一行一行的行框盒子组成。

#### 行高 ####

是line-height撑开了高度。

格式：`line-height`，定义行高，定义两行文字基线之间的距离。(可以被继承)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]

*  基线（baseline），基线是小写英文字x的下边缘，基线是为了对齐用的。
    
    如果是图片基线是内容的底部。
 *  x-height，表示该字体中x的高度。
 *  中线：内容区域高度的1/2处的一条线。
    
    （实际上x的高度的1/2处也会有一条线，也叫中线但是和上面所说的中线不一样。）

value可用的值：

1.  normal，默认值，根据用户的浏览器走。
2.  px，像素值。
3.  number，将数值作为行高，根据当前元素的fonts-zize大小进行计算。
    
    比如文字大小是20像素，则实际行高（1.5）是：`20*1.5=30px;`

不设置块状元素的高度的情况下，其line-height改变会撑高盒子，其中的文字垂直居中于盒子。也就是该盒子的高度与行高相同。

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <style> div{ border:1px solid green; line-height: 100px; } </style>
    </head>
    
    <body>
        <div>1</div>
    
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 2]  
设置了块状元素的高度的情况下，其line-height改变只会将文字在垂直方向上面改变位置不会改变盒子的高度。

**如果我想让一个单行文本垂直居中与当前元素时，行高等于元素的高度即可**

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

`vertical-align:`通常用在**行内元素和行内块状**元素。(inline，inline-block)

*  baseline，默认值。基线对齐。
    
    图片的基线是图片的底部。
 *  bottom，将内联盒子的底边与行框的底边对齐。
 *  top，将内联盒子的顶边与行框的顶边对齐。
 *  middle，元素的垂直中心点（中线）和父元素的x-height的1/2处对齐。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <style> #m{ font-size:250px; border:1px solid green; } #m img{ vertical-align: middle; } </style>
        </head>
        <body>
            <div id="m">
                x
                <img src="./lipeiqian.jpg" style="width:50px;"/>
            </div>
        </body>
    </html>![image-20201224172246060](readme.assets/image-20201224172246060.png)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 3]  
**居中，要有多余的空间才能居中，所以行内元素单独无法居中。**

#### 图片空白节点问题 ####

问题分析：

1.  在HTML5文档声明中，内联元素所有的解析和渲染都如同每个行框盒子的前面有一个`空白的节点`，但是这个节点不占据任何宽度、无法通过脚本获得，所以我们也称它为`幽灵节点`，但是只在html5中并且使用了`<!DOCTYPE html>`声明的时候才会出现。
2.  根据上面所说的空白节点就是在图片前面有一个看不到的内容，有内容那默认的时候就是vertical-algin:baseline对齐。图片是行内块状元素其基线是图片的底部，所以才会导致图片下面有一段空白。

**注意：**

1.  图片在父元素中居中：
    
    1.  首先，先设置父元素的行高。
    2.  然后，img设置：vertical align: middle;
2.  如果父元素中有内容，可以用另外的标签先把内容包起来，再设置 font-size: 值，display: inline-block; line-height: normal;

*  解决办法1：让图片没有基线

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <style> #m{ border:1px solid green; } img{ display:block; } </style>
        </head>
        <body>
            <div id="m"><img src="./lipeiqian.jpg" /></div>
        </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 4]

*  解决办法2：底部对齐

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <style> #m{ border:1px solid green; } img{ vertical-align: bottom; } </style>
        </head>
        <body>
            <div id="m"><img src="./lipeiqian.jpg" /></div>
        </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 5]

*  解决办法3：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <style> #m{ font-size:0; border:1px solid green; } </style>
        </head>
        <body>
            <div id="m"><img src="./lipeiqian.jpg" /></div>
        </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 6]

#### 图片垂直居中 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <style> #m{ width:500px; height:500px; line-height:500px; border:1px solid green; font-size: 0; /*font-size: 0; 设置绝对居中*/ } img{ vertical-align: middle; } </style>
        </head>
        <body>
            <div id="m">x<img src="./lipeiqian.jpg" style="width:50px;"/></div>
        </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 7]  
上面的代码只是近似垂直居中，分析：

1.  图片本身有一条中心就是垂直中心点。
2.  vercial-align:middle中的图片的中心永远和x-height的1/2处对齐。
3.  由于字体设计时字体不会正好占据内容区域的1/2处，一般来说都会有些下沉。
4.  所以说当你的字体设置的越大，内容区域就会越大，字体的中线比内容区域的真正中线就会越靠下。

设置完全垂直居中：将父元素的字体大小设置为0（其中的内容区域的所有的乱七八糟的线都在同一条线上，这个时候只有上半行间距和下半行间距，正好平分。）

**注意：**

如果 line-height 你不需要继承，可以用 normal 恢复过来。

图片垂直例子：

#### 多行文本垂直居中 ####

1.  我将文字用span包起来了，并且设置为了display:inline-block;**设置了inline-block之后就有中线了。**
2.  我将**父元素的行高和父元素的高度**设置成一样。这个时候单行文本才会垂直居中。多行文本没有垂直居中。因为 line-height被继承下来了。
3.  我给子元素设置 line-heihgt:normal;
4.  去掉之后因为span是inline-block所以他的底边会和父元素的基线对齐。
5.  将span设置为vertical-align:middle;
6.  但是现在不是绝对的垂直居中，所以我需要将父元素的font-size设置为0，让所有的乱七八糟的线都在一行上面。
7.  因为继承的关系span中的font-size也设置为了0，所以我需要重新设置。

**例子代码**1：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> /* 绝对居中。 */ div { width: 600px; height: 600px; border: 1px solid red; line-height: 600px; font-size: 0; text-align: center; } span { width: 300px; font-size: 16px; border: 1px solid yellow; display: inline-block; line-height: normal; vertical-align: middle; } </style>
    </head>
    <body>
        <div>
            <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia voluptatibus eius commodi animi cumque amet. Aut totam molestiae praesentium optio hic. Incidunt hic, odit, earum assumenda nam praesentium iste adipisci consectetur in provident sint, facere saepe deleniti necessitatibus ullam. Itaque excepturi voluptatibus</span>
        </div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 8]  
**例子代码2：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> .container { width: 500px; height: 700px; border: 1px solid red; font-size: 0; line-height: 700px; /* text-align: center; */ } img { vertical-align: middle; } span { /* 我们的container字体继承为0了，所以这里要重新设置字体才能看到 */ font-size: 16px; display: inline-block; /* 因为继承了line-height的行高，放不下，字会跑到下面去。 */ line-height: normal; border: 1px solid red; /* 太宽了放不下，我们要设置宽度 */ width: 240px; /* 字是上去了，但是没有对齐，我们要设置vertical-align: middle; */ vertical-align: middle; } </style>
    
    </head>
    <body>
        <div class="container">
            <img src="./img/Frederik-the-Great5.jpg" alt="" width="200">
            <span>我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人我是中国人</span>
        </div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 9]

[20201225200623276.png]: /images/20221120/c7e9bda905254a3dbc68054758d57661.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70]: /images/20221120/09b120b4f9b747ba8959085837275466.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201225200744593.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201225200900933.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201225201013456.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201225201054247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201225201127681.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201225201156505.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201225201235579.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201225201354476.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201225201424544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzAyMTk4Mg==,size_16,color_FFFFFF,t_70