CSS入門指南-2：盒子模型、浮動和清除

時間 2019-11-16

標籤 css 入門指南盒子模型浮動清除欄目 CSS 简体版

原文原文鏈接

這是CSS設計指南的讀書筆記，用於加深學習效果。css

上一篇介紹了css 的工做原理，這一篇主要介紹盒子模型和浮動。html

盒子模型

所謂盒子模型，就是瀏覽器爲頁面中的每一個HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型在頁面上排布。程序員

可見的頁面版式主要由三個屬性控制：position、display和float。瀏覽器

position：控制頁面上元素的位置關係
display：控制元素是堆疊、並排仍是不在頁面出現
float：提供控制的方式，以便吧元素組成多欄佈局

元素盒子的屬性能夠分紅三組：ide

邊框(board)。能夠甚至邊框的寬窄、樣式和顏色
內邊距(padding)。能夠甚至盒子內容區與邊框的間距
外邊距(margin)。能夠設置盒子與相鄰元素的間距

元素盒子還有一個背景層，能夠改變顏色，也能夠添加圖片。佈局

簡寫樣式

CSS爲邊框、內邊距和外邊距分別規定了簡寫屬性，每一個簡寫聲明中，屬性值得順序都是上、右、下、左。學習

好比：ui

{
  margin-top: 5px; 
  margin-right: 10px;
  margin-bottom: 12px; 
  margin-left: 8px;
}複製代碼

使用簡寫則爲這樣：this

{
    margin: 12px 10px 12px 8px;
}複製代碼

若是有一個值沒寫，那麼則使用對邊的值。spa

好比：

{margin: 12px 10px 12px;}
/*等同於*/
{
    margin: 12px 10px 12px 10px;
}複製代碼

若是隻寫一個值，則4個邊都取這個值。

{margin: 12px;}
/*等同於*/
{margin: 12px 12px 12px 12px;}複製代碼

另外每一個盒子的屬性也分三個粒度，這三個粒度從通常到特殊分別舉例以下：

{
    border: 2px dashed red;
}複製代碼

混合使用三種粒度的簡寫屬性達成設計目標是很常見的。好比，想爲盒子的上邊和下邊添加4像素的紅色邊框，爲左邊添加1像素寬的紅色邊框，而右邊沒有。能夠這麼寫：

{border: 4px solid red;} /* 先給4條邊設置相同的樣式*/
{border-left-width: 1px;} /* 修改左邊框寬度*/
{border-fight: none;} /*移出右邊框*/複製代碼

盒子邊框

border 有三個相關屬性。

寬度（border-width)。可使用thin、medium和thick等文本值，也可使用除百分比和負值以外的任何絕對值。
樣式（border-style)。有none、hidden、dotted、dashed等文本值。
顏色（border-color）。可使用任意顏色值，包括RGB、HSL、十六進制顏色值和顏色關鍵字。

盒子內邊距

內邊距是盒子內容區與盒子邊框之間的距離。

上圖的樣式爲：

p {
    font: 16px helvetica, sans-serif; 
    width: 220px; 
    border: 2px solid red; 
    background-color: #caebff;
}複製代碼

能夠看到在沒有設定內邊距的狀況下，內容緊挨着邊框。

設定邊框後：

p {
    font: 16px helvetica, arial, sans-serif; 
    width: 220px; 
    border: 2px solid red; 
    background-color: #caebff; 
    padding: 10px;
}複製代碼

效果以下，能夠看到樣式舒服了不少：

內邊距在盒子的內部，因此也會取得盒子背景。也就是說，多出來的內邊距並無擠壓文本內容，實際是加在了聲明的盒子寬度之上。

盒子外邊距

上圖的例子中，第一組是默認狀況，第二組是在第一組基礎上添加了邊框，第三組是把第二組的外邊距設置爲了0，標題和段落全緊挨在一塊兒了。

推薦你們吧這條規則做爲樣式表的第一條規則：

* {margin: 0; padding: 0;}複製代碼

這條規則是把全部元素默認的外邊距和內邊距都設定爲0。這樣，咱們能夠爲那些真正須要添加邊距的元素設定邊距。

疊加外邊距

好比下邊這個樣式：

p {
    height: 50px;
    border: 1px solid #000;
    backgroundcolor: #fff;
    margin-top: 50px;
    margin-bottom: 30px;
}複製代碼

若是咱們把這個樣式應用到3個先後相接的段落上，因爲上邊距和下邊距相鄰，你可能會認爲他們之間的外邊距是80（50+30）像素，可是其實是50像素，這就是邊距疊加。

垂直方向上外邊距會疊加水平方向的不會
外邊距單位 根據經驗，水平邊距可使用像素，以便該段文本始終與包含元素邊界保持固定間距，不受自豪變大或變小的影響。而對於上下外邊距，已em 爲單位則可讓段間距隨字號變化而相應增大或縮小。

盒子有多大

沒有寬度的盒子

若是沒有顯式的設置元素的 width 屬性，咱們就稱這個盒子沒有寬度。
若是沒有設定 width，那麼這個屬性的默認值是 auto，會讓元素的寬度擴展到與父元素同寬。

咱們看個例子🌰：

<body>
<p> 這個元素沒有設置寬度</p>
</body>複製代碼

設置樣式：

body {
    font-family: helvetica, arial, sans-serif;
    size: 1em;
    marging: 0px;
    background-color: #caebff;
}

p {
    margin: 0;
    background-color: #fff;
}複製代碼

能夠看到，不給段落設置寬度，段落會填滿 body 元素。

爲了更加明顯，我給段落左右分別加一個邊框，再加一個外邊距。

p {
    margin:0 30px; 
    background-color:#fff; 
    padding:0 20px; 
    border: solid red; 
    border-width: 0 6px;
}複製代碼

這時段落內容區域變成了 288像素（我把瀏覽器寬度手動調成了400px，400-(20+6+30)x2）。

結論：沒有寬度的元素始終會擴展到填滿其父元素的寬度爲止。添加水平邊框、內邊距和外邊距會致使內容寬度減小，減小量等於水平邊框、內邊距和外邊距的和。

有寬度的盒子

仍是上邊的例子，咱們先把外邊距去掉，固定寬度400px；

p {
    width:400px; 
    margin:0; 
    padding:0 20px;  
    border:solid red;  
    border-width: 0 6px  0 6px;  
    background-color:#fff;
}複製代碼

能夠看到，盒子的寬度並非400px，而是452像素（400+(20+6)*2）。

再給盒子加上外邊距：

p {
    width:400px; 
    margin:0 30px; 
    padding:0 20px;  
    border:solid red;  
    border-width: 0 6px  0 6px;  
    background-color:#fff;
}複製代碼

能夠看到，這時總寬度達到了512像素（30+6+20+400+20+6+30=512）

結論: 爲設定了寬度的盒子添加邊框、內邊距和外邊距，會致使盒子更寬。實際上盒子的 width 屬性設定的只是盒子內容區的寬度，而非盒子總體的寬度

浮動與清除

浮動

css 設計 float（浮動）屬性的主要目的是爲了實現文本繞排圖片的效果，這個屬性也是建立多欄佈局最簡單的方式。
咱們先看一個例子：

<img .../>
<p>..the paragraph text...</p>複製代碼

css 規則以下。

p {
    margin: 0;
    border: 1px solid red;
}
img {
    float: left;
    margin: 0 4px 4px 0;
}複製代碼

這個例子的樣式如圖所示：

這裏咱們給圖片加了 float: left 樣式，這時瀏覽器就會把圖片向上推，直到它碰到父元素的內邊界（也就是body）。後面的內容再也不認爲浮動元素在它的前邊，因此它會佔據父元素左上角的位置。不過，它的內容會繞開浮動的圖片。

建立分欄

在上面的基初上如何使內容分欄呢？
只要再用一float 屬性就能夠了。

p {
    float: left; /* 加上這兩行*/
    width: 200px;
    ...
}複製代碼

這樣同時浮動圖片和有寬度的段落，會使圖片繞排效果消失，而浮動的段落也向左向上移動。變成了多欄的效果。

圍住浮動元素

看下這個例子：

<section>
    <img src="images/rubber_duck2.jpg">
    <p>It's fun to float.</p>
</section>
<footer>Here is the footer element that runs across</footer>複製代碼

應用樣式以下：

section {
    border: 1px solid blue;
    margin: 0 0 10px 0;
}
p {
    marging: 0;
}
footer {
    border: 1px solid red;
}複製代碼

效果如圖：

但這並非咱們想要的，咱們並不想讓footer 被提到上邊。
浮動元素脫離了原來的文檔流，不受父元素的控制。若是咱們想讓父元素還包含浮動的子元素，怎麼作呢？
有三種方法：

爲父元素應用 `overflow: hidden`

只須要在 section 加上這個樣式：

section {
    overflow: hidden;
    ...
}複製代碼

如今效果如圖：

實際上，overflow: hidden 聲明凱真正用途是防止包含元素被超大內容撐大。也就是說應用上這個以後，包含元素（父元素）會保持其設定的寬度，若是子元素過大，會被截掉。

浮動父元素

第二種方法是讓父元素和子元素同時浮動。

section {
    float: left;
    width: 100%;
    border: 1px solid blue;
}
img {
    float: left;
}
footer {
    border: 1px solid red;
    clear: left;
}複製代碼

浮動section 後，無論其子元素是否浮動，都會被包圍。所以須要用 width: 100% 讓section 與瀏覽器同寬。因爲section 也浮動，因此footer 會往它旁邊擠，這時須要使用 clear: left 以保證不會被提高到浮動的元素旁邊。

在父元素內容的末尾添加浮動元素，能夠直接在標記中加，也能夠經過給父元素添加clearfix 類來加。

第三種方法是給父元素添加一個非浮動的子元素，而後清除該子元素。

這種方式能夠生效是由於父元素必定會包圍非浮動子元素，且清除會讓這個子元素處於最下。

這裏咱們使用神奇的 clearfix 規則：

.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
    }複製代碼

這個 clearfix 規則最先是由程序員 Tony Aslett 發明的，它只添加了一個清除的包含句點做爲非浮動元素（必須有內容，句點是最小的內容）。規則中其餘生命是爲了確保這個僞元素沒有高度，並且不可見。

after 會在元素內容（而不是元素後插入一個僞元素）
使用clear: both 意味着 section 中新增的子元素會被清除左右浮動元素。

咱們看了三種方法圍住浮動元素的方式。

那若是沒有父元素，若是清除浮動呢？

好比下邊這個例子：

<section>
    <img src="images/rubber_duck3.jpg">
    <p>This text sits next to the image and because the text extends below the bottom of the image, the next image positions itself correctly under the previous image.</p>
    <img src="images/beach_ball.jpg">
    <p>This text is short, so the next image can float up beside this one.</p>
    <img src="images/yellow_float.jpg">
    <p>Because the previous image's text does not extend below it, this image and text move up next to the previous image. This problem can be solved by the use of the clear property.</p>
</section>複製代碼

樣式以下：

section {
    width:300px; b
    order:1px solid red;
}
img {
    float:left; 
    margin:0 4px 4px 0;
}
p {
    font-family:helvetica, arial, sans-serif; 
    margin:0 0 5px 0;
}複製代碼

效果如圖所示：