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大數據學習視頻禮包

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。