display属性用于元素性质的转换。属性作用none隐藏元素inline以行内元素展示宽高不能设置其宽高仅由内容撑起inline-block以行内块元素展示宽高可以自行设置block以块元素展示现在我们根据下面这组代码进行实验以便我们更好的理解。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 classcontainer !-- 普通块元素 -- div iddiv1盒子1/div div iddiv2盒子2/div div iddiv3盒子3/div div iddiv4盒子4/div !-- 普通行内元素 -- b盒子5/b b盒子6/b /div /body /htmldisplay: none;隐藏元素但不是删除例1没有设置display: none;结果如下图所示例2设置了display: none;!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 classcontainer !-- 普通块元素 -- div iddiv1盒子1/div div iddiv2盒子2/div div iddiv3盒子3/div div iddiv4盒子4/div !-- 普通行内元素 -- b盒子5/b b盒子6/b /div /body /html结果如下图所示display: inline;强行设置为普通行内元素宽高不能自行设置其宽高仅由内容撑起。例!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 classcontainer !-- 普通块元素 -- div iddiv1盒子1/div div iddiv2盒子2/div div iddiv3盒子3/div div iddiv4盒子4/div !-- 普通行内元素 -- b盒子5/b b盒子6/b /div /body /htmldisplay: inline-block;强行设置为行内块元素通过配置成inline-block宽高可以自行设置。它的作用是让元素既具有行内元素的特性与其他行内元素并排显示又具有块级元素的特性可以设置宽度、高度、内外边距等。例1与其他行内元素并排显示。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 classcontainer !-- 普通块元素 -- div iddiv1盒子1/div div iddiv2盒子2/div div iddiv3盒子3/div div iddiv4盒子4/div !-- 普通行内元素 -- b盒子5/b b盒子6/b /div /body /html例2可以设置宽度、高度、内外边距等。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 classcontainer !-- 普通块元素 -- div iddiv1盒子1/div div iddiv2盒子2/div div iddiv3盒子3/div div iddiv4盒子4/div !-- 普通行内元素 -- b盒子5/b b盒子6/b /div /body /htmldisplay: block;强行配置为块元素宽高可以设置。!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 classcontainer !-- 普通块元素 -- div iddiv1盒子1/div div iddiv2盒子2/div div iddiv3盒子3/div div iddiv4盒子4/div !-- 普通行内元素 -- b盒子5/b b盒子6/b /div /body /html
