【承接文章】《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教材发给你，帮助你在前端开拓的道路上阔步前行。
小海声明在头条上揭橥的这些文章都是从前端开拓的根本开始一步一步讲起的。我非常希望能有更多的前端开拓初学者通过我写的文章，逐步学到一定的知识，乃至逐步有了入门的觉得。这些文章都是我这几年传授教化过程中的履历，每写一篇时我都只管即便把握好说话，用大略易懂的措辞描述，同时精心设计版面，让版面更加丰富，引发阅读兴趣。以是，每一篇文章可能篇幅不长，但是都要耗费小海老师良久的韶光。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，由于这些文章都是连载的，并且是经由我系统的归纳过的。
关注“小海前端”，我会连续为大家奉上更加深入的前端开拓文章，也希望更多的初学者随着学下去，我们共同将前端开拓的路努力坚持的走下去。
