HTML连载57-相对定位和绝对定位

时间 2019-12-18

标签 html 连载相对定位绝对栏目 HTML 繁體版

原文原文链接

1、定位流html

1.分类git

（1）相对定位；github

（2）绝对定位微信

（3）固定定位布局

（4）静态定位学习

2.什么相对定位大数据

相对定位就是相对于本身之前在标准流中的位置来移动。ui

例子：spa

 <style>

        div{

            width:100px;

            height:100px;

        }

        .box1{

            background-color: red;

        }

        .box2{

            background-color: yellow;

        }

        .box3{

            background-color: blue;

        }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</body>

如今修改box2的属性.net

        .box2{

            background-color: yellow;

            position:relative;/*相对流不会脱离标准流*/

            top:20px;

            left:20px;

        }

3.注意：

（1）相对流不会脱离标准流

（2）在相对定位中同一个方向上的定位属性只能使用一个

（3）因为相对定位是不脱离标准流的，因此在相对定位中是区分块级元素/行内元素/行内块级元素

（4）因为相对定位是不脱离标准流的，而且相对定位的元素会占用标准流中的位置，因此当给相对定位的元素设置margin/padding等属性时会影响到标准流的布局。（也就是设置了margin/padding属性的时候，会把原来标准流中的位置进行相应调整，而相对位置会等标准流设置好了再进行生效）

（5）position:relative;常常忘记设置。

        .box2{

            background-color: yellow;

            position:relative;/*相对流不会脱离标准流*/

            top:20px;

            left:20px;

            margin-top: 20px;

        }

4.相对定位的应用场景

（1）用于对元素进行微调，好比：各类标签一块儿使用的时候，因为标签的差别，须要进行对齐，使用相对定位会更加简便。

（2）配合后面学习的绝对定位进行使用

2、绝对定位

1.什么是绝对定位

绝对定位就是相对于body来定位的。

先来一个基础的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D150_AbsolutePositoning</title>

    <style>

        div{

            width:100px;

            height:100px;

        }

        .box1{

            background-color: red;

        }

        .box2{

            background-color: yellow;

            /*position:absolute;*/

        }

        .box3{

            background-color: blue;

        }

        span{

            width:100px;

            height:100px;

            background-color: purple;

        }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

<span>我是行内块级元素在绝对定位中的做用的</span>

</body>

</html>

2.绝对定位注意点

（1）绝对定位的元素是脱离标准流的

        .box2{

            background-color: yellow;

            position:absolute;

        }

（2）绝对定位的元素是不区分块级元素/行内元素/行内块级元素的。

        span{

            width:100px;

            height:100px;

            background-color: purple;

            position:absolute;

        }

（3）这个绝对定位优势相似于浮动流

        .box2{

            background-color: yellow;

            position:absolute;

            right:0px;

            bottom:0px;

3、源码：

D148_RelativePositioning.html

D150_AbsolutePositoning.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D148_RelativePositioning.html

https://github.com/ruigege66/HTML_learning/blob/master/D150_AbsolutePositoning.html

2.CSDN：https://blog.csdn.net/weixin_44630050

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，我的帐号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包