web前端入門到實戰(zhàn)：CSS的邏輯屬性與盒子模型

先開篇之前先提個問題：

為什么Flex box跟Grid box的是以start、end為排列規(guī)則，而不是常規(guī)的top 、right 、bottom 跟left？

先不要急著往下翻，大家先思考一下。

這個問題的答案，魚頭會在文章中給出，歡迎大家?guī)е@個問題往下翻閱，如果已經(jīng)知道答案，也可以看看跟大家所知道的答案是否一致。

CSS的邏輯屬性

2017年5月18日，W3C的 CSS工作組(CSS Working Group) 發(fā)布了 CSS邏輯屬性和值(CSS Logical Properties and Values Level 1) 的首份工作草案(First Public Working Draft)。不同的書寫模式(writing mode)中，可以抽取出共性的抽象概念(如開始位置，或行)，這些邏輯抽象概念需要在不同書寫模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依賴這些共性的邏輯概念。該 CSS 模塊給出了用于通過邏輯方式(而不是基于物理坐標、書寫方向和維映射等)控制布局的邏輯屬性和取值(logical properties and values)。這個模塊來源于CSS21中關(guān)于邏輯屬性和值的特性。

對于前端來說，我們一直習(xí)慣于使用top 、 right 、 bottom、 left來定義我們的HTML元素，這跟我們物理上的概念是一致的。但是對于CSS這個原本是為了服務(wù)于圖文展示才誕生的語言來說，其實是不匹配的，為什么這么說？

writing-mode

writing-mode：定義了文本水平或垂直排布以及在塊級元素中文本的行進方向。

writing-mode一共有以下5個改變HTML文本書寫規(guī)則的值(還有幾個是用在SVG上的，本文不予討論)：

writing-mode: horizontal-tb;

writing-mode: horizontal-tb 定義了內(nèi)容從左到右水平流動，從上到下垂直流動。下一條水平線位于上一條線下方。

writing-mode: vertical-rl;

writing-mode: vertical-rl 定義了內(nèi)容從上到下垂直流動，從右到左水平流動。下一條垂直線位于上一行的左側(cè)。

writing-mode: vertical-lr;

writing-mode: vertical-lr定義了內(nèi)容從上到下垂直流動，從左到右水平流動。下一條垂直線位于上一行的右側(cè)。

writing-mode: sideways-rl; (僅Firefox41+實現(xiàn))

writing-mode: sideways-rl定義了內(nèi)容從上到下垂直流動，所有字形，甚至是垂直腳本中的字形，都設(shè)置在右側(cè)。

writing-mode: sideways-lr;(僅Firefox41+實現(xiàn))

writing-mode: sideways-lr內(nèi)容從上到下垂直流動，所有字形，甚至是垂直腳本中的字形，都設(shè)置在左側(cè)。

源碼如下：

.wm-htb {
    writing-mode: horizontal-tb;
}
.wm-vrl {
    writing-mode: vertical-rl;
}
.wm-vlr {
    writing-mode: vertical-lr;
}
.wm-srl {
    writing-mode: sideways-rl;
}
.wm-slr {
    writing-mode: sideways-lr;
}
.text-content {
    width: 200px;
    padding: 20px;
    border: 1px solid;
    display: inline-block;
    vertical-align: top;
    padding-right: 100px;
}

<div class="text-content wm-htb">writing-mode: horizontal-tb;</div>
<div class="text-content wm-vrl">writing-mode: vertical-rl;</div>
<div class="text-content wm-vlr">writing-mode: vertical-lr;</div>
<div class="text-content wm-srl">writing-mode: sideways-rl;</div>
<div class="text-content wm-slr">writing-mode: sideways-lr;</div>

圖示如下：

從上圖可以發(fā)現(xiàn)，當我們設(shè)置了padding-right: 100px;的時候，不同的書寫規(guī)則，展示效果是不一樣的。

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取。

在最開始的時候，HTML與CSS只服務(wù)于英語國家，但是隨著互聯(lián)網(wǎng)的發(fā)展，逐漸各個不同書寫規(guī)則的國家也開始流行了起來。

我們原來的CSS邏輯屬性是按照物理邏輯，從上(top)、右(right)、下(bottom)、左(left)劃分的。

那么按著這個規(guī)則去修改文本屬性時，就會出現(xiàn)上述這種不符合語法規(guī)則的狀態(tài)。

大概也是基于這個原因，所以W3C發(fā)布了新的邏輯屬性與值。

新舊邏輯屬性對比

CSS新舊邏輯屬性是完全不同的兩種模型。

我們首先來看看新舊有的邏輯屬性的對比圖示：

左舊右新

通過上圖可以得知新舊邏輯屬性對應(yīng)關(guān)系如下：

舊的邏輯屬性新的邏輯屬性 margin-top margin-block-start margin-right margin-inline-end margin-bottom margin-block-end margin-left margin-inline-start border-top border-block-start border-right border-inline-end border-bottom border-block-end border-left border-inline-start padding-top padding-block-start padding-right padding-inline-end padding-bottom padding-block-end padding-left padding-inline-start width inline-size height block-size

由上表可以得知，把Y軸方向的屬性都改為了block，X軸方向的屬性都改為了inline。

對于不同語系的國家，書寫順序會可能有很大的差異，意思就是block跟inline的方向不同。例如：

在英語國家 padding-inline-start=padding-left
在阿拉伯padding-inline-start=padding-right
在日本 padding-inline-start=padding-top

這就意味著舊的邏輯屬性，在某些國家里會變得不合常理。

CSS定位

CSS的定位屬性變化如下：

舊的邏輯屬性新的邏輯屬性 top inset-block-start bottom inset-block-end left inset-inline-start right inset-inline-end

例子如下：

/* 舊的邏輯屬性 */
.popup{
  position:fixed;  
  top:0;
  bottom:0;
  left:0;
  right:0;
}
/* 新的邏輯屬性 */
.popup{
   position:fixed;
   inset-block-start:0;  /*top - in English*/
   inset-block-end:0;    /*bottom - in English*/
   inset-inline-start:0; /*left - in English*/
   inset-inline-end:0;   /*right - in English*/
}
/* 新的邏輯屬性支持簡寫 */
.popup{
   position:fixed;
   inset:0 0 0 0;   /*top, right, bottom, left - in English*/
}

CSS浮動

浮動float的屬性也改了。

舊的邏輯屬性新的邏輯屬性 float: left float: inline-start float: right float: inline-end

text-align

文本text-align的屬性也改了。

舊的邏輯屬性新的邏輯屬性 text-align: left text-align: start text-align: right text-align: end

direction

除了writing-mode，還有一個排版屬性就是direction，跟writing-mode類似，不一樣的是writing-mode是控住網(wǎng)頁布局方向的，而direction是控制文本對齊方向的。屬性如下：

direction: ltr;

默認值，讓文本和其他元素從左到右顯示。

direction: rtl;

讓文本和其他元素從右到左顯示。

吐槽一下，看到這里的切圖仔們，抓緊跑路重構(gòu)吧，等哪天此屬性正式被啟用，就真的GG了。不過我想應(yīng)該會立個屬性來選擇性開啟物理屬性還是邏輯屬性，不然這對前端來說將會是一場災(zāi)難！

CSS的盒子模型

基礎(chǔ)盒模型(CSS basic box model)

當瀏覽器對一個render tree進行渲染時，瀏覽器的渲染引擎就會根據(jù)基礎(chǔ)盒模型(CSS basic box model)，將所有元素劃分為一個個矩形的盒子，這些盒子的外觀，屬性由CSS來決定。

我們在瀏覽器控制臺輸入如下代碼就可以看到頁面的每一個元素都是由一個矩形來包裹的，這些就是盒子

$$('*').forEach(e=> {
  e.style.border='1px solid';
})

圖示如下：

每個盒子都由四個部分組成：

內(nèi)容(content)

盒子(box) 的內(nèi)容，顯示標簽內(nèi)一切的文本，圖案或者別的內(nèi)容。

內(nèi)邊距(padding)

盒子(box) 內(nèi)的填充物，樣式為透明，主要負責(zé)擴展盒子內(nèi)區(qū)域大小。

外邊距(margin)

盒子(box) 外部的區(qū)域，樣式為透明，負責(zé)隔離相鄰的元素。

邊框(border)

盒子(box) 的邊界，負責(zé)隔離外邊距以及內(nèi)邊距。

盒子模型的值

盒子模型一共有三個值：

content-box

content-box為標準的盒子模型。盒子的width跟height只包括盒子本身的width與height屬性。

計算法則：

width=width

height=height

border-box

border-box為盒子模型可選的屬性之一。盒子的width跟height包括content、padding跟border。這也是當文檔處于 Quirks模式時Internet Explorer使用的盒模型。

計算法則：

width=width + border + padding

height=height + border + padding

padding-box

padding-box為非標準屬性，曾經(jīng)在Firefox中實現(xiàn)過，但是在Firefox 50中被刪除。padding-box的width和height 屬性包括內(nèi)容和內(nèi)邊距，但是不包括邊框和外邊距。

圖示：

這里吐槽一下，不知道為何沒有margin-box，雖然并沒有太大意義，當真實現(xiàn)了效果估計也很詭異，但是作為一個強迫癥患者晚期，少了一個屬性總感覺好不舒服。

視覺格式化模型(visual formatting model)

CSS的視覺格式化模型(visual formatting model) 是根據(jù) 基礎(chǔ)盒模型(CSS basic box model) 將 文檔(doucment) 中的元素轉(zhuǎn)換一個個盒子的實際算法。
官方說法就是：它規(guī)定了用戶端在媒介中如何處理文檔樹( document tree )。

每個盒子的布局由以下因素決定：

盒子的尺寸
盒子的類型：行內(nèi)盒子 (inline)、行內(nèi)級盒子 (inline-level)、原子行內(nèi)級盒子 (atomic inline-level)、塊盒子 (block)
定位：普通流、浮動、絕對定位
文檔樹中當前盒子的子元素 或 兄弟元素
視口(viewport) 的尺寸和位置
盒子內(nèi)部圖片的尺寸
其他某些外部因素

視覺格式化模型(visual formatting model) 的計算，都取決于一個矩形的邊界，這個矩形，被稱作是 包含塊( containing block ) 。一般來說，(元素)生成的框會扮演它子孫元素包含塊的角色；我們稱之為：一個(元素的)框為它的子孫節(jié)點建造了包含塊。包含塊是一個相對的概念。

例子如下：

<div>
    <table>
        <tr>
            <td>hi</td>
        </tr>
    </table>
</div>

以上代碼為例，div 和 table 都是包含塊。div 是 table 的包含塊，同時 table 又是 td 的包含塊，不是絕對的。

盒子的生成

盒子的生成是 CSS視覺格式化模型 的一部分，用于從文檔元素生成盒子。盒子的類型取決于CSS display 屬性。

塊級元素當元素的display 為 block、list-item 或 table 時，它就是塊級元素。
塊級盒子塊級盒子用于描述它與父、兄弟元素之間的關(guān)系。每個塊級盒子都會參與塊格式化上下文（block formatting context）的創(chuàng)建。每個塊級元素都會至少生成一個塊級盒子，即主塊級盒子（principal block-level box） 主塊級盒子包含由后代元素生成的盒子以及內(nèi)容，同時它也會參與定位方案。一個同時是塊容器盒子的塊級盒子稱為塊盒子（block box）。
匿名盒子某些情況下需要進行視覺格式化時，需要添加一些增補性的盒子，這些盒子不能被CSS 選擇器選中，也就是所有可繼承的 CSS 屬性值都為 inherit ，而所有不可繼承的 CSS 屬性值都為 initial。因此稱為匿名盒子(anonymous boxes)。
行內(nèi)元素當元素的display 為 inline、inline-block 或 inline-table 時，它就是行內(nèi)級元素。顯示時可以與其他行內(nèi)級內(nèi)容一起顯示為多行。
行內(nèi)盒子行內(nèi)級元素會生成行內(nèi)級盒子，該盒子同時會參與行內(nèi)格式化上下文（inline formatting context）的創(chuàng)建。
匿名行內(nèi)盒子類似于塊盒子，CSS引擎有時候也會自動創(chuàng)建一些行內(nèi)盒子。這些行內(nèi)盒子無法被選擇符選中，因此是匿名的，它們從父元素那里繼承那些可繼承的屬性，其他屬性保持默認值 initial。
行盒子行盒子由行內(nèi)格式化上下文創(chuàng)建，用來顯示一行文本。在塊盒子內(nèi)部，行盒子總是從塊盒子的一邊延伸到另一邊（譯注：即占據(jù)整個塊盒子的寬度）。當有浮動元素時，行盒子會從向左浮動的元素的右邊緣延伸到向右浮動的元素的左邊緣。
run-in 盒子（在CSS 2.1的標準中移除了） run-in盒子可以通過display: run-in來設(shè)置，它既可以是塊盒子，又可以是行內(nèi)盒子，這取決于它后面的盒子的類型。

定位規(guī)則

一旦形成了盒子，CSS引擎就需要定位它們來完成布局。

定位所使用的規(guī)則如下：

普通流在普通流中，盒子會依次放置。在塊格式化上下文（block formatting context）中，盒子在垂直方向依次排列。在行內(nèi)格式化上下文（inline formatting context） 中，盒子則水平擺列。
浮動：當一個盒子的float不為none，并且position為static或relative時，該盒子為浮動定位。 float: left：盒子會定位到當前行盒子的開始位置（左側(cè)）。 float: right：盒子會定位到當前行盒子的尾部位置（右側(cè)）。
絕對定位：如果元素的position 為 absolute 或 fixed，該元素為絕對定位。在絕對定位中，盒子會完全從當前流中移除，并且不會再與其有任何聯(lián)系。

作者：大前端世界
鏈接：https://www.jianshu.com/p/3446dd9b22a6

頭條創(chuàng)作挑戰(zhàn)賽#

頁面布局的三大核心：盒子模型、浮動和定位。

今天來學(xué)習(xí)一下盒子模型，我們可以假設(shè)整個網(wǎng)頁就好像是一個盒子，在盒子中分布排列多個大大小小的不同盒子。

盒子模型可以更好的幫助我們布局頁面，使其整齊美觀。

網(wǎng)頁布局的本質(zhì)：利用CSS將盒子在頁面上整齊排列分布。

盒子模型組成：

邊框(border)、外邊距(margin)、內(nèi)邊距(padding)和實際內(nèi)容(content)

盒子模型示意圖

border：邊框。

padding：內(nèi)邊距，盒子內(nèi)容與盒子之間上下左右的距離。

margin：外邊距，盒子與盒子之間上下左右的距離。

content：實際內(nèi)容就是html元素，本篇就不多贅述。

邊框（border）

border可以設(shè)置元素的邊框?qū)傩浴?/p>

border-width：邊框?qū)挾?，也叫邊框粗細。單位是px；

border-style：邊框樣式。常見樣式有三種，solid實線、dashed虛線、dotted點線；

border-color：邊框顏色。

復(fù)合語法：三個屬性之間沒有先后順序。

border：border-width border-style border-color;

單獨修改一條邊框：border-top、border-right、border-bottom、borde-left。

<style>
        div {
            width: 150px;
            height: 150px;
            /* border-width:邊框粗細 */
            border-width: 5px;
            /* border-color：邊框顏色 */
            border-color: purple;
        }
        .boxSolid {
            /* border-style：邊框樣式   solid:實線*/
            border-style: solid;
        }
        .boxDashed {
            /* 虛線邊框 */
            border-style: dashed;
        }
        .boxDotted {
            /* 虛線邊框 */
            border-style: dotted;
        }
        .boxFh {
            border: 5px solid yellowgreen;
        }
        .boxDuli {
            /* 運用了層疊性 */
           border: 5px solid blue;
           border-top: 5px dotted green;
        }
        .boxFour {
            border-top: 5px dotted green;
            border-right: 2px solid  red;
            border-bottom: 4px dashed blue;
            border-left: 3px solid antiquewhite;
        }
    </style>
<div class="boxSolid">solid實線邊框</div><br>
    <div class="boxDashed">dashed虛線邊框</div><br>
    <div class="boxDotted">dotted點線邊框</div><br>
    <div class="boxFh">邊框的復(fù)合寫法</div><br>
    <div class="boxDuli">單獨設(shè)置一條邊框</div><br>
    <div class="boxFour">四條邊框樣式皆不同</div>

測量盒子大小的方法：

第一種方法：在測量盒子的寬高時，直接測量邊框內(nèi)部的寬高，就能得到盒子實際大小。

第二種方法：首先從邊框外部直接測量全部寬高，然后再減去邊框?qū)捀?，就是盒子實際大小。

注意：邊框會影響盒子的實際大小。

盒子寬度=實際內(nèi)容寬度+左邊框的值+右邊框的值。

盒子高度=實際內(nèi)容高度+上邊框的值+下邊框的值。

內(nèi)邊距（padding）

padding：是指在盒子模型中邊框與實際內(nèi)容之間的距離。

例如粉筆盒作為一個盒子，粉筆與粉筆盒子之間的距離就是padding值。

默認狀態(tài)下，盒子中的實際內(nèi)容緊貼盒子的左上角。

padding-top：上內(nèi)邊距。

padding-right：右內(nèi)邊距。

padding-bottom：下內(nèi)邊距。

padding-left：做內(nèi)邊距。

padding屬性復(fù)合寫法時可以有一到四個屬性值。

1個值：代表上右下左四個相同內(nèi)邊距。

2個值：第一個值代表上下相同內(nèi)邊距。第二個值代表左右相同內(nèi)邊距。

3個值：第一個值代表上邊距，第二個值代表左右內(nèi)邊距，第三個值代表下邊距。

4個值：第一個值代表上邊距，第二個值代表右邊距，第三個值代表下邊距、第四個值代表左邊距。

<style>
        div {
            width: 150px;
            height: 150px;
            border: 1px solid black;
        }
        .boxPone {
            padding: 10px;
        }
        .boxPTwo {
            padding: 15px 15px;
        }
        .boxPthree {
            padding: 20px 15px 20px;
        }
        .boxPfour {
            padding: 25px 10px 15px 20px;
        }
        .boxGD {
            padding-top: 30px;
        }
</style>
<div class="boxPone">
  一個屬性值代表<br>上下左右<br>四個相同內(nèi)邊距
</div><br>
<div class="boxPTwo">
      兩個屬性值：第一個數(shù)值代表上下相同的內(nèi)邊距，<br>
      第二個數(shù)值代表左右相同的內(nèi)邊距
</div>
    <br><div class="boxPthree">
      三個數(shù)值：第一個數(shù)值代表上邊距，<br>
      第二個數(shù)值代表左右相同的內(nèi)邊距，<br>
      第三個數(shù)值代表下邊距。
</div>
    <br><div class="boxPfour">
      四個數(shù)值：代表上右下左內(nèi)邊距，順時針排序。
</div>
    <br><div class="boxGD">
      單獨設(shè)置某一方位的內(nèi)邊距，其他方位內(nèi)邊距不變。<br>
      在關(guān)鍵詞padding后加方位詞。<br>
      如padding-top。
</div>

注意：

當盒子有設(shè)置寬高時padding值會影響盒子實際大小。當

當盒子已經(jīng)有了寬高，再添加內(nèi)邊距時，會撐大盒子。

盒子寬度=實際內(nèi)容的寬度+左右邊框兩個寬度+左右padding兩個值。

盒子高度=實際內(nèi)容的高度+上下邊框兩個高度+上下padding兩個值。

當盒子沒有單獨指定寬高時不會撐大盒子。

外邊距（margin）

margin屬性用于設(shè)置外邊距，也就是盒子與盒子之間的距離。

還是拿粉筆盒作為一個盒子的話，margin的值就是粉筆盒與粉筆盒之間的距離。

同內(nèi)邊距一樣，外邊距也同樣是具有上右下左四個方位，順時針排序。

margin-top：上外邊距

margin-right：右外邊距

margin-bottom：下外邊距

margin-left：左外邊距

復(fù)合寫法同內(nèi)邊距一樣，數(shù)值的排列順序也是順時針上右下左。

<style>
div {
            width: 150px;
            height: 150px;
            border: 1px solid black;
        }
        .boxMarginB {
            margin-bottom: 20px;
        }
        .boxMall {
            margin: 10px;
        }
        .boxMtwo {
            margin: 15px 20px;
        }
        .boxMthree {
            margin: 5px 15px 20px;
        }
        .boxMfour {
            margin: 20px 15px 10px 30px;
        }
</style>
<div class="boxMarginB">外邊距</div>
    <div>外邊距</div>
    <div class="boxMall">
        一個數(shù)值
    </div>
    <div class="boxMtwo">兩個數(shù)值</div>
    <div class="boxMthree">三個數(shù)值</div>
    <div class="boxMfour">
        四個數(shù)值
    </div>

當塊級元素盒子有指定的寬度，且左右外邊距設(shè)置為auto時，塊級元素盒子可水平居中。

常見寫法：margin：0 auto; || margin：auto;

.boxCenter {
            /* 使塊級盒子水平居中。 */
            margin: 0 auto;
        }


<div class="boxCenter">水平居中</div>

小貼士：

在嵌套關(guān)系中，父元素和子元素同時具有上外邊距時，父元素會塌陷較大的上外邊距值。

也就是說父元素上外邊距為20px，子元素上外邊距為15px，則只會顯示父元素上外邊距20px，子元素的上外邊距不顯示也不生效。

解決方案：

為父元素定義上邊框；

為父元素定義上內(nèi)邊距；

為父元素添加overflow：hidden。

清除內(nèi)外邊距

默認情況下不同的網(wǎng)頁元素自身會帶有不同的內(nèi)外邊距，且不同瀏覽器的默認值也不統(tǒng)一。

在布局前，首先要設(shè)置全局清除內(nèi)外邊距。在css將第一行寫入該全局選擇器。

* {
padding:0;
margin:0;
}

以上就是今天新的學(xué)習(xí)內(nèi)容，下次再會。

實，CSS就三個大模塊：盒子模型、浮動、定位，其余的都是細節(jié)。要求這三部分，無論如何也要學(xué)的非常精通。

所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內(nèi)容的容器。每個矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。

看透網(wǎng)頁布局的本質(zhì)

網(wǎng)頁布局中，我們是如何把里面的文字，圖片，按照美工給我們的效果圖排列的整齊有序呢？

其實，行內(nèi)元素比如文字類似牛奶，也需要一個盒子把他們裝起來，雙標簽都是一個盒子。有了盒子，我們就可以隨意的，自由的，擺放位置了。

看透網(wǎng)頁布局的本質(zhì)：把網(wǎng)頁元素比如文字圖片等等，放入盒子里面，然后利用CSS擺放盒子的過程，就是網(wǎng)頁布局。

盒子模型（Box Model）

首先，我們來看一張圖，來體會下什么是盒子模型。

所有的文檔元素（標簽）都會生成一個矩形框，我們成為元素框（element box），它描述了一個文檔元素再網(wǎng)頁布局匯總所占的位置大小。因此，每個盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。

盒子邊框（border）

邊框就是那層皮。橘子皮。。柚子皮。。橙子皮。。。

語法：

border : border-width || border-style || border-color

邊框?qū)傩浴O(shè)置邊框樣式（border-style）

邊框樣式用于定義頁面中邊框的風(fēng)格，常用屬性值如下：

none：沒有邊框即忽略所有邊框的寬度（默認值）
solid：邊框為單實線(最為常用的)
dashed：邊框為虛線 
dotted：邊框為點線
double：邊框為雙實線

盒子邊框?qū)懛偨Y(jié)表

表格的細線邊框

以前學(xué)過的html表格邊框很粗，這里只需要CSS一句話就可以美觀起來。讓我們真的相信，CSS就是我們的白馬王子（白雪公主）。

table{ border-collapse:collapse; } collapse 單詞是合并的意思

border-collapse:collapse; 表示邊框合并在一起。

圓角邊框(CSS3)

從此以后，我們的世界不只有矩形。radius 半徑（距離）

語法格式：

border-radius: 左上角 右上角 右下角 左下角;

內(nèi)邊距（padding）

padding屬性用于設(shè)置內(nèi)邊距。是指邊框與內(nèi)容之間的距離。

padding-top:上內(nèi)邊距

padding-right:右內(nèi)邊距

padding-bottom:下內(nèi)邊距

padding-left:左內(nèi)邊距

注意：后面跟幾個數(shù)值表示的意思是不一樣的。

外邊距（margin）

margin屬性用于設(shè)置外邊距。設(shè)置外邊距會在元素之間創(chuàng)建“空白”，這段空白通常不能放置其他內(nèi)容。

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

margin:上外邊距右外邊距下外邊距左外邊

取值順序跟內(nèi)邊距相同。

外邊距實現(xiàn)盒子居中

可以讓一個盒子實現(xiàn)水平居中，需要滿足一下兩個條件：

必須是塊級元素。
盒子必須指定了寬度（width）

然后就給左右的外邊距都設(shè)置為auto，就可使塊級元素水平居中。

實際工作中常用這種方式進行網(wǎng)頁布局，示例代碼如下：

.header{ width:960px; margin:0 auto;}

文字盒子居中圖片和背景區(qū)別

文字水平居中是 text-align: center
盒子水平居中左右margin 改為 auto

text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改為 auto 就闊以了 */

插入圖片我們用的最多比如產(chǎn)品展示類
背景圖片我們一般用于小圖標背景或者超大背景圖片

section img { 
 width: 200px;/* 插入圖片更改大小 width 和 height */
 height: 210px;
 margin-top: 30px; /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
 margin-left: 50px; /* 插入當圖片也是一個盒子 */
 }
aside {
 width: 400px;
 height: 400px;
 border: 1px solid purple;
 background: #fff url(images/sun.jpg) no-repeat;
 
 background-size: 200px 210px; /* 背景圖片更改大小只能用 background-size */
 background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
 }

清除元素的默認內(nèi)外邊距

為了更方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時，可使用如下代碼清除元素的默認內(nèi)外邊距：

* {
 padding:0; /* 清除內(nèi)邊距 */
 margin:0; /* 清除外邊距 */
}

注意：行內(nèi)元素是只有左右外邊距的，是沒有上下外邊距的。內(nèi)邊距，在ie6等低版本瀏覽器也會有問題。

我們盡量不要給行內(nèi)元素指定上下的內(nèi)外邊距就好了。

外邊距合并

使用margin定義塊元素的垂直外邊距時，可能會出現(xiàn)外邊距的合并。

相鄰塊元素垂直外邊距的合并

當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。

嵌套塊元素垂直外邊距的合并

對于兩個嵌套關(guān)系的塊元素，如果父元素沒有上內(nèi)邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發(fā)生合并。

解決方案：

可以為父元素定義1像素的上邊框或上內(nèi)邊距。
可以為父元素添加overflow:hidden。

content寬度和高度

使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。

width和height的屬性值可以為不同單位的數(shù)值或相對于父元素的百分比%，實際工作中最常用的是像素值。

大多數(shù)瀏覽器，如Firefox、IE6及以上版本都采用了W3C規(guī)范，符合CSS規(guī)范的盒子模型的總寬度和總高度的計算原則是：

 /*外盒尺寸計算（元素空間尺寸）*/
 Element空間高度=content height + padding + border + margin
 Element 空間寬度=content width + padding + border + margin
 /*內(nèi)盒尺寸計算（元素實際大小）*/
 Element Height=content height + padding + border （Height為內(nèi)容高度）
 Element Width=content width + padding + border （Width為內(nèi)容寬度）

注意：

1、寬度屬性width和高度屬性height僅適用于塊級元素，對行內(nèi)元素?zé)o效（ img 標簽和 input除外）。

2、計算盒子模型的總高度時，還應(yīng)考慮上下兩個盒子垂直外邊距合并的情況。

3、如果一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會影響本盒子大小。

盒子模型布局穩(wěn)定性

開始學(xué)習(xí)盒子模型，同學(xué)們最大的困惑就是，分不清內(nèi)外邊距的使用，什么情況下使用內(nèi)邊距，什么情況下使用外邊距？

答案是：其實他們大部分情況下是可以混用的。就是說，你用內(nèi)邊距也可以，用外邊距也可以。你覺得哪個方便，就用哪個。

但是，總有一個最好用的吧，我們根據(jù)穩(wěn)定性來分，建議如下：

按照優(yōu)先使用寬度（width）其次使用內(nèi)邊距（padding）再次外邊距（margin）。

 width > padding > margin

原因：

margin 會有外邊距合并還有 ie6下面margin 加倍的bug（討厭）所以最后使用。
padding 會影響盒子大小，需要進行加減計算（麻煩）其次使用。
width 沒有問題（嗨皮）我們經(jīng)常使用寬度剩余法高度剩余法來做。
?

盒子陰影