盒子定位的解析的用法（position属性）

最新推荐文章于 2022-04-03 18:26:46 发布

旧城不暖少年

最新推荐文章于 2022-04-03 18:26:46 发布

阅读量516

点赞数 1

分类专栏：分享文章标签： html5 css

本文链接：https://blog.csdn.net/m0_46367578/article/details/120865529

版权

分享专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在标准文档流中，页面中的元素将会按照从左到右，自上而下的方式进行排列，而在进行页面布局是，需要页面元素按照指定位置或方式进行排列，因此需要对页面中的元素进行定位。

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>

效果如下：
在这里插入图片描述

旧城不暖少年

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子定位的解析的用法（position属性）

在标准文档流中，页面中的元素将会按照从左到右，自上而下的方式进行排列，而在进行页面布局是，需要页面元素按照指定位置或方式进行排列，因此需要对页面中的元素进行定位。1.什么是标准文档流？当HTML页面被浏览器打开时，浏览器会对页面进行解释，读取HTML页面中的所有内容，然后将内容显示在浏览器的页面上，页面显示的内容会按照标准的模板进行内容布局。标准流的显示方式如下：<!DOCTYPE html><html lang="en"><head> <met
复制链接

扫一扫