CSS display属性的值及作用

1、none：元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden，是保留元素的空间的。

2、inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline，设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。

3、block：将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。

4、inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。

看例子

 1 .inline{
 2     display:inline; 
 3     width:100px; 
 4     height:100px; 
 5     padding:10px; 
 6     background-color:red;
 7 }
 8 .block{
 9     display:block; 
10     width:100px; 
11     height:100px; 
12     padding:10px;
13     background-color:green;
14 }
15 .inline-block{
16     display:inline-block; 
17     width:100px;
18     height:100px; 
19     padding:10px;
20     background-color:blue;
21 }
22 
23 
24 <div class="wrap">
25     <div class="inline">
26     inline
27     </div>inline
28     <div class="block">
29     block
30     </div> block
31     <div class="inline-block">
32     inline-block
33     </div>inline-block
34 </div>

这里提及下内联元素和块级元素的一些特点：

内联元素：

和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。

块级元素：

   每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）；
   元素的高度、宽度、行高以及顶和底边距都可设置。
   元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form

内联块状元素：

和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置。

常用的内联块状元素有：
<img>、<input>

其他display的属性值不是很常用，其具体的含义如下：

list-item：     此元素会作为列表显示。
run-in：     此元素会根据上下文作为块级元素或内联元素显示。
table：     此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table：     此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group：     此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group：     此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group：     此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row：     此元素会作为一个表格行显示（类似 <tr>）。
table-column-group：     此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column：     此元素会作为一个单元格列显示（类似 <col>）
table-cell：     此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption：     此元素会作为一个表格标题显示（类似 <caption>）
inherit：     规定应该从父元素继承 display 属性的值。

另外有两个已经废除的属性值：
compact    CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker    CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

转载于:https://www.cnblogs.com/hzp-blog/p/6473047.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/429596.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！