display属性，及其区别

pitaojin

发布于 2018-05-25 16:50:00

1.3K0

发布于 2018-05-25 16:50:00

标签（空格分隔）：未分类

所有属性

MDN中所有display的值
/* <display-outside> values */
display: block;
display: inline;
display: run-in;

/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;

主要的几个属性inline,block,inline-block,none.

inline: 多个内联元素占同一行，直到放不下才换行。 block: 单独占一行 inline-block: 像inline一样放置(比如和它相邻的元素处在同一行)，像block一样表现。 none: 隐藏该区域，不占实际空间。但却真实存在，可以通过js获取被隐藏的元素

区别

设置了inline的元素不能设置宽高，有自身内容决定大小，margin值只有margin-left和margin-right值，设置margin-top和margin-bottom无效，对padding值也一样

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
		div{
			width: 300px;  /*无效*/
			height: 300px;  /*无效*/
			background-color: #CA6666;  /*因没有内容填充所以没有显示出背景颜色*/
			display: inline;
			margin-top: 100px;   /*无效*/
			margin-bottom: 100px;  /*无效*/
			margin-left: 100px;
			margin-right: 100px;
			border: 1px solid #CB5757;  /*因没有内容填充所以只显示出1px的边框*/
		}
	</style>
</head>
<body>
	<span>sfaegaergeargerar</span>
	<div></div>
</body>
</html>

设置了inline-block的元素虽然会有内联元素的效果，但是却可以设置宽高margin，padding值等

其他

display：block的元素和块级元素并不是一个概念。例如，< li>元素默认的display值是list-item，< table>元素默认的display值是table，但是它们均是“块级元素”，因为它们都符合块级元素的基本特征，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示

display：inline-block的元素为什么可以设置宽高？其实可以把每个元素理解为两个盒子，一个外在盒子，一个内在盒子。外在盒子负责元素可以一行显示，还是只能换行显示。内在盒子负责内容和宽高。于是，值为block的元素实际由外在的“块级盒子”和内在的“块级盒子”组成，值为inline-block的元素则由外在的“内联盒子”和内在的“块级盒子”组成，值为inline的元素则内外均是“内联盒子”

参考链接： display知识点总结 display属性值block，inline和inline-block概念和区别

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度