css有两个重要的基本属性display和position，是前端开发必需掌握的。

最新推荐文章于 2023-12-04 15:25:34 发布

随性而作的码农

最新推荐文章于 2023-12-04 15:25:34 发布

阅读量568

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_71087234/article/details/130230318

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.了解和使用display属性。

二.了解和使用position属性

一.了解和使用display属性。

网页是由多个块元素和行元素构成的盒子排列而成的。如果希望行内元素具有块元素的某些特性，如可以设置宽高，或者需要块元素具有行元素的某些特性，如不独占一行排列，那么可以使用display属性对元素的类型进行转换。

元素的类型

值	描述
none	此元素不会被显示
block	此元素将显示为块元素，块元素默认的display属性值
inline	此元素会被显示为内联元素，内联元素默认的display属性值
inline-block	行内块元素，可以对其设置宽高和对齐等属性，但是此元素不会独占一行

1.none值

在使用某个块元素或者行内元素时，如果想要让该元素不显示，就可以是用display：none；这个代码来实现。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a{
				width: 100px;
				height: 100px;
				margin: 10px;
				background-color: chartreuse;
			}
			.b{
				width: 100px;
				height: 100px;
				margin: 10px;
				background-color: chartreuse;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b"></div>
		<div class="a"></div>
		<div class="b"></div>
	</body>
</html>

这是还没有使用display：none；的源代码，该代码中建立了四个块元素,分别命名为a、b，并且设置样式给块元素，其中给上背景色用于鲜明显示。

运行结果如下：

现在将a块元素设置为不显示，b块元素照常显示。（display：none;）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a{
				width: 100px;
				height: 100px;
				margin: 10px;
				background-color: chartreuse;
				display: none;
			}
			.b{
				width: 100px;
				height: 100px;
				margin: 10px;
				background-color: chartreuse;
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b"></div>
		<div class="a"></div>
		<div class="b"></div>
	</body>
</html>

结果如下：

由此可以看出，块元素在使用none属性值后不显示，同时其所占的宽和高也不显示。

2.block值

在行内元素中，如果想要将该元素设置为块元素，可以是用display：block;这个代码来进行强制转换。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				background-color: chartreuse;
			}
		</style>
	</head>
	<body>
		<span>行元素</span>/* 行标签 */
		<span>行元素</span>
		<span>行元素</span>
		<span>行元素</span>
	</body>
</html>

这是未使用block属性值的源代码，该代码中使用了四个行标签span（其他行标签亦可）。

运行结果如下：

由上面的运行结果可以看出四部分内容都在同一行中呈现，接下来给span的样式中加入block属性值再来看效果。（display：block;）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				background-color: chartreuse;
				display: block;
			}
		</style>
	</head>
	<body>
		<span>行元素</span>
		<span>行元素</span>
		<span>行元素</span>
		<span>行元素</span>
	</body>
</html>

运行结果如下：

由上面运行结果可以看出，四个行内元素变成了块元素，接下来可以对块元素进行添加宽高和间距来看看效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				width: 100px;
				height: 100px;
				margin: 10px;/* 间距 */
				background-color: chartreuse;
				display: block;
			}
		</style>
	</head>
	<body>
		<span>行元素</span>
		<span>行元素</span>
		<span>行元素</span>
		<span>行元素</span>
	</body>
</html>

运行结果如下：

由此可见，在将行内元素转化为块元素后，可以进行块元素的样式编写。

3.inline值

在某个元素中，如果想将该元素显示为内联元素，则可以使用inline属性值。（display：inline;）接下来我会用代码来给大家讲解。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				margin: 10px;
				background-color: chartreuse;
				/*display: inline;*/
			}
		</style>
	</head>
	<body>
		<div>嘿嘿嘿</div>
		<div>嘿嘿嘿</div>
		<div>嘿嘿嘿</div>
		<div>嘿嘿嘿</div>
	</body>
</html>

在以上代码中，我建立了四个div，并添加高宽、间距和背景样式。（并未使用inline属性值）

运行结果如下：

由运行结果可以看出有四个块元素，接下来给块元素添加上inline属性值看看效果。（display:inline;）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				margin: 10px;
				background-color: chartreuse;
				display: inline;
			}
		</style>
	</head>
	<body>
		<div>嘿嘿嘿</div>
		<div>嘿嘿嘿</div>
		<div>嘿嘿嘿</div>
		<div>嘿嘿嘿</div>
	</body>
</html>

运行结果如下：

由结果可以看出，在将块元素转化为内联元素后，块元素的高宽失去了作用，只能使用内联元素的样式。

4.inline-block值

行内块元素，就是将块元素呈行状态布局，并且可以对其设置块元素的样式，但是此元素不会独占一行，其边界就是该元素的边界。接下来我会用代码来给大家呈现inline-block的使用效果。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				margin: 10px;
				background-color: chartreuse;
				/*display: inline-block;*/
			}
		</style>
	</head>
	<body>
		<div>嘿嘿嘿</div>
		<div>嘿嘿嘿</div>
		<div>嘿嘿嘿</div>
		<div>嘿嘿嘿</div>
	</body>
</html>

运行效果如下：

以上代码建立了四个div，并且是块元素，呈纵向布局。（未使用inline-block值）

接下来样式中加上 inline-block ，让块元素转化为行内块元素来看看效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				margin: 10px;
				background-color: chartreuse;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div>嘿嘿嘿</div>
		<div>嘿嘿嘿</div>
		<div>嘿嘿嘿</div>
		<div>嘿嘿嘿</div>
	</body>
</html>

运行结果如下：

由此可见，与inline相同的是呈行布局，不同的是可以给该元素增加高宽属性，并且不会独占一整行。

display属性可以指定网页的布局。它涉及两个重要的布局：弹性布局flex和网格布局gird。

弹性布局flex我会在下一篇文章中进行案例讲解。

二.了解和使用position属性

在正式介绍position之前，先来回顾一下文档流。文档流指的是网页排版布局过程中，元素会自动的从上往下，从左到右的流式排列。

脱离文档流即元素打乱了这个排列，或者从排版中拿走。

要使一个元素脱离文档流有如下两种方式：

（1）使用浮动（float）：值为left、right均会使元素脱离文档流；

（2）使用定位（position）：值为absolute、fixed的元素脱离文档流；

position属性用来指定一个元素在网页上的位置，常用的有4种定位方式。

如下图所示：

值	描述
static	静态定位，这个是元素的默认定位方式
relative	相对定位，相对于其他原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

position属性规定元素的定位类型，最常用的是相对定位和绝对定位。

1.静态定位static属性值

static是position属性的默认值。如果省略position属性，浏览器就会认定该元素是static定位。

这时浏览器会按照源码的顺序，决定每个元素的位置，这称为正常的页面流。每个块元素占据自己的区块（block），元素与元素之间不会产生重叠，这个位置就是元素的默认位置，如下图所示：

注意：static定位所导致的元素位置是浏览器自主决定的，所以这时 top、bottom、left、right 这4个属性无效。

2.relative属性值

relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置，如下图所示：

relative相对定位

它必须搭配 top、bottom、left、right 这4个属性一起使用，用来指定偏移的方向和距离，如下图所示：

添加边偏移量后效果图

3.absolute属性值

absolute 表示，相对于上一级元素（一般是父元素）进行偏移，即定位基点是父元素，如下图所示：

它有一个重要的限制条件：定为基点（一般是父元素）不能是 static 定位，否则定位基点就会变成整个网页的根元素 html 。另外，absolute 定位也必须搭配 top、bottom、left、right 这几个属性一起使用。

HTML代码如下：

<div class="father">
    <div class="son"></div>
</div>

CSS代码如下：

<style type="text/css">
	.father{
		position:relative;
	}
	.son{
		position: absolute;
		top: 20px;
	}
</style>

上面代码中，父元素是 relative 定位，子元素是 absolute 定位，所以子元素的定位基点是父元素，相对于父元素的顶部向下偏移20px。如果父元素没有设置 relative 定位，上例子的子元素就是距离网页（ body 元素）的顶部向下偏移20px。

注意：absolute 定位的元素会被“正常页面流”忽略，即在“正常页面流”中，该元素所占的空间为0，周边元素不会受到影响。

4. fixed 属性值

fixed 表示，相对于浏览器窗口进行偏移，即定位基点是浏览器窗口。这导致元素不会随着页面的滚动而变化，好像固定在网页上一样。

它如果搭配 top、bottom、left、right 这4个属性值一起使用，表示元素的初始位置是基于浏览器窗口计算的，否则初始位置就是元素的默认位置。

示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrap{				/* 建立一个大的盒子，可视为浏览器窗口*/
				width: 5000px;
				height: 3000px;
				background-color: bisque;
			}
			.a{
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: fixed;	/* 视浏览器窗口为定位基点 */
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="a">嘿嘿嘿</div>
		</div>
	</body>
</html>

运行结果如下：