display属性：
用于元素性质的转换。
| 属性 | 作用 |
| none | 隐藏元素 |
inline | 以行内元素展示（宽高不能设置，其宽高仅由内容撑起） |
inline-block | 以行内块元素展示（宽高可以自行设置） |
block | 以块元素展示 |
现在我们根据下面这组代码进行实验，以便我们更好的理解。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的display属性：控制元素的性质</title> <style> #div1 { width: 200px; height: 80px; background-color: red; border: 2px black solid; /* 隐藏元素 */ display: none; } #div2 { width: 200px; height: 80px; background-color: blue; border: 2px black solid; } #div3 { width: 200px; height: 80px; background-color: green; border: 2px black solid; } #div4 { width: 200px; height: 80px; background-color: yellow; border: 2px black solid; } b { width: 200px; height: 80px; background-color: pink; border: 2px black solid; } </style> </head> <body> <div class="container"> <!-- 普通块元素 --> <div id="div1">盒子1</div> <div id="div2">盒子2</div> <div id="div3">盒子3</div> <div id="div4">盒子4</div> <!-- 普通行内元素 --> <b>盒子5</b> <b>盒子6</b> </div> </body> </html>display: none;
隐藏元素（但不是删除）
例1：没有设置display: none;
结果如下图所示：
例2：设置了display: none;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的display属性：控制元素的性质</title> <style> #div1 { width: 200px; height: 80px; background-color: red; border: 2px black solid; /* 隐藏元素 */ display: none; } #div2 { width: 200px; height: 80px; background-color: blue; border: 2px black solid; } #div3 { width: 200px; height: 80px; background-color: green; border: 2px black solid; } #div4 { width: 200px; height: 80px; background-color: yellow; border: 2px black solid; } b { width: 200px; height: 80px; background-color: pink; border: 2px black solid; } </style> </head> <body> <div class="container"> <!-- 普通块元素 --> <div id="div1">盒子1</div> <div id="div2">盒子2</div> <div id="div3">盒子3</div> <div id="div4">盒子4</div> <!-- 普通行内元素 --> <b>盒子5</b> <b>盒子6</b> </div> </body> </html>结果如下图所示：
display: inline;
强行设置为普通行内元素，宽高不能自行设置，其宽高仅由内容撑起。
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的display属性：控制元素的性质</title> <style> #div1 { width: 200px; height: 80px; background-color: red; border: 2px black solid; } #div2 { width: 200px; height: 80px; background-color: blue; border: 2px black solid; /* 行内元素，宽高不能设置，只能有默认的宽高 */ display: inline; } #div3 { width: 200px; height: 80px; background-color: green; border: 2px black solid; } #div4 { width: 200px; height: 80px; background-color: yellow; border: 2px black solid; } b { width: 200px; height: 80px; background-color: pink; border: 2px black solid; } </style> </head> <body> <div class="container"> <!-- 普通块元素 --> <div id="div1">盒子1</div> <div id="div2">盒子2</div> <div id="div3">盒子3</div> <div id="div4">盒子4</div> <!-- 普通行内元素 --> <b>盒子5</b> <b>盒子6</b> </div> </body> </html>display: inline-block;
强行设置为行内块元素，通过配置成inline-block，宽高可以自行设置。
它的作用是让元素既具有行内元素的特性（与其他行内元素并排显示），又具有块级元素的特性（可以设置宽度、高度、内外边距等）。
例1：与其他行内元素并排显示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的display属性：控制元素的性质</title> <style> #div1 { width: 200px; height: 80px; background-color: red; border: 2px black solid; } #div2 { width: 200px; height: 80px; background-color: blue; border: 2px black solid; /* 行内元素，宽高不能设置，只能有默认的宽高 */ display: inline; } #div3 { width: 200px; height: 80px; background-color: green; border: 2px black solid; /* 强行设置为行内块元素，通过配置成inline-block，宽高可以自行设置 */ display: inline-block; } #div4 { width: 200px; height: 80px; background-color: yellow; border: 2px black solid; } b { width: 200px; height: 80px; background-color: pink; border: 2px black solid; } </style> </head> <body> <div class="container"> <!-- 普通块元素 --> <div id="div1">盒子1</div> <div id="div2">盒子2</div> <div id="div3">盒子3</div> <div id="div4">盒子4</div> <!-- 普通行内元素 --> <b>盒子5</b> <b>盒子6</b> </div> </body> </html>例2：可以设置宽度、高度、内外边距等。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的display属性：控制元素的性质</title> <style> #div1 { width: 200px; height: 80px; background-color: red; border: 2px black solid; } #div2 { width: 200px; height: 80px; background-color: blue; border: 2px black solid; } #div3 { width: 200px; height: 80px; background-color: green; border: 2px black solid; } #div4 { width: 200px; height: 80px; background-color: yellow; border: 2px black solid; } b { width: 200px; height: 80px; background-color: pink; border: 2px black solid; /* 强行设置为行内块元素，通过配置成inline-block,宽高可以自行设置 */ display: inline-block; } </style> </head> <body> <div class="container"> <!-- 普通块元素 --> <div id="div1">盒子1</div> <div id="div2">盒子2</div> <div id="div3">盒子3</div> <div id="div4">盒子4</div> <!-- 普通行内元素 --> <b>盒子5</b> <b>盒子6</b> </div> </body> </html>display: block;
强行配置为块元素，宽高可以设置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的display属性：控制元素的性质</title> <style> #div1 { width: 200px; height: 80px; background-color: red; border: 2px black solid; } #div2 { width: 200px; height: 80px; background-color: blue; border: 2px black solid; } #div3 { width: 200px; height: 80px; background-color: green; border: 2px black solid; } #div4 { width: 200px; height: 80px; background-color: yellow; border: 2px black solid; } b { width: 200px; height: 80px; background-color: pink; border: 2px black solid; /* 强行配置为块元素，宽高可以设置 */ display: block; } </style> </head> <body> <div class="container"> <!-- 普通块元素 --> <div id="div1">盒子1</div> <div id="div2">盒子2</div> <div id="div3">盒子3</div> <div id="div4">盒子4</div> <!-- 普通行内元素 --> <b>盒子5</b> <b>盒子6</b> </div> </body> </html>
