根据元素的显示（能不能在同一行显示）类型，HTML元素可以主要分为2大类：块级元素和行内元素
一.块级元素和行内级元素
1.1.块级元素
块级元素（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等
1.2.行内元素
行内级元素（inline-level elements）:
- 多个行内级元素可以在父元素的同一行中显示
- 比如a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、 video、audio等
二.替换元素和非替还元素
根据元素的内容==（是否浏览器会替换掉元素）==类型，HTML元素可以主要分为2大类
2.1 替还元素
- 元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容
- 比如img、input、iframe、video、embed、canvas、audio、object等
2.2 非替还元素
- 和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容
- 比如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等
三.元素分类的总结
| 元素分类 | 具体元素 | 默认特征 | |
|---|---|---|---|
| 块级元素 （block-level elements） | 替换元素 （replaced elements） | ||
| 非替换元素 （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等 | • 独占父元素的一行 •可以随意设置宽高 •高度默认由内容决定 | |
| 行内级元素 （inline-level elements） | 替换元素 （replaced elements） | img、input、iframe、video、embed、canvas、audio、object等 | •跟其他行内级元素在同一行显示 •可以随意设置宽高 |
| 非替换元素 （non-replaced elements） | a、strong、span、code、label等 | •跟其他行内级元素在同一行显示 •不可以随意设置宽高 •宽高由内容决定 |
四.块级元素与块元素和行内级元素与行内元素
4.1 块级元素与块元素
块级元素：元素会新起一行，并独占一行，如div、p、form等。display 属性值为：block, list-item, table, flex, grid 时，都可以将一个元素设置成块级元素。同时块级元素可以定义元素的宽度和高度。
块元素：块元素是display属性值为block的元素。因而二者是包含关系。
4.2 行内级元素与行内元素
行内级元素：行内级不会以新行开始，在一行文档流中排列，如果超过容器宽度，则折行显示。display 属性值为：inline, inline-table, inline-block, inline-flex, inline-grid 值都可以将一个元素设置成行内级元素。
行内元素：行内元素是display属性值为inline的元素。
行内块元素：display属性值为inline-table, inline-block, inline-flex, inline-grid的元素
4.3 行内级元素分类：
4.3.1 行内级置换元素
一个元素不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此元素内容的渲染，且元素本身一般拥有固有尺寸(宽度，高度，宽高比)的元素，被称之为置换元素，如img、表单元素（包括input、select、textarea、select等）
行内级置换元素宽度的定义：
- 若宽高的计算值为auto且元素有固有宽度，则width为固有宽度；
- 若宽度的计算值为auto且元素有固有宽度，则width为固有宽度；
- 若宽度的计算值为auto且高度有具体的计算值，同时知道高宽比，则可以计算出width=高度/高宽比；
- 除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px。
行内级置换元素高度的定义：
- 若宽高的计算值为auto且元素有固有高度，则height为固有高度；
- 若高度的计算值为auto且元素有固有高度，则height为固有高度；
- 若高度的计算值为auto且宽度有具体的计算值，同时知道高宽比，则可以计算出height=宽度*高宽比；
- 除此之外，当 height的计算值为 auto 时，使用值不能大于150px，且宽度不能大于长方形高度的2倍。
4.3.2 行内级非置换元素
无法给元素定义宽度和高度的行内级元素，除了行内级置换元素外剩余的元素都是行内级非置换元素。
五.display属性
==在浏览器中本来是全部是行内级元素，只是浏览器默认给div,p,h1添加了display:block属性,将行内级元素变成了块级元素==
CSS中有个display属性，能修改元素的显示类型，有4个常用值:==block,inline,none,inline-block==
5.1 block属性
display:block
此元素将显示为块级元素，此元素前后会带有换行符。
特点：独自占用一行，可以通过CSS改变宽高
常用的块级元素：div，p，ul，li，ol，form，address
5.2 inline属性
display:inline
此元素会被显示为内联元素，元素前后没有换行符。
特点：内容决定大小，不可以通过CSS改变宽高
常用的行级元素：span，strong，em，a，del
5.3 inline-block属性
display:inline-block
行内块元素，既有块级属性又有行级属性。
5.4 none
隐藏元素
display:none
六.visibility属性
6.1 visibility属性
visibility，能控制元素的可见性，有2个常用值：==visible和hidden==
6.2 ==visibility: hidden; 和 display: none; 的区别==
- visibility: hidden;
- 虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
- display: none;
- 不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置
<!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>visibility属性</title>
</head>
<style>
/*
一.visibility的属性
1.1 默认值：visible.显示元素
1.2 hidden，隐藏元素，虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
二.visibility和display的区别
2.1 visibility:hidden是隐藏，但是还在占位置
2.2 display:none为不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置
*/
.content div {
height: 100px;
}
.content div:first-child {
background-color: pink;
visibility: hidden;
}
.content div:nth-child(2) {
background-color: red;
display: none
}
.content div:last-child {
background-color: black;
}
</style>
<body>
<div class="content">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
七.overflow属性
==overflow用于控制内容溢出时的行为==
- visible：溢出的内容照样可见
- hidden：溢出的内容直接裁剪
- scroll：溢出的内容被裁剪，但可以通过滚动机制查看
- 会一直显示滚动条区域，滚动条区域占用的空间属于width、height
- auto：自动根据内容是否溢出来决定是否提供滚动机制
还有overflow-x、overflow-y两个属性，可以分别设置水平垂直方向（建议还是直接使用overflow，因为目前overflow-x、overflow-y还没有成为标准，浏览器可能不支持
<style>
/*
一.overflow属性
1.visible：默认值，可见
2.hidden:隐藏
3.scroll：有滚动条
4.auto：自动根据内容是否溢出来决定是否提供滚动机制
二.overflow-x和overflow-y
*/
.content {
width: 1200px;
height: 600px;
background-color: #f00;
overflow: auto
}
</style>
<body>
<div class="content">
<img src="../img/4.jpg" alt="">
</div>
</body>
