【重识 HTML + CSS】元素类型、display、visibility、overflow

我就是我 2022-10-16 11:24 177阅读 0赞

### 元素类型 ###

*  元素类型
 *   *  块级、行内级元素
     *  替换、非替换元素
     *  元素的分类总结
 *  CSS 属性 - display
 *   *  inline-block
     *  练习 - 邮箱显示与选择
     *  练习 - 分页跳转栏
     *  display 的其他取值
 *  CSS属性 - visibility
 *  CSS属性 - overflow
 *  细节：元素之间的空格

> 博文集合：[【重识 HTML + CSS】知识点目录][HTML _ CSS]

# 元素类型 #

本章代码：[https://gitee.com/szluyu99/html\_css\_note/tree/master/day06/02-元素类型][https_gitee.com_szluyu99_html_css_note_tree_master_day06_02-]

## 块级、行内级元素 ##

根据元素的**显示类型**，HTML 元素可以主要分为：

*  **块级元素 (block-level elements)**  
    独占父元素一行  
    比如 div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr 等
 *  **行内级元素 (inline-level elements)**  
    多个行内级元素可以在父元素的同一行中显示  
    比如 a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、 video、audio 等

## 替换、非替换元素 ##

根据元素的**内容类型**，HTML元素可以主要分为：

*  **替换元素 (replaced elements)**  
    元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容  
    比如 img、input、iframe、video、embed、canvas、audio、object 等
 *  **非替换元素 (non-replaced elements)**  
    元素本身是有实际内容的，浏览器会直接将其内容显示出来  
    比如 div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr、a、strong、span、code、label 等

## 元素的分类总结 ##

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

> 判断对错：  
> 1、所有的非替换元素，都不能随意设置宽高？ **错**，块级非替换元素都是可以随意设置宽高的  
> 2、所有的行内级元素，都不能随意设置宽高？ **错**，行内级替换元素都是可以随意设置宽高的

**块级替换元素**：几乎没有这样的元素

**块级非替换元素**：div、p、h1~h6、table、form 等

*  独占父元素的一行
 *  可以随意设置宽高
 *  高度默认由内容决定

**行内级替换元素**：img、iframe、input 等

*  可以跟其他行内级元素在父元素的同一行显示
 *  可以随意设置宽高

**行内级非替换元素**：span、a、strong 等

*  可以跟其他行内级元素在父元素的同一行显示
 *  不可以随意设置宽高（设置宽高没有任何效果）
 *  宽高默认由内容决定

我的总结：**块级元素 或 替换元素 都可以设置宽高**

示例代码：[元素类型][Link 1]

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

注意点：

*  块级元素、inline-block 元素  
    一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block 元素）  
    特殊情况，p 元素不能包含其他块级元素
 *  行内级元素  
    一般情况下，只能包含行内级元素

# CSS 属性 - display #

CSS 中有个 `display` 属性，能修改元素的显示类型，有 4 个常用值：

*  **block**：让元素显示为**块级元素**
 *  **inline**：让元素显示为**行内级元素**
 *  **none**：隐藏元素
 *  **inline-block**：让元素同时具备行内级、块级元素的特征

## inline-block ##

可以让元素同时具备块级、行内级元素的特征

*  跟其他行内级元素在同一行显示
 *  可以随意设置宽高
 *  宽高默认由内容决定

> 可以理解为：
> 
>  *  对外来说，它是一个行内级元素
>  *  对内来说，它是一个块级元素

常见用途：

*  让行内级非替换元素（比如 a、span 等）能够随时设置宽高
 *  让块级元素（比如 div、p 等）能够跟其他元素在同一行显示

示例代码：[inline-block][]

## 练习 - 邮箱显示与选择 ##

![在这里插入图片描述][20210530020046155.png]  
代码：[display-练习][display-]

## 练习 - 分页跳转栏 ##

![在这里插入图片描述][20210530015842841.png]  
代码：[inline-block 练习][inline-block 1]

## display 的其他取值 ##

display 的以下取值，等同于某些 HTML 元素

*  table：`<table>`，一个 block-level 表格
 *  inline-table： `<table>`，一个 inline-level 表格
 *  table-row：`<tr>`
 *  table-row-group：`<tbody>`
 *  table-header-group：`<thead>`
 *  table-footer-group：`<tfoot>`
 *  table-cell：`<td>`、`<th>`，一个单元格
 *  table-caption：`<caption>`，表格的标题
 *  list-item：`<li>`

示例代码：[display补充][display]

# CSS属性 - visibility #

`visibility` 能控制元素的可见性，有 2 个常用值：

*  visible：显示元素
 *  hidden：隐藏元素

`visibility: hidden;` 和 `display: none;` 的区别：

*  `visibility: hidden;`  
    虽然元素看不见了，但元素的框依旧还留着，**还会占着原来的位置**
 *  `display: none;`  
    不仅元素看不见了，而且元素的框也会被移除，**不会占着任何位置**

示例代码：[visibility][]

# CSS属性 - overflow #

`overflow` 用于控制内容溢出时的行为：

*  visible：溢出的内容照样可见
 *  hidden：溢出的内容直接裁剪
 *  scroll：溢出的内容被裁剪，但可以通过滚动机制查看  
    会一直显示滚动条区域，滚动条区域占用的空间属于 width、height
 *  auto：自动根据内容是否溢出来决定是否提供滚动机制

> 还有 `overflow-x`、`overflow-y` 两个属性，可以分别设置水平垂直方向  
> 建议直接使用 overflow，因为目前 overflow-x、overflow-y 还没有成为标准，浏览器可能不支持

示例代码：[overflow][]

# 细节：元素之间的空格 #

行内级元素（包括 inline-block 元素）的代码之间如果有空格，会被解析显示为空格  
![在这里插入图片描述][20210530162751171.png]  
目前建议的解决方法：

1.  元素代码之间不要留空格
2.  注释掉空格  
    ![在这里插入图片描述][20210530162809891.png]
3.  设置父元素的 font-size 为 0，然后在元素中重新设置自己需要的 font-size  
    此方法在 Safari 不适用
4.  **给元素加 float**

示例代码：[元素之间的间距][Link 2]

[HTML _ CSS]: https://blog.csdn.net/weixin_43734095/article/details/117025820
[https_gitee.com_szluyu99_html_css_note_tree_master_day06_02-]: https://gitee.com/szluyu99/html_css_note/tree/master/day06/02-%E5%85%83%E7%B4%A0%E7%B1%BB%E5%9E%8B
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: /images/20221014/db4d62234176463b889c2c0fe8e37a7e.png
[Link 1]: https://gitee.com/szluyu99/html_css_note/blob/master/day06/02-%E5%85%83%E7%B4%A0%E7%B1%BB%E5%9E%8B/01-%E5%85%83%E7%B4%A0%E7%B1%BB%E5%9E%8B.html
[inline-block]: https://gitee.com/szluyu99/html_css_note/blob/master/day06/02-%E5%85%83%E7%B4%A0%E7%B1%BB%E5%9E%8B/05-inline-block.html
[20210530020046155.png]: /images/20221014/629c8212f4774c489b00c5e8bf4ab33e.png
[display-]: https://gitee.com/szluyu99/html_css_note/blob/master/day06/02-%E5%85%83%E7%B4%A0%E7%B1%BB%E5%9E%8B/04-display-%E7%BB%83%E4%B9%A0.html
[20210530015842841.png]: /images/20221014/1c42c412a4e749f1bd8fbd87125fe713.png
[inline-block 1]: https://gitee.com/szluyu99/html_css_note/blob/master/day06/02-%E5%85%83%E7%B4%A0%E7%B1%BB%E5%9E%8B/06-inline-block%E7%BB%83%E4%B9%A0.html
[display]: https://gitee.com/szluyu99/html_css_note/blob/master/day06/02-%E5%85%83%E7%B4%A0%E7%B1%BB%E5%9E%8B/11-display%E8%A1%A5%E5%85%85.html
[visibility]: https://gitee.com/szluyu99/html_css_note/blob/master/day06/02-%E5%85%83%E7%B4%A0%E7%B1%BB%E5%9E%8B/08-visibility.html
[overflow]: https://gitee.com/szluyu99/html_css_note/blob/master/day06/02-%E5%85%83%E7%B4%A0%E7%B1%BB%E5%9E%8B/09-overflow.html
[20210530162751171.png]: /images/20221014/e37d46dc190e46178331d9b5132bdd97.png
[20210530162809891.png]: /images/20221014/aca7e3896e60435e89809b1ec1382981.png
[Link 2]: https://gitee.com/szluyu99/html_css_note/blob/master/day06/02-%E5%85%83%E7%B4%A0%E7%B1%BB%E5%9E%8B/10-%E5%85%83%E7%B4%A0%E4%B9%8B%E9%97%B4%E7%9A%84%E9%97%B4%E8%B7%9D.html