盒子模型-水平方向、垂直方向的佈局（important!)

阿新 • • 發佈：2020-08-09

框模型/ 盒模型/盒子模型

水平佈局

元素在其父元素中的水平方向位置由margin-left、border-left、padding-left、width、padding-right、border-right、margin-right
共同決定

一個元素在其父元素中，水平佈局必須滿足：上述七個值的和=其父元素內容區的寬度
（1）若相加結果不成立，成為過度約束，則，等式會自動調整
（2）若七個值中沒有為auto的情況，則，瀏覽器會自動調整margin-right使得等式成立

注意：當等式不成立時，就算margin-right有設定也無效，而是會調整margin-right使等式成立。

例：

<! 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>關於盒子的水平佈局</title>

    <style>
       .boxOne{
           width: 600px;
           height: 200px;
           border:10px inset cadetblue;
       }
       .inner{
           width: 200px;
           height 
: 200px;
           background-color: lightblue;
           margin-left: 100px;   
           margin-right: 1000px;
       }
    </style>
</head>
<body>
    <div class="boxOne">
        <div class="inner"></div>
    </div>
</body>
</html>

效果如下：

就算margin-right設定為1000px，也會因為等式不成立，把margin-right調整為300px,而不會調整margin-left

七個值中可設定為auto的有：width、margin-left、margin-right
（1）當有某一個值為auto，則會自動調整為auto的那個值使得等式成立
（2）若width=auto和某一個外邊距=auto，則，寬度調整到最大，設定auto的外邊距為0
（3）若width=auto和兩個外邊距都=auto，則，寬度調整到最大，設定auto的兩個外邊距都為0
（4）若width=固定值且兩個外邊距都=auto，則，將兩外邊距設定為相同的值
（通常使用該方式使得某元素在其父元素中水平居中）

水平居中舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>關於盒子的水平佈局</title>
    <style>
       .boxOne{
           width: 600px;
           height: 200px;
           border:10px inset cadetblue;
       }

       .inner{
           width: 200px;
           height: 200px;
           background-color: lightblue;
           margin: 0 auto;
       }
    </style>
</head>
<body>
    <div class="boxOne">
        <div class="inner"></div>
    </div>
</body>
</html>

效果

若子元素width大於父元素width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>關於盒子的水平佈局</title>

    <style>
       .boxOne{
           width: 600px;
           height: 200px;
           border:10px inset pink;
       }

       .inner{
           width: 800px;
           height: 200px;
           background-color: darksalmon;
       }
    </style>
</head>
<body>
    <div class="boxOne">
        <div class="inner"></div>
    </div>
   

</body>
</html>

效果

垂直佈局

預設情況下，父元素的高度被內容撐開
子元素大小超過父元素高度時，子元素會從父元素中溢位
使用overflow屬性：設定父元素如何處理子元素的溢位
（1）visible預設值：子元素溢位，超出部分仍顯示
（2）hidden：子元素被裁減，超出部分不會顯示

（3）auto：根據需要生成滾動條（橫向或縱向）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>關於盒子的垂直佈局</title>

    <style>
         .boxOne{
            width: 200px;
            height: 150px;
            background-color: darksalmon;
            overflow:auto;

        }
        
      
    </style>
</head>
<body>
    <div class="boxOne">
        我的少年們，別因他人沉淪享樂而感到迷茫，別為如今的潦倒而感到沮喪。
你夜以繼日的努力、剋制慾望的自律、孑然獨行的從容，都正在帶你去向更廣闊的未來。
朱顏易辭鏡，千金會散盡，唯有千萬個日夜匯聚的思想才是這個世上最銳不可當的鋒芒。
你不能就這樣敗在這裡。  
    </div>

</body>
</html>