元素类型
元素类型块级、行内级元素替换、非替换元素元素的分类总结CSS 属性 - displayinline-block练习 - 邮箱显示与选择练习 - 分页跳转栏display 的其他取值CSS属性 - visibilityCSS属性 - overflow细节：元素之间的空格博文集合：【重识 HTML + CSS】知识点目录
元素类型
本章代码：/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 等
元素的分类总结
判断对错：
1、所有的非替换元素，都不能随意设置宽高？错，块级非替换元素都是可以随意设置宽高的
2、所有的行内级元素，都不能随意设置宽高？错，行内级替换元素都是可以随意设置宽高的
块级替换元素：几乎没有这样的元素
块级非替换元素：div、p、h1~h6、table、form 等
独占父元素的一行可以随意设置宽高高度默认由内容决定
行内级替换元素：img、iframe、input 等
可以跟其他行内级元素在父元素的同一行显示可以随意设置宽高
行内级非替换元素：span、a、strong 等
可以跟其他行内级元素在父元素的同一行显示不可以随意设置宽高（设置宽高没有任何效果）宽高默认由内容决定
我的总结：块级元素 或 替换元素 都可以设置宽高
示例代码：元素类型
注意点：
块级元素、inline-block 元素
一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block 元素）
特殊情况，p 元素不能包含其他块级元素行内级元素
一般情况下，只能包含行内级元素
CSS 属性 - display
CSS 中有个display属性，能修改元素的显示类型，有 4 个常用值：
block：让元素显示为块级元素inline：让元素显示为行内级元素none：隐藏元素inline-block：让元素同时具备行内级、块级元素的特征
inline-block
可以让元素同时具备块级、行内级元素的特征
跟其他行内级元素在同一行显示可以随意设置宽高宽高默认由内容决定
可以理解为：
对外来说，它是一个行内级元素对内来说，它是一个块级元素
常见用途：
让行内级非替换元素（比如 a、span 等）能够随时设置宽高让块级元素（比如 div、p 等）能够跟其他元素在同一行显示
示例代码：inline-block
练习 - 邮箱显示与选择
代码：display-练习
练习 - 分页跳转栏
代码：inline-block 练习
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补充
CSS属性 - visibility
visibility能控制元素的可见性，有 2 个常用值：
visible：显示元素hidden：隐藏元素
visibility: hidden;和display: none;的区别：
visibility: hidden;
虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置display: none;
不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置
示例代码：visibility
CSS属性 - overflow
overflow用于控制内容溢出时的行为：
visible：溢出的内容照样可见hidden：溢出的内容直接裁剪scroll：溢出的内容被裁剪，但可以通过滚动机制查看
会一直显示滚动条区域，滚动条区域占用的空间属于 width、heightauto：自动根据内容是否溢出来决定是否提供滚动机制
还有
overflow-x、overflow-y两个属性，可以分别设置水平垂直方向建议直接使用 overflow，因为目前 overflow-x、overflow-y 还没有成为标准，浏览器可能不支持
示例代码：overflow
细节：元素之间的空格
行内级元素（包括 inline-block 元素）的代码之间如果有空格，会被解析显示为空格
目前建议的解决方法：
元素代码之间不要留空格注释掉空格
设置父元素的 font-size 为 0，然后在元素中重新设置自己需要的 font-size
此方法在 Safari 不适用给元素加 float
示例代码：元素之间的间距
