在标准文档流中,页面中的元素将会按照从左到右,自上而下的方式进行排列,而在进行页面布局是,需要页面元素按照指定位置或方式进行排列,因此需要对页面中的元素进行定位。
1.什么是标准文档流?
当HTML页面被浏览器打开时,浏览器会对页面进行解释,读取HTML页面中的所有内容,然后将内容显示在浏览器的页面上,页面显示的内容会按照标准的模板进行内容布局。
标准流的显示方式如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin-top: 15px;">
<span style="border: 2px solid red;padding: 5px;">行标签1</span>
<a href="#" style="border:2px solid red;padding: 5px;">行标签2</a>
<em style="border: 2px solid red;padding: 5px;">行标签3</em>
<i style="border: 2px solid red;padding: 5px;">行标签4</i>
<img src="img/watermark.jpg" width="100px" height="100px" style="vertical-align: middle;">
<br/><br/><br/>
<hr/>
<div style="border: 2px solid red;width: 200px;height: 200px;text-align: center;line-height: 200px;font-size: 30px;">块标签1</div>
<h1 style="border: 2px solid red;">块标签2</h1>
<p style="border: 2px solid red;">块标签3</p>
<hr>
<dl style="border: 2px solid blue;padding: 5px;">
<dt style="border: 2px solid green;">dl、dt、dd标签都是块标签</dt>
<dd style="border: 2px solid red;">内容1</dd>
</dl>
</body>
</html>
运行效果如下:
行内标签:
<span> <a> <em> <i> <img>
块标签:
<div> <p> <h1>~<h6> <hr/> <br/> <dl> <dt> <dd> <ul> <ol> <li>
行内标签和块级标签的区别:
(1)排列方式不同,行内元素按照从左到右的方式进行排列,多个行内元素显示在同一行,只有当一行排列完后,才会开始一个新的行。块状元素各占据一行,则按照自上而下的方式进行排列。
(2)内嵌元素不同,块状元素可以包含块状元素。行内元素不能包含块状元素,只能包含文本或者其他行内元素。
(3)属性设置不同,行内元素与块状元素的属性设置不同,主要体现在盒子模型中,行内元素设置 width 属性、height 属性无效,但可以设置 line-height 属性。在设置 margin 属性、padding 属性时,对于上下方向上的设置无效。
2.盒子定位
标准文档流中,页面按照从左到右,从上到下的方式排列,而在进行页面布局的时候,需要页面元素按照指定的位置或方式进行排列,因此需要对页面中元素进行定位。
静态定位:
position 属性的默认值,表示CSS文档流定位,元素框正常使用,position:static;
相对定位:
相对定位可以将指定的标签从一个位置移动到另一个位置,相对定位是指相对于自己的盒子原有的位置进行偏移,不会脱离标准文档流,也不对其他元素造成影响。需要设置水平方向和垂直方向的偏移量,分别是 left 、top 、right 、bottom 。position:relative;
<div style="height: 250px;border: 1px solid red;">
<div style="width: 100px;height: 100px;background: rgb(33, 95, 167);"></div>
</div>
<div style="height: 250px;border: 1px solid red;">
<div style="width: 100px;height: 100px;background: rgb(33, 95, 167);position: relative;top: 30px;left: 70px;"></div>
</div>
<div style="height: 250px;border: 1px solid red;">
<div style="width: 100px;height: 100px;background: rgb(33, 95, 167);"></div>
<div style="width: 100px;height: 100px;background: rgb(33, 95, 167);position: relative;top: 30px;left: 70px;"></div>
</div>
运行效果如下:
固定定位:
固定定位是生成绝对定位的元素,相对于浏览器窗口进行定位。position:fixed;
<body style="height: 2000px;">
<p style="text-align: center;position: fixed;border: 1px solid red;width: 100%;">这是一段固定的文字</p>
<div style="width: 200px;height: 200px;background: blue;"></div>
</body>
浏览效果如下:
(滑动鼠标条,文字位置不会改变)
绝对定位:
绝对定位可以将指定的标签放置在绝对的坐标位置上,绝对定位使标签的位置与文档流无关,因此不占据空间,可以浮在网页上。绝对定位是以最近的一个已定位的父级元素为基准,如果父级元素没有定位或没有父级元素,则以浏览器窗口为基准;会脱离标准文档流,不影响同一级的盒子元素位置。postion:absolute;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
text-align: center;
line-height: 200px;
}
</style>
</head>
<body style="height: 3000px;">
<div style="position: absolute;top: 160px;left: 40px;width: 200px;height: 200px;background: rgb(106, 140, 233);">以窗口为基准</div>
<div style="border: 1px solid red;height: 300px;">
<div style="position: absolute;top: 40px;left: 160px;width: 200px;height: 200px;background: rgb(73, 196, 110);">以没有定位的窗口为基准</div>
</div><br>
<div style="border: 1px solid green;height: 300px;position: relative;">
<div style="position: absolute;top: 40px;left: 160px;width: 200px;height: 200px;background: rgb(216, 221, 149);">以相对定位的窗口为基准</div>
</div>
</body>
</html>
效果如下:
提醒:当父类窗体没有进行定位时,绝对定位的基准都是以窗口为基准,所有当我们使用绝对定位时,都会给父级盒子添加上一个相对定位。(position:relative;)
z-index属性:
z-index属性设置元素的堆叠循序。拥有更高堆叠的元素总是会处于堆叠顺序较低的元素的前面。z-index:-1;
<body>
<img src="img/watermark.jpg" alt="" style="position: absolute;z-index: -1;width: 400px;height: 400px;">
<div style="font-size: 40px;color: rgb(39, 37, 122);">这是一段文字,这段文字在图片的上面</div>
</body>
效果如下: