详解CSS——display各个属性值（带例子）

最新推荐文章于 2024-06-10 21:15:10 发布

xiao xu

最新推荐文章于 2024-06-10 21:15:10 发布

阅读量1w

点赞数 9

分类专栏：前端文章标签：详解CSS——display各个属性值（带例子）不是所有行内元素都不能设置宽高使用display:table的原因

本文链接：https://blog.csdn.net/weixin_42420703/article/details/82790979

版权

前端专栏收录该内容

44 篇文章 4 订阅

订阅专栏

display属性的支持情况

现在所有主流浏览器都支持该属性。
如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 “inline-table”、“run-in”、“table”、“table-caption”、“table-cell”、“table-column”、“table-column-group”、“table-row”、“table-row-group”、以及 “inherit”。

display属性的作用

display属性规定了元素以何种方式展示

display属性值

该属性不支持继承！ （其实想想也知道，如果支持继承的话，一个div框内的span框都是块级元素了，就违背了span的初衷了）

默认值 inline

此元素会被显示为内联元素，元素前后没有换行符。设置width,height,margin-top,margin- bottom,padding-top,padding-bottom无效；
内联元素不能设置宽高，但这也不是绝对的。
html标签中有部分标签，例如：<span/>、<a>、<em>、<img>、<input>、<label>等等都是内联元素，默认display属性均为inline，但是<img>、<input>标签的元素却可以设置宽高！因为它有内在尺寸，所以具有width和height，可以设定。

none

此元素不会被显示。
经常会考到，display:none与visibility: hidden有什么区别？

都是看不见元素，但是display:none意思是不展示这个元素，该元素不占据空间，
而visibility: hidden只是将该元素隐藏了，只是用户不可见而已，占据页面空间

block

此元素将显示为块级元素，此元素前后会带有换行符。
块状元素可以设置宽高。
html标签中有部分标签，例如：<div>、<p>、<ol>等等，其display属性默认为block

inline-block

行内块元素，结合了inline、block的特点，此元素前后没有换行符，可以设置宽高。

list-item

此元素会作为列表显示。
html标签中：<li> display属性默认为list-item
其它标签设置了这个属性后，就可以将其当做<ul>标签来使用了，可以设置其list-style。

run-in

此元素会根据上下文作为块级元素或内联元素显示。
这个属性从来没用过，还特地去了解了一下，看起来是个很厉害的属性，我还花了时间去测了一下，发现Chrome已经不支持该属性了，连chrome都不支持了，也木有必要深究了！

table

此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
可能有的人会纳闷，有现成的table标签不用，为什么要设置display:table呢？
display：table解决了一部分需要使用表格特性但又不需要表格语义的情况。比如以下两种情况：

父元素宽度固定，想让若干个子元素平分宽度
这里可以使用百分比来实现，但是百分比不一定能够整除，使用display:table就不用有这种烦恼了，如下：

<style>
		.par{
			border: 1px solid black; 
			display: table;
			width: 400px;
		}
		.son{
			display: table-cell;
			border: 1px solid black; 
		}
	</style>
<body>
<div class="par">
	<div class="son">son</div>
	<div class="son">son</div>
	<div class="son">son</div>
</div>
</body>

效果如下：
在这里插入图片描述

块级子元素垂直居中
方法有很多，网上一找一堆，display:table也可以实现，不过会有一些弊端，先来看例子吧：

<style>
		.par{
			display: table;
			width: 200px;
			height: 100px;
			text-align: center;
		}
		.son{
			display: table-cell;
			border: 1px solid black; 
			vertical-align: middle;
		}
	</style>
<body>
<div class="par">
	<div class="son">son</div>
</div>

效果如下：
在这里插入图片描述
我只给了son设置了边框，却显示在了和par一样宽高了，好像就是par的宽高一样。手动设置par的padding，son的宽高margin都没用，这就是display:table的弊端了：
（1）display: table时padding会失效
（2）display: table-row时margin、padding同时失效
（3）display: table-cell时margin会失效

inline-table

此元素会作为内联表格来显示（类似

），表格前后没有换行符。
inline-table一般很少用到（ie6、7不支持这个样式），表格属于block类型，独占一行，如果想要文字跟它一行显示，就要把表格设置成inline-table。
有一篇博客说：“safari及chrome垂直对齐方式为底部对齐，火狐和ie及Opera是顶部对齐”。可是我实际去测试的时候发现，IE、Opera、Chrome、Firefox对齐方式都是顶部对齐的，我们可以通过vertical-align去修改对齐方式。
举个例子：

<div>
		<span>span</span>
		<div style="display: inline-table;border:1px solid black;">
			<div>table son</div>
			<div>table son</div>
			<div>table son</div>
		</div>
	</div>