希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

【技术等级】初级

【承接文章】《CSS这样处理HTML列表，三个简单的CSS属性，美化你的页面》

本文小海老师为大家详细讲解有关CSS定位方面的知识。相信许多有经验的朋友一定会经常在布局时遇到与定位有关的问题，今天咱们就共同来看一看CSS定位都具有哪些属性以及它们的用法。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。

定位属性是指对HTML中的元素进行位置确定的一系列方式。CSS总共提供了以下四种定位方式：

• 流式定位

• 绝对定位

• 相对定位

• 固定定位

与定位相关的CSS属性包括以下11个：

• width

• height

• display

• position

• top

• right

• bottom

• left

• z-index

• visibility

• overflow

一、利用position属性设置定位方式：

CSS技术使用 position 属性设置HTML元素的定位方式

CSS技术使用position设置HTML元素的定位方式。

首先，我们先来了解一下这四种定位方式的特点：

• 流式定位：HTML元素默认采用该种定位方式。这是指所有的HTML元素从上到下、从左向右按照代码的书写顺序依次出现。

• 绝对定位：所有的HTML元素的位置都是相对于页面左上角来实现定位的。

• 相对定位：所有的HTML元素的位置都是相对于上一个元素来实现定位的。

• 固定定位：HTML元素相对于页面指定位置固定不变，不受垂直滚动条的影响。同时，HTML元素在固定定位的前提下，其元素位置是相对于页面左上角。

我们一般将上述四种定位方式归纳为两种：“流式定位”和“非流式定位”。

具体的HTML元素采用哪种定位方式，是通过position属性来实现的，该属性有以下四种取值。

• static，默认值，HTML元素采用“流式定位”。

• absolute，HTML元素采用“绝对定位”。

• relative，HTML元素采用“相对定位”。

• fixed，HTML元素采用“固定定位”。

二、HTML元素的位置属性：

CSS技术使用四个属性设置HTML非流式定位元素的位置

当HTML元素采用“非流式定位”时，可以使用以下四个位置属性来设置该元素具体的位置。

• left，设置元素左侧的位置。

• right，设置元素右侧的位置。

• top，设置元素顶部的位置。

• bottom，设置元素底部的位置。

注意：这四个属性必须使用在“非流式定位”下，“流式定位”是不能使用的。

这四个属性的取值都可以是带有单位的数值。

三、HTML块级元素的尺寸属性：

CSS技术使用两个属性设置块级元素的尺寸

当HTML元素为“块级元素”时，可以使用以下两个尺寸属性来设置该块级元素的宽度和高度。

• width，设置块级元素的宽度。

• height，设置块级元素的高度。

注意：这两个属性必须使用在“块级元素”之上，“内联元素”是不能使用的。

这两个属性包括以下几种取值：

• auto，自动，块级元素的宽度和高度随元素内部的内容多少而自动变化。

• 带有单位的数值，指定块级元素的宽度和高度为明确的数值。

• 百分比，指定块级元素的宽度和高度为父元素的百分比。

四、设置HTML元素的显示特性：

CSS技术利用 display 属性来设置CSS元素的显示特性

CSS技术利用display属性来设置CSS元素的显示特性。

该属性有多种取值：

• none，将HTML元素隐藏。

• block，将HTML元素中的内联元素或其他元素转换为块级元素。

• inline，将HTML元素中的块级元素或其他元素转换为内联元素。

• inline-block，将HTML元素中的任意元素转换为内联块元素。

1、块级元素（display:block）的特点：

• 块级元素独占一行。

• 可以利用width和height属性为块级元素设置宽度和高度。

2、内联元素（display:inline）的特点：

• 内联元素可以在一行内显示多个。

• 不能利用width和height属性设置内联元素的宽度和高度。

3、内联块元素（display:inline-block）的特点：

内联块元素结合了“块级元素”和“内联元素”各自的优点：

• 可以利用width和height属性为内联块元素设置宽度和高度。

• 内联块元素可以在一行内显示多个。

定位属性还包括三个属性，小海老师会在下一篇文章中为大家介绍剩下的属性以及定位功能的具体用法。

文章预告

下一篇文章中，小海老师会继续为大家向下讲解CSS定位属性，下一次我们讲解CSS中剩余的三个定位属性以及定位技术的使用，希望大家千万不要错过！

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。