根據(jù)元素的顯示（能不能在同一行顯示）類型，HTML元素可以主要分為2大類：塊級元素和行內(nèi)元素
一.塊級元素和行內(nèi)級元素
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.行內(nèi)元素
行內(nèi)級元素（inline-level elements）:
- 多個行內(nèi)級元素可以在父元素的同一行中顯示
- 比如a由捎、img兔综、span、strong狞玛、code软驰、iframe、label心肪、input锭亏、button、canvas硬鞍、embed慧瘤、object戴已、 video、audio等
二.替換元素和非替還元素
根據(jù)元素的內(nèi)容==（是否瀏覽器會替換掉元素）==類型锅减，HTML元素可以主要分為2大類
2.1 替還元素
- 元素本身沒有實際內(nèi)容糖儡，瀏覽器根據(jù)元素的類型和屬性，來決定元素的具體顯示內(nèi)容
- 比如img怔匣、input握联、iframe、video每瞒、embed金闽、canvas、audio剿骨、object等
2.2 非替還元素
- 和替換元素相反代芜，元素本身是有實際內(nèi)容的，瀏覽器會直接將其內(nèi)容顯示出來懦砂，而不需要根據(jù)元素類型和屬性來判斷到底顯示什么內(nèi)容
- 比如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等
三.元素分類的總結(jié)
| 元素分類 | 具體元素 | 默認特征 | |
|---|---|---|---|
| 塊級元素 （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等 | ? 獨占父元素的一行 ?可以隨意設(shè)置寬高 ?高度默認由內(nèi)容決定 | |
| 行內(nèi)級元素 （inline-level elements） | 替換元素 （replaced elements） | img础浮、input帆调、iframe、video豆同、embed番刊、canvas、audio影锈、object等 | ?跟其他行內(nèi)級元素在同一行顯示 ?可以隨意設(shè)置寬高 |
| 非替換元素 （non-replaced elements） | a芹务、strong、span精居、code锄禽、label等 | ?跟其他行內(nèi)級元素在同一行顯示 ?不可以隨意設(shè)置寬高 ?寬高由內(nèi)容決定 |
四.塊級元素與塊元素和行內(nèi)級元素與行內(nèi)元素
4.1 塊級元素與塊元素
塊級元素：元素會新起一行，并獨占一行靴姿，如div沃但、p、form等佛吓。display 屬性值為：block, list-item, table, flex, grid 時宵晚，都可以將一個元素設(shè)置成塊級元素垂攘。同時塊級元素可以定義元素的寬度和高度。
塊元素：塊元素是display屬性值為block的元素淤刃。因而二者是包含關(guān)系晒他。
4.2 行內(nèi)級元素與行內(nèi)元素
行內(nèi)級元素：行內(nèi)級不會以新行開始，在一行文檔流中排列逸贾，如果超過容器寬度陨仅，則折行顯示。display 屬性值為：inline, inline-table, inline-block, inline-flex, inline-grid 值都可以將一個元素設(shè)置成行內(nèi)級元素铝侵。
行內(nèi)元素：行內(nèi)元素是display屬性值為inline的元素灼伤。
行內(nèi)塊元素：display屬性值為inline-table, inline-block, inline-flex, inline-grid的元素
4.3 行內(nèi)級元素分類：
4.3.1 行內(nèi)級置換元素
一個元素不受CSS視覺格式化模型控制，CSS渲染模型并不考慮對此元素內(nèi)容的渲染咪鲜，且元素本身一般擁有固有尺寸(寬度狐赡，高度，寬高比)的元素疟丙，被稱之為置換元素颖侄，如img、表單元素（包括input享郊、select览祖、textarea、select等）
行內(nèi)級置換元素寬度的定義：
- 若寬高的計算值為auto且元素有固有寬度拂蝎，則width為固有寬度穴墅；
- 若寬度的計算值為auto且元素有固有寬度惶室，則width為固有寬度温自；
- 若寬度的計算值為auto且高度有具體的計算值，同時知道高寬比皇钞，則可以計算出width=高度/高寬比悼泌；
- 除此之外，當 width 的計算值為 auto 時夹界，則寬度的使用值為 300px馆里。
行內(nèi)級置換元素高度的定義：
- 若寬高的計算值為auto且元素有固有高度，則height為固有高度可柿；
- 若高度的計算值為auto且元素有固有高度鸠踪，則height為固有高度；
- 若高度的計算值為auto且寬度有具體的計算值复斥，同時知道高寬比营密，則可以計算出height=寬度*高寬比；
- 除此之外目锭，當 height的計算值為 auto 時评汰，使用值不能大于150px纷捞，且寬度不能大于長方形高度的2倍。
4.3.2 行內(nèi)級非置換元素
無法給元素定義寬度和高度的行內(nèi)級元素被去，除了行內(nèi)級置換元素外剩余的元素都是行內(nèi)級非置換元素主儡。
五.display屬性
==在瀏覽器中本來是全部是行內(nèi)級元素，只是瀏覽器默認給div,p,h1添加了display:block屬性,將行內(nèi)級元素變成了塊級元素==
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
此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符少漆。
特點：內(nèi)容決定大小臼膏，不可以通過CSS改變寬高
常用的行級元素：span，strong示损，em渗磅，a，del
5.3 inline-block屬性
display:inline-block
行內(nèi)塊元素检访，既有塊級屬性又有行級屬性始鱼。
5.4 none
隱藏元素
display:none
六.visibility屬性
6.1 visibility屬性
visibility，能控制元素的可見性脆贵，有2個常用值：==visible和hidden==
6.2 ==visibility: hidden; 和 display: none; 的區(qū)別==
- 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的區(qū)別
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用于控制內(nèi)容溢出時的行為==
- visible：溢出的內(nèi)容照樣可見
- hidden：溢出的內(nèi)容直接裁剪
- scroll：溢出的內(nèi)容被裁剪村斟，但可以通過滾動機制查看
- 會一直顯示滾動條區(qū)域贫导，滾動條區(qū)域占用的空間屬于width抛猫、height
- auto：自動根據(jù)內(nèi)容是否溢出來決定是否提供滾動機制
還有overflow-x、overflow-y兩個屬性孩灯，可以分別設(shè)置水平垂直方向（建議還是直接使用overflow闺金，因為目前overflow-x、overflow-y還沒有成為標準峰档，瀏覽器可能不支持
<style>
/*
一.overflow屬性
1.visible：默認值败匹，可見
2.hidden:隱藏
3.scroll：有滾動條
4.auto：自動根據(jù)內(nèi)容是否溢出來決定是否提供滾動機制
二.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>
