由浅入深css（三）------ 彻底理解display

最新推荐文章于 2022-11-17 09:55:06 发布

司马驷马难追

最新推荐文章于 2022-11-17 09:55:06 发布

阅读量466

点赞数 1

分类专栏：前端文章标签： css html javascript css3 html5

本文链接：https://blog.youkuaiyun.com/OY_YO00/article/details/115715840

版权

前端专栏收录该内容

6 篇文章

订阅专栏

CSS篇之基础篇（三）

前言
彻底理解display属性
结语

前言

本篇文章将介绍css属性下的display属性，主要讲解弹性盒子相关知识及应用。

彻底理解display属性

常用属性

常用属性
none	隐藏目标，不占文档流位置，与visible:hidden相反。若作用于未脱离文档流的元素，会引起回流/重排。
block	展示为块状元素。独占一行，可设置宽高、margin、padding。上下margin会与其它元素发生合并。
inline	展示为内元素。宽高只能由内容撑开，皆为auto，设置宽高无效。可设置padding，margin，但上、下margin无效，上下padding若有背景颜色，可展示背景颜色，但不占空间。
inline-block	展示为行内块元素。可设置宽高、margin、padding。上下margin不会与其它元素发生合并。
list-item	展示为列表元素。与block元素基本一致，但具有列表元素特点。
table	展示为表格元素。与block元素基本一致，但具有表格元素特点。
flex	展示为弹性盒子。与block元素基本一致，但具有弹性盒子元素特点。

基本表现

我们先建一个html文件，如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test</title>
	<style type="text/css" rel="stylesheet">
		div,span{
			background-color: #87CEEB;
		}
		div:nth-child(2n){
			background-color: #58f16a;
		}
		.none{
			display: none;
		}
		.block{
			display: block;
		}
		.inline{
			display: inline;
		}
		.inline-block{
			display: inline-block;
		}
		.list-item{
			display: list-item;
		}
		.table{
			display: table;
		}
		.flex{
			display: flex;
		}
	</style>
</head>
<body>
	<div class="none">none</div>
	<span class="block">block</span>
	<div class="inline">inline</div>
	<div class="inline-block">inline-block</div>
	<div class="list-item">list-item</div>
	<div class="table">table</div>
	<div class="flex">flex</div>
</body>
</html>

浏览器渲染结果：
在这里插入图片描述

详解

display:none;

隐藏目标，不占文档流位置，与visible:hidden相反。若作用于未脱离文档流的元素，会引起回流/重排。

display:block;

展示为块状元素。独占一行，可设置宽高、margin、padding。上下margin会与其它元素发生合并。

给定样式：

.block {
	display: block;
	padding: 10px;
	margin: 10px;
}

表现：

在这里插入图片描述

display:inline;

展示为内元素。宽高只能由内容撑开，皆为auto，设置宽高无效。可设置padding，margin，但上、下margin无效，上下padding若有背景颜色，可展示背景颜色，但不占空间。

给定样式：

.block {
	display: block;
	padding: 10px;
	margin: 0 10px;
}

.inline {
	background-color: red;
	display: inline;
	margin: 60px;
	padding: 20px 10px;
}

表现：

在这里插入图片描述

display:inline-block;

展示为行内块元素。可设置宽高、margin、padding。上下margin不会与其它元素发生合并。

给定样式：

.block {
	display: block;
	padding: 10px;
	margin: 0 10px;
}

.inline-block {
	display: inline-block;
	margin: 30px;
	padding: 10px;
}

表现：

在这里插入图片描述

display:list-item;

展示为列表元素。与block元素基本一致，但具有列表元素特点。

给定样式：

.list-item {
	display: list-item;
	margin: 30px;
	padding: 10px;
	/* list-style: none; */
}

表现：
在这里插入图片描述

display:table;

展示为表格元素。与block元素基本一致，但具有表格元素特点。

给定样式：

.table {
	display: table;
	margin: 30px;
	padding: 10px;
}

表现：
在这里插入图片描述

table属性常用于代替table元素，所以会配合以具有table-cell 、table-row 、table-column等属性的子元素来代替td，tr和col等元素。设置table属性虽然具有与block相似的属性，但是独占一行的表现，与block元素有差别，相当于在闭标签后加一个换行符。与之相对的，若设置为inline-table，则不会独占一行。