技術標籤：初級CSS css 前端

絕對定位的佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>絕對定位的佈局</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/11.22.05.css"> --> 

    <style>
        .box1{
            width: 500px;
            height: 500px;
            background-color: #bfa;
            position: relative;
        }
         .box2{
            width: 100px;
            height: 100px;
            background-color: orchid;
            position: absolute;
            margin-left 
: auto;
            margin-right: auto;
            /* margin-top: auto;
            margin-bottom: auto; */

            /* 
            水平佈局
            left+margin-left+border-left+padding-left+width+padding-right+border-right+right=包含塊的內容區的寬度

            -當我們開啟了絕對定位後：
                    水平方向的佈局就需要新增left和right兩個值
                        此時規則和之前一樣只是多添加了兩個值：
                            當發生過度約束：
                             如果9個值中沒有auto則自動調整right值以使等式滿足
                             如果有auto，則自動調整auto的值以使等式滿足

                        可設定auto的值
                            margin-left，margin-right width left right
                            
                        因為left和right的值預設是auto，所以如果不設定left和right
                            則等式不滿足時，會自動調整這兩個值    
            
                    垂直方向佈局的等式也必須要滿足
                        top+margin-top/bottom+padding-top/bottom+border-top/bottom=包含塊的高度
            */ 


           left:0;right:0

            /* top: 0;
            bottom: 0;
             */
          
         }
       
        /* 可以使子元素在父元素水平垂直居中 */
        
        /* .box2{
            width: 100px;
            height: 100px;
            background-color: orchid;
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            margin-top: auto;
            margin-bottom: auto; */

            
            /* margin-left: auto;
            margin-right: auto;
            margin-top: auto;
            margin-bottom: auto; */
            /* 寫為一個margin：auto */
            

          
           
             /* left: 0;
            right: 0;
            top: 0;
            bottom: 0;

        }
         */
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

執行結果為：
在這裡插入圖片描述
水平居中：

前端的學習之路：初級CSS---絕對定位的佈局

絕對定位的佈局

前端的學習之路：初級CSS---絕對定位的佈局

前端的學習之路：初級CSS---複合選擇器

前端的學習之路：初級CSS---clearfix

前端的學習之路：初級CSS---使用after偽類解決高度塌陷問題

前端的學習之路：初級CSS---BFC的演示

前端的學習之路：初級CSS---字型的簡寫屬性

前端的學習之路：初級CSS---圖示字型的其他使用方式

前端的學習之路：初級CSS---字型族

前端的學習之路：初級CSS---元素的層級

前端的學習之路：初級CSS---背景練習

前端的學習之路：初級CSS---其他的文字樣式

前端的學習之路：初級CSS---選擇器的權重

前端的學習之路：初級CSS---繼承

前端的學習之路：初級CSS---偽元素

前端的學習之路：初級CSS---關係選擇器

前端的學習之路：初級CSS---常用選擇器

前端的學習之路：初級CSS---css語法

前端的學習之路：初級CSS---顏色

前端的學習之路：初級CSS---單位：畫素和百分比

前端的學習之路：初級HTML---超連結

前端的學習之路：初級CSS---絕對定位的佈局

絕對定位的佈局

相關推薦