盒子模型

時間 2020-11-30

標籤 css html 前端瀏覽器框架佈局 code orm htm blog 欄目 CSS 简体版

原文原文鏈接

李立超老師前端課程筆記css

文檔流（normal flow）

網頁是一個多層的結構，一層疊着一層。經過 css 能夠分別爲每一層來設置樣式html

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

咱們所建立的元素默認都是在文檔流中進行排列。瀏覽器

對於咱們來元素主要有兩個狀態框架

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

元素在文檔流中有什麼特色

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

盒子模型（box model）

CSS將頁面中的全部元素都設置爲了一個矩形的盒子，將元素設置爲矩形的盒子後，對頁面的佈局就變成將不一樣的盒子擺放到不一樣的位置佈局

組成（由裏到外）：

內容區（content）code
內邊距（padding）orm
邊框（border）htm
外邊距（margin）blog

內容區（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 class="outer">
		<div class="inner"></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 元素在頁面中隱藏不顯示，可是依然佔據頁面的位置，影響佈局