内容:
1.display介绍
2.display分类
3.块级标签和内联标签
4.inline-block应用
1.display介绍
display:display属性设置元素如何被显示
2.display分类
(1)display分类
- display: none; -- 让标签消失(隐藏元素并脱离文档流)
- display: inline; -- 内联元素(内联表签)
- display: block; -- 块级元素(块级标签)
- display: inline-block; -- 既有inline的属性也有block属性
(2)块级元素和内联元素
block元素:
- block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度
- block元素可以设置width和height属性。块级元素即使设置了宽度,仍然是独占一行
- block元素也可以设置margin和padding属性
inline元素:
- inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行
- inline元素的宽度是自身内容的宽度(默认有多少占多少)
- inline元素设置width和height属性无效
- inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
inline-block元素:
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)设置inline-block属性,使其既具有block的可设置宽度和高度特性又具有inline的同行特性
3.块级标签与内联标签(块级元素和内联元素)
(1)块级标签与内联标签实例
1 <!--__author__ = "wyb"--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>块级标签和内联标签</title> 7 <style> 8 div, p, span{ 9 100px; 10 height: 100px; 11 } 12 div{ 13 background: red; 14 } 15 p{ 16 background: #747F8C; 17 } 18 span{ 19 background: #41db50; 20 } 21 </style> 22 </head> 23 <body> 24 <div>div(块级标签) </div> 25 <p>p(块级标签)</p> 26 <span>span(内联标签)</span> 27 </body> 28 </html>
(2)块级标签和内联标签通过display转换
1 <!--__author__ = "wyb"--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>块级标签和内联标签通过display转换</title> 7 <style> 8 .inline{ 9 background: red; 10 display: inline; 11 } 12 .block{ 13 background: red; 14 display: block; 15 } 16 </style> 17 </head> 18 <body> 19 <!--将块级标签变成行内标签--> 20 <div class="inline">div</div> 21 <!--将行内标签变成块级标签--> 22 <span class="block">span</span> 23 </body> 24 </html>
4.inline-block应用
display:inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决:
1 #outer{ 2 border: 3px dashed; 3 word-spacing: -6px; 4 }