display属性详解

内容：

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             width: 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 }

 

posted @ 2018-08-10 15:34  woz333333  阅读(17871)  评论(0)    收藏  举报