盒子模型-有解無憂

李立超老師前端課程筆記

檔案流（normal flow）

網頁是一個多層的結構，一層疊著一層，通過 css 可以分別為每一層來設定樣式

用戶只能看到最頂上一層，這些層中，最底下的一層稱為檔案流，檔案流是網頁的基礎

我們所創建的元素默認都是在檔案流中進行排列，

對于我們來元素主要有兩個狀態

在檔案流中
不在檔案流中（脫離檔案流）

元素在檔案流中有什么特點

塊元素
- 塊元素會在頁面中獨占一行(自上向下垂直排列)
- 默認寬度是父元素的全部（會把父元素撐滿）
- 默認高度是被內容撐開（子元素）
行內元素
- 行內元素不會獨占頁面的一行，只占自身的大小
- 行內元素在頁面中左向右水平排列，如果一行之中不能容納下所有的行內元素
- 則元素會換到第二行繼續自左向右排列（書寫習慣一致）
- 行內元素沒有 width 和 height 屬性的，所以默認寬度和高度都是被內容撐開的

盒子模型（box model）

CSS將頁面中的所有元素都設定為了一個矩形的盒子，將元素設定為矩形的盒子后，對頁面的布局就變成將不同的盒子擺放到不同的位置

組成（由里到外）：

內容區（content）
內邊距（padding）
邊框（border）
外邊距（margin）

CSS box-model

內容區（content）

元素中的所有的子元素和文本內容都在內容區中排列，內容區的大小由 width 和 height 兩個屬性來設定

width 設定內容區的寬度
height 設定內容區的高度

邊框（border）

邊框屬于盒子邊緣，邊框里邊屬于盒子內部，出了邊框都是盒子的外部

邊框的大小會影響到整個盒子的大小

要設定邊框，需要至少設定三個樣式：

邊框的寬度 border-width
邊框的顏色 border-color
邊框的樣式 border-style

內邊距（padding）

內容區和邊框之間的距離是內邊距

一共有四個方向的內邊距：

padding-top
padding-right
padding-bottom
padding-left

內邊距的設定會影響到盒子的大小

背景顏色會延伸到內邊距上

一共盒子的可見框的大小，由內容區內邊距和邊框 共同決定，所以在計算盒子大小時，需要將這三個區域加到一起計算

padding 內邊距的簡寫屬性，可以同時指定四個方向的內邊距

padding: 10px 20px 30px 40px;	// 上，右，下，左（順時針）的順序
padding: 10px 20px 30px ;	// 上，左右，下
padding: 10px 20px ;	// 上下，左右
padding: 10px ;	// 上下左右

外邊距（margin）

外邊距不會影響盒子可見框的大小，但是外邊距會影響盒子的位置

一共有四個方向的外邊距：

margin-top

上外邊距，設定一個正值，元素會向下移動
margin-right

默認情況下設定margin-right不會產生任何效果
margin-bottom

外邊距，設定一個正值，其下邊的元素會向下移動
margin-left

左外邊距，設定一個正值，元素會向右移動

注意：margin-right 也可以設定負值，如果是負值則元素會向相反的方向移動

元素在頁面中是按照自左向右的順序排列的，

所以默認情況下如果我們設定的左和上外邊距則會移動元素自身
而設定下和右外邊距會移動其他元素

margin的簡寫屬性：margin 可以同時設定四個方向的外邊距，用法和padding一樣

margin會影響到盒子實際占用空間

盒子的水平布局

元素的水平方向的布局：元素在其父元素中水平方向的位置由以下幾個屬性共同決定

margin-left
border-left
padding-left
width
padding-right
border-right
margin-right

水平布局公式

一個元素在其父元素中，水平布局必須要滿足以下的等式：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素內容區的寬度（必須滿足）

以上等式必須滿足，如果相加結果使等式不成立，則稱為過度約束，則等式會自動調整

如果這七個值中沒有為 auto 的情況，則瀏覽器會自動調整margin-right值以使等式滿足
如果某個值為 auto ，則會自動調整為 auto 的值以使等式成立

<style>
    div.outer {
        padding: 800px;
        height: 200px;
        border: 10px red solid;
    }
    div.inner {
        height: 200px;
        width: 200px;
        background-color: #afb;
    }
</style>
<body>
    <div >
		<div ></div>
	</div>
</body>

此時就有

0 + 0 + 0 + 200 + 0 + 0 + 0 = 800

但明顯不滿足，所以瀏覽器會自動調整 margin-right = 800 - 200 = 600

如果將 .inner 里 width=auto 那么，auto 會自動調整

0 + 0 + 0 + auto(800) + 0 + 0 + 0 = 800
如果將一個寬度和一個外邊距設定為auto，則寬度會調整到最大，設定為auto的外邊距會自動為0

如果將三個值都設定為auto，則外邊距都是0，寬度最大

如果將兩個外邊距設定為auto，寬度固定值，則會將外邊距設定為相同的值

所以我們經常利用這個特點來使一個元素在其父元素中水平居中

eg： width: xxpx; margin: 0 auto;

注意：如果子元素的 width 的值大于父元素的 width 時，那么瀏覽器會將子元素的 margin-right 設定為負值，顯示的效果就是子元素的內容超出了父元素的框架，

垂直方向的布局

垂直方向的布局沒有水平那么復雜，也不需要滿足什么公式

當父元素 height 沒有設具體值（默認和 auto ）時，父元素的高度會被子元素的 height 撐開
若父元素 height 設的有具體值，且子元素的高度超出時，則子元素會從父元素中溢位

使用 overflow 屬性來設定父元素如何處理溢位的子元素
- overflow: visible 默認值子元素會從父元素中溢位，在父元素外部的位置顯示
- overflow: hidden 溢位內容將會被裁剪不會顯示
- overflow: scroll 生成兩個滾動條，通過滾動條來查看完整的內容
- overflow: auto 根據需要生成滾動條（常用）
另外還有 overflow-x 和 overflow-y 表示 x 軸和 y 軸上的設定

垂直外邊距的重疊

相鄰的垂直方向外邊距會發生重疊現象

兄弟元素

兄弟元素間的相鄰垂直外邊距會取兩者之間的較大值（兩者都是正值）

特殊情況：

? 如果相鄰的外邊距一正一負，則取兩者的和

? 如果相鄰的外邊距都是負值，則取兩者中絕對值較大的

兄弟元素之間的外邊距的重疊，對于開發是有利的，所以我們不需要進行處理

父子元素

父子元素間相鄰外邊距，子元素的會傳遞給父元素（上外邊距）

父子外邊距的折疊會影響到頁面的布局，必須要進行處理

行內元素的盒模型

特點

行內元素不支持設定寬度和高度
行內元素可以設定padding，但是垂直方向padding不會影響頁面的布局
行內元素可以設定border，垂直方向的border不會影響頁面的布局
行內元素可以設定margin，垂直方向的margin不會影響布局

display

用來設定元素顯示的型別

display: inline 將元素設定為行內元素
display: block 將元素設定為塊元素
display: inline-block 將元素設定為行內塊元素，行內塊，既可以設定寬度和高度又不會獨占一行
display: table 將元素設定為一個表格
display: none 元素不在頁面中顯示，不會占據頁面的位置

注：visibility 也可用來設定元素的顯示狀態

visibility: visible 默認值，元素在頁面中正常顯示

visibility: hidden 元素在頁面中隱藏不顯示，但是依然占據頁面的位置，影響布局

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/227918.html

標籤：Html/Css

上一篇：循序漸進VUE+Element 前端應用開發(29）--- 高級查詢條件的界面設計

下一篇：js實作長按顯示全部內容