CSS 盒模型（元素分類、width、height、padding、border、margin）

CSS盒模型

  • 在CSS中盒模型被分為兩種，第一種是W3C的標(biāo)準(zhǔn)模型，第二種是IE怪異盒模型。兩種盒子模型都包括padding、margin、border、content。不同之處在于后者的寬高定義的是可見元素框的尺寸（content還包括border和padding），而不是元素框的內(nèi)容區(qū)尺寸。目前對(duì)于瀏覽器大多數(shù)元素都是基于W3C標(biāo)準(zhǔn)的盒模型，但對(duì)于表單form中的部分元素還是基于IE的怪異盒模型，如 input 里的 radio、checkbox、button 等元素，如果給其設(shè)置 border 和 padding 它們也只會(huì)往元素盒內(nèi)延伸
  • 那么我們?nèi)绾芜M(jìn)行選擇了，通常我們選擇“標(biāo)準(zhǔn)W3C盒子模型”，通過(guò)在網(wǎng)頁(yè)的頂部加上DOCTYPE聲明，如下：
<!DOCTYPE html>
  • 如果不加DOCTYPE聲明，那么各個(gè)瀏覽器會(huì)根據(jù)自己的行為去理解網(wǎng)頁(yè)，即IE瀏覽器會(huì)采用IE盒子模型去解釋你的盒子，而Chrome、Firefox等瀏覽器會(huì)采用標(biāo)準(zhǔn)W3C盒子模型解釋你的盒子，這就導(dǎo)致不同的瀏覽器中顯示的樣式有差異。反之，如果加上了DOCTYPE聲明，那么所有瀏覽器都會(huì)采用標(biāo)準(zhǔn)W3C盒子模型去解釋你的盒子，網(wǎng)頁(yè)就能在各個(gè)瀏覽器中顯示一致了
  • 盒子3D模型，由上到下（由表及里）為：
    • 邊框（border）
    • 內(nèi)容＋填充（content＋padding）
    • 背景圖片（background-image）
    • 背景顏色（background-color）
    • 邊界（margin）
  • 疊加之后就形成我們所看到了盒子模型的平面圖

元素分類

  • 在CSS中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素、內(nèi)聯(lián)元素（又叫行內(nèi)元素）和內(nèi)聯(lián)塊狀元素
  • 常用的塊狀元素有：<div> <p> <h1>...<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form> 
 1 <address>//定義地址
 2 <blockcode>    // 定義計(jì)算機(jī)長(zhǎng)代碼文本
 3 <caption>//定義表格標(biāo)題
 4 <dd>    //定義列表中定義條目
 5 <div>     //定義文檔中的分區(qū)或節(jié)
 6 <dl>    //定義列表
 7 <dt>     //定義列表中的項(xiàng)目
 8 <fieldset> //定義一個(gè)框架集
 9 <form> //創(chuàng)建 HTML 表單
10 <h1>    //定義最大的標(biāo)題
11 <h2>    // 定義副標(biāo)題
12 <h3>     //定義標(biāo)題
13 <h4>     //定義標(biāo)題
14 <h5>     //定義標(biāo)題
15 <h6>     //定義最小的標(biāo)題
16 <hr>     //創(chuàng)建一條水平線
17 <legend>    //元素為 fieldset 元素定義標(biāo)題
18 <li>     //標(biāo)簽定義列表項(xiàng)目
19 <noframes>    //為那些不支持框架的瀏覽器顯示文本，于 frameset 元素內(nèi)部
20 <noscript>    //定義在腳本未被執(zhí)行時(shí)的替代內(nèi)容
21 <ol>     //定義有序列表
22 <ul>    //定義無(wú)序列表
23 <p>     //標(biāo)簽定義段落
24 <pre>     //定義預(yù)格式化的文本
25 <table>     //標(biāo)簽定義 HTML 表格
26 <tbody>     //標(biāo)簽表格主體（正文）
27 <td>    //表格中的標(biāo)準(zhǔn)單元格
28 <tfoot>     //定義表格的頁(yè)腳（腳注或表注）
29 <th>    //定義表頭單元格
30 <thead>    //標(biāo)簽定義表格的表頭
31 <tr>     //定義表格中的行
  • 常用的內(nèi)聯(lián)元素有：<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code> 
 1 <a>     // 可定義超鏈接
 2 <abbr>     // 表示一個(gè)縮寫形式
 3 <acronym>     // 定義只取首字母縮寫
 4 <b>     // 字體加粗
 5 <bdo>     // 可覆蓋默認(rèn)的文本方向
 6 <big>     // 大號(hào)字體加粗
 7 <br>     // 換行
 8 <cite>     // 引用進(jìn)行定義
 9 <code>    // 定義計(jì)算機(jī)代碼文本
10 <dfn>     // 定義一個(gè)定義項(xiàng)目
11 <em>     // 定義為強(qiáng)調(diào)的內(nèi)容
12 <i>     // 斜體文本效果
13 <kbd>     // 定義鍵盤文本
14 <label>     // 自動(dòng)選中和該label標(biāo)簽相關(guān)聯(lián)的表單控件上
15 <q>     // 定義短的引用
16 <samp>     // 定義樣本文本
17 <small>     // 呈現(xiàn)小號(hào)字體效果
18 <span>     // 組合文檔中的行內(nèi)元素
19 <strong> // 加粗
20 <sub>     // 定義下標(biāo)文本
21 <sup>     // 定義上標(biāo)文本
22 <tt>     // 打字機(jī)或者等寬的文本效果
23 <var>    // 定義變量
  • 常用的內(nèi)聯(lián)塊狀元素有：<img> <input> <textarea> <select> <button> <caption> 
1 <caption>   // 定義表格的標(biāo)題
2 <img>     // 向網(wǎng)頁(yè)中嵌入一幅圖像
3 <input>     // 輸入框
4 <textarea>     // 多行的文本輸入控件
5 <select> // 創(chuàng)建單選或多選菜單
6 <button>  // 創(chuàng)建按鈕

塊狀元素（也稱塊級(jí)元素，block）

  • 塊狀元素特點(diǎn)：
    • 每個(gè)塊級(jí)元素都從新的一行開始，并且其后的元素也另起一行
    • 元素的高度、寬度、行高以及頂和底邊距都可以設(shè)置
    • 絕大部分塊狀元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父容器的寬度一致），除非設(shè)定一個(gè)寬度，即從左到右撐滿頁(yè)面，獨(dú)占一行。也有例外的，比如 table，占據(jù)一行的空間，但是寬度是根據(jù)內(nèi)容來(lái)定的
    • 元素觸碰到頁(yè)面邊緣時(shí)，會(huì)自動(dòng)換行
    • 塊狀元素都具有盒模型的特征
  • 設(shè)置display: block就是將元素顯示為塊狀元素
    • 例如a {display: block;}代碼就是將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素，從而使a元素具有塊狀元素特點(diǎn)
  • 注意：
    • 有時(shí)我們看到塊級(jí)元素并沒(méi)有從左到右撐滿頁(yè)面，那是因?yàn)闉g覽器通常會(huì)給標(biāo)簽賦予默認(rèn)的樣式

內(nèi)聯(lián)元素（也稱行內(nèi)元素，inline）

  • 內(nèi)聯(lián)元素特點(diǎn)：
    • 和其它元素都在一行上，不會(huì)改變HTML文檔結(jié)構(gòu)
    • 元素的高度、寬度及頂部和底部填充、邊距不可設(shè)置（左右填充padding-left``padding-right及左右間距margin-left``margin-right是可以設(shè)置的）。但如果設(shè)置了頂部、底部的填充、間距，對(duì)行內(nèi)元素的邊框、背景色會(huì)有影響
    • 元素的寬度就是它包含的文字或圖片的寬度，不可改變
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    p {
        height: 50px;
        background-color: pink;
    }

    span {
        padding: 25px;
        margin: 25px;
        border: 1px solid red;
        background-color: lightgreen;
    }
</style>
</head>
<body>
    <p>block-1</p>
    <span>inline-1</span><span>inline-2</span>
    <p>block-2</p>
</body>
  • 設(shè)置display: inline就是將元素顯示為內(nèi)聯(lián)元素
    • 例如div {display: inline;}代碼就是將塊狀元素div轉(zhuǎn)換為內(nèi)聯(lián)元素，從而使div元素具有內(nèi)聯(lián)元素特點(diǎn)
  • 注意：
    • 盒子模型，意思是指具備內(nèi)容、填充、邊框、邊界這些屬性，行內(nèi)元素也擁有，所以具備盒子模型的特征，但是默認(rèn)情況下是無(wú)法對(duì)寬度、高度以及頂部、底部的填充、間距進(jìn)行設(shè)置的，需要設(shè)置display:block;，改變行內(nèi)元素以塊狀元素呈現(xiàn)，從而進(jìn)行設(shè)置
    • 塊狀元素可以包含行內(nèi)元素和塊狀元素，行內(nèi)元素只能包含文本和行內(nèi)元素。但是在HTML5中，由于使用了內(nèi)容模型，<a>元素也可以包含塊級(jí)元素
    <style type="text/css">
    * {padding: 0; margin: 0;}

    a h4 {
      width: 100px;
      height: 50px;
      background-color: lightblue;
    }

    a p {
      height: 50px;
      background-color: lightgreen;
    }
    </style>
</head>
<body>
<a href="#">
    <h4>Headline text</h4>
    <p>Paragraph text</p>
</a>
</body>

內(nèi)聯(lián)元素之間的間距問(wèn)題

  • 當(dāng)行內(nèi)元素之間有“回車”、“tab”、“空格”時(shí)就會(huì)出現(xiàn)間隙
  • 解決辦法：
    • 寫在一行，之間不要有空格之類的符號(hào)
    • 使用font-size，設(shè)置內(nèi)聯(lián)元素的父元素字體大小為 0，然后設(shè)置內(nèi)聯(lián)元素字體大小。如下
// 舉例
<title>行內(nèi)元素</title>
<style type="text/css">

body {
    font-size: 0px;    
}

a, span, em {
    background: pink; /*設(shè)置a、span、em標(biāo)簽背景顏色都為粉色*/
    font-size: 16px;
}

</style>
</head>
<body>
<a >百度</a>
<a >慕課網(wǎng)</a>
<span>33333</span>
<span>44444</span><em>555555</em> // 寫在一行
</body>

內(nèi)聯(lián)塊狀元素（inline－block）

  • 內(nèi)聯(lián)塊狀元素就是同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)，代碼display: inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素（CSS2.1新增）
  • 內(nèi)聯(lián)塊狀元素特性：
    • 默認(rèn)不占據(jù)一行，默認(rèn)寬度為內(nèi)容寬度
    • 設(shè)置的上下 padding、margin、border 占據(jù)文檔空間
    • 水平排列按照 base-line 對(duì)齊，且元素之間會(huì)存在一個(gè)“空”元素的縫隙
    • 可以用 vertical-align 設(shè)置垂直對(duì)齊
    • 可以設(shè)置 text-align 屬性有效
    • 會(huì)形成一個(gè)BFC（塊級(jí)格式化上下文）
  • 總結(jié)：一個(gè)擁有正常盒模型的行內(nèi)元素，既擁有 inline 的特點(diǎn)，也有 block 的特性
  • 如何去除縫隙？
    • 修改 html 不換行
    • 父元素設(shè)置 font-size: 0;
    • 設(shè)置負(fù)margin值
    • 元素設(shè)置浮動(dòng)
  • 高度不一致的 inline-block 的對(duì)齊，設(shè)置 vertical-align ，比如頂端對(duì)齊vertical-align: top;

如何實(shí)現(xiàn)瀏覽器兼容版的inline-block顯示？

  • display:inline-block;在IE6、IE7下只有設(shè)置在默認(rèn)顯示方式為inline的元素上才會(huì)生效，該如何實(shí)現(xiàn)兼容IE6、IE7的通用的方式？
  • IE6、IE7支持對(duì)HTML行內(nèi)元素設(shè)置inline-block。實(shí)際上只是看起來(lái)支持而已，IE6、IE7并不識(shí)別inline-block這個(gè)屬性值，只是觸發(fā)了layout，讓行內(nèi)元素有了inline-block的表征，比如說(shuō)：行內(nèi)顯示且可設(shè)置寬高等等。而對(duì)HTML塊級(jí)元素設(shè)置inline-block，也只是觸發(fā)了layout，對(duì)塊級(jí)元素設(shè)置行內(nèi)塊級(jí)屬性的目的沒(méi)有達(dá)到。
  • 那么在IE6、IE7下，怎么實(shí)現(xiàn)塊級(jí)元素的inline-block屬性值設(shè)置呢？
  • 常見有2種方法：
  • 1.先使用display:inline-block;屬性觸發(fā)塊元素，然后再定義display:inline，讓塊元素呈遞為行內(nèi)對(duì)象（兩個(gè)display要先后放在兩個(gè)CSS聲明中才有效果，這是IE的一個(gè)經(jīng)典bug，如果先定義了display:inline-block;然后再將display設(shè)回inline或block，layout不會(huì)消失），代碼如下：
div {display:inline-block;}
div {display:inline;}
  • 2.直接讓塊元素設(shè)置為行內(nèi)對(duì)象呈遞（設(shè)置屬性display:inline），然后觸發(fā)塊元素的layout（如：zoom:1 或float屬性等），代碼如下：
div { display:inline-block; _zoom:1; _display:inline;}   /* 推薦IE6 */
div { display:inline-block; *zoom:1; *display:inline;}   /* 推薦IE6或IE7 */

inline-block底部空隙

  • inline-block元素在塊級(jí)元素中留空隙就是因?yàn)閳D像的默認(rèn)垂直對(duì)齊方式是基線對(duì)齊（基線對(duì)齊在原理上圖像底邊與匿名文本大寫英文字母X的底邊對(duì)齊）；而匿名文本是有行高的，所以X的底邊距離行框有一段距離，這段距離就是圖像留出的空隙
  • 解決這個(gè)問(wèn)題有以下幾個(gè)解決辦法：
    • display: block; ：因?yàn)榇怪睂?duì)齊方式只能作用于替換元素和行內(nèi)元素，更改為塊級(jí)元素，會(huì)使垂直對(duì)齊方式失效
    • 父級(jí)的line-height: 0;：這樣使匿名文本與行框的距離為0
    • vertical-align: top/middle/bottom;
    <style type="text/css">
    /*
    使用 inline-block 元素的時(shí)候，常會(huì)遇到兩個(gè) bug：
    1. 兩個(gè)inline-block 元素之間如果有空格、回車、tab，那么在頁(yè)面上就有一個(gè)空隙
       解決辦法：將父元素的 font-size 設(shè)置為 0，然后在 inline-block 元素中將 font-size 設(shè)置為需要的大小 

    2. 兩個(gè)不同高度的 inline-block 元素?zé)o法對(duì)齊，或者下面無(wú)緣無(wú)故多出幾像素
       解決辦法：改變 inline-block 元素的 vertical-align，一般改為 top 或 middle
    */
    .box {
        font-size: 0;
        background-color: lightblue;
    }

    .box > img {
        vertical-align: top;
        width: 100px;              
    }
    </style>
</head>
<body>
<div class="box">
    <\img src="http://t.388g.com/uploads/allimg/160412/4-160412123F3.jpg">
    <\img style="width: 140px" src="http://t.388g.com/uploads/allimg/160412/4-160412123F3.jpg">
</div>
</body>

盒模型－寬度和高度（width、height）

  • 盒模型寬度和高度和我們平常所說(shuō)的物體的寬度和高度理解是不一樣的，css內(nèi)定義的寬（width）和高（height），指的是填充里的內(nèi)容范圍
  • 因此一個(gè)元素實(shí)際寬度（盒子的寬度）= 左邊界margin-left＋左邊框border-left＋左填充padding-left＋內(nèi)容寬度width＋右填充padding-right＋右邊框border-right＋右邊界margin-right
  • width／height可設(shè)置的屬性值：
    • auto：默認(rèn)值，瀏覽器可計(jì)算出實(shí)際的寬度／高度
    • length：使用px、cm等單位定義寬度／高度
    • %：定義基于包含塊（父元素）寬度的百分比寬度／高度
    • inherit：從父元素繼承width／height屬性的值
    • 應(yīng)用于塊狀元素和內(nèi)聯(lián)塊狀元素。無(wú)繼承性
  • 引申：
    • max-width：設(shè)置元素的最大寬度（不包括填充、邊框或頁(yè)邊距）
    • min-width：設(shè)置元素的最小寬度（不包括填充、邊框或頁(yè)邊距）
    • max-height：設(shè)置元素的最大高度（不包括填充、邊框或頁(yè)邊距）
    • min-height：設(shè)置元素的最小高度（不包括填充、邊框或頁(yè)邊距）
    • 當(dāng)最小寬度（高度）大于最大寬度（高度）時(shí)，以最小寬高的值為準(zhǔn)
    • 應(yīng)用于塊狀元素和內(nèi)聯(lián)塊狀元素。無(wú)繼承性

關(guān)于Div的寬度與高度的100%設(shè)定

  • 觀察下面的例子：
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }

    body{
        background-color: #ccc;
    }
    
    /*這里為什么不是我們預(yù)想的那樣，.container 高度并沒(méi)有充滿父元素 body*/
    /*事實(shí)上，由于 .container 中沒(méi)有內(nèi)容，我們都看不到它*/
    .container{
        height: 100%;
        background-color: lightblue;
    }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
  • div的100%是從其上一級(jí)div的寬高繼承來(lái)的，有一點(diǎn)很關(guān)鍵，就是要設(shè)置div100%顯示，必須設(shè)置其上一級(jí)div的寬度或高度，否則無(wú)效。舉例說(shuō)明：父div(deman)寬300高200，子div(cc)如果在這個(gè)條件下設(shè)置divcc的寬高都為100%的話，那cc的確切大小就是父div的大小（寬300高200），在嘗試中我們還會(huì)發(fā)現(xiàn)，div顯示會(huì)受自身和其上一級(jí)div的padding和margin影響，而其實(shí)際寬高不受影響
  • 前面總得有個(gè)容器說(shuō)明它的高度是多少。這樣的話div才能按比例100%繼承上一級(jí)的高度。可惜的是瀏覽器一般默認(rèn)解釋為內(nèi)容的高度，而不是100%。但是只要為html和body設(shè)置高度為100%就可以了：html,body{ height:100%; }，這樣之后div會(huì)按比例來(lái)繼承上一級(jí)的高度了，僅僅設(shè)置的div元素的height: 100%;沒(méi)有效果
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }

    /*有一點(diǎn)需要注意的是，html 元素默認(rèn)寬度是100%，即整行；但是高度并不是100%，而僅僅是一行而已*/
    /*所以要想實(shí)現(xiàn)撐滿整個(gè)頁(yè)面，必須顯式地設(shè)置高度為100%*/
    html, body, .container{
        height: 100%;
    }

    body{
        background-color: #ccc;
    }

    .container{
        background-color: lightblue;
    }
    </style>
</head>
<body>
    <div class="container"></div>
</body>

盒模型－填充（padding）

  • 元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為填充。填充也可以分為上、右、下、左（順時(shí)針），該屬性可以有1到4個(gè)值
// 順序一定不要搞混
div {padding: 20px 10px 15px 30px;}

// 分開寫，如下
div {
   padding-top: 20px;
   padding-right: 10px;
   padding-bottom: 15px;
   padding-left: 30px;
}

// 如果上、右、下、左的填充都為10px，可以這樣寫
div {padding:10px;}

// 如果上下填充一樣為10px，左右一樣為20px，可以這樣寫
div {padding:10px 20px;}

// 如果上填充是10px，左右一樣為20px，下填充為5px，可以這樣寫
div {padding:10px 20px 5px;}
  • 可以設(shè)置的值包括：
    • length：規(guī)定以具體單位計(jì)的填充值，比如像素、厘米等。默認(rèn)值是 0px
    • %：基于父元素的寬度的百分比的填充
    • inherit：從父元素繼承 padding值
    • 應(yīng)用于所有元素。無(wú)繼承性
  • 注意：
    • 對(duì)于行內(nèi)元素，左內(nèi)邊距應(yīng)用到元素的開始處，右內(nèi)邊距應(yīng)用到元素的結(jié)尾處，上下內(nèi)邊距不影響行高
    • 負(fù)值是不允許的
.box a{display: inline-block; width: 50px; height: 25px; padding-top: 40px;｝
// 如上，padding的設(shè)置會(huì)影響元素實(shí)際的顯示效果，瀏覽器中顯示 a 元素對(duì)象的高為 65px，但實(shí)際上，a的height還是為 25px

盒模型－邊框（border）

  • 邊框是一條以空格分隔的集合樣式，包括邊框粗細(xì)（邊框?qū)挾龋⑦吙蝾伾瓦吙驑邮剑蚁群箜樞驘o(wú)關(guān)
border: border-width border-color border-style
border: 1px solid red;


// border-width：設(shè)置一個(gè)元素的四個(gè)邊框的寬度。此屬性可以有一到四個(gè)值
// 可設(shè)置的屬性值包括：this（細(xì)的邊框）、medium（默認(rèn)值。中等的邊框）、thick（定義粗的邊框）、length（自定義邊框的寬度）、inherit
border-width: thin medium thick 10px;
// 邊框的寬度不能為負(fù)，不能指定為百分比值


// border-style：設(shè)置一個(gè)元素的四個(gè)邊框的樣式。此屬性可以有一到四個(gè)值
// 如果一個(gè)邊框沒(méi)有樣式，邊框?qū)⒏静粫?huì)存在
// 可設(shè)置的屬性值包括：none（定義無(wú)邊框）、hidden（與 “none” 相同。不過(guò)應(yīng)用于表格時(shí)除外，對(duì)于表格，hidden 用于解決邊框沖突）、dotted（點(diǎn)狀邊框）、dashed（虛線）、solid（實(shí)線）、double（雙線。雙線的寬度等于 border-width 的值）、groove（ 3D 凹槽邊框。其效果取決于 border-color 的值）、ridge（3D 壟狀邊框。其效果取決于 border-color 的值）、inset（3D inset 邊框。其效果取決于 border-color 的值）、outset（3D outset 邊框。其效果取決于 border-color 的值）、inherit
border-style: dotted solid double;


// border-color：設(shè)置一個(gè)元素的四個(gè)邊框顏色。此屬性可以有一到四個(gè)值
// 可設(shè)置的屬性值包括：color（通常設(shè)為十六進(jìn)制顏色）、transparent（指定邊框的顏色應(yīng)該是透明的）、inherit
// 默認(rèn)的邊框顏色是元素本身的前景色，即元素的文本顏色；如果元素沒(méi)有任何文本，則邊框顏色是其父元素的文本顏色
// 但是，在表格中，若只設(shè)置 border-style，而不設(shè)置 border，則邊框顏色為黑色，而不與文本顏色相同
// border-style 屬性要聲明到 border-color 屬性之前。元素必須在改變其顏色之前獲得邊框
border-color: red green;
  • 實(shí)例：
// 如下面代碼為 div標(biāo)簽來(lái)設(shè)置邊框粗細(xì)為2px、樣式為實(shí)心的紅色邊框
div {
    border:2px solid red;
}
上面是border代碼的縮寫形式，也可以分開寫成
div {
    border-width: 2px;
    border-style: solid;
    border-color: red;
}
// border屬性除了可以設(shè)置上面的三個(gè)屬性值，還可以設(shè)置 inherit（指定應(yīng)該從父元素繼承border屬性值）

// 縮寫：下面這三種屬性都是可以縮寫的，順序依次為 上、右、下、左
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red orange yellow green;
// 注意：boder 它是 border-width、border-style、border-color的縮寫形式，針對(duì)的是上、右、下、左四個(gè)方向的邊框，并不能單獨(dú)為各個(gè)方向設(shè)置邊框樣式
  • 邊框單邊：
border-top/border-right/border-bottom/border-left
  • 12種邊框樣式：
border-width:
    border-top-width    border-right-width
    border-bottom-width    border-left-width

border-style:
    border-top-style    border-right-style
    border-bottom-style    border-left-style

border-color：
    border-top-color    border-right-color
    border-bottom-color    border-left-color
  • 多顏色邊框：
border-colors:<color><color>……

border: 10px solid black;
-moz-border-top-colors: red green;
-moz-border-right-colors: green yellow;
-moz-border-bottom-colors: yellow blue;
-moz-border-left-colors: blue red;  
// 只有firefox支持，需要加 -moz- 前綴，且只能四條邊分開寫，否則無(wú)效
  • 注意：
    • 邊框繪制在元素背景之上（有兼容問(wèn)題）
    • 同一元素的邊框相交處是斜線
    • 可以用邊框?qū)崿F(xiàn)三角形
    • 行內(nèi)元素的上下邊框由于不影響行高，不影響布局；左右邊框會(huì)影響布局

盒模型－邊界（margin）

  • 設(shè)置外邊距 margin 會(huì)在元素外創(chuàng)建額外的空白，空白通常指不能放其他元素的區(qū)域，而且在這個(gè)區(qū)域中可以看到父元素的背景。邊界也可以分為上、右、下、左（順時(shí)針）
  • 填充（padding）與邊界（margin）的區(qū)別：padding在邊框里，margin在邊框外
// 順序一定不要搞混
div{margin:20px 10px 15px 30px;}

// 分開寫，如下
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

// 如果上、右、下、左的邊界都為10px，可以這樣寫
div{margin:10px;}

// 如果上下邊界一樣為10px，左右一樣為20px，可以這樣寫
div{margin:10px 20px;}

// 如果上邊界是10px，左右一樣為20px，下邊界為5px，可以這樣寫
div{margin:10px 20px 5px;}
  • 可以設(shè)置的值包括：
    • auto：瀏覽器計(jì)算外邊距
    • length：規(guī)定以具體單位計(jì)的外邊距值，比如像素、厘米等。默認(rèn)值是 0px
    • %：基于父元素的寬度的百分比的外邊距
    • inherit：從父元素繼承 margin值
    • 應(yīng)用于所有元素。無(wú)繼承性
  • 注意：
    • 外邊距可以應(yīng)用到行內(nèi)元素，上下外邊距對(duì)行高沒(méi)有任何影響。由于上下外邊距實(shí)際上是透明的，所以這個(gè)聲明沒(méi)有任何視覺(jué)效果。左外邊距應(yīng)用到元素開始處；右外邊距應(yīng)用到元素結(jié)束處
    • 負(fù)值是允許的
    • 相鄰元素（毗鄰元素）的的邊界會(huì)被合并（以值大的為準(zhǔn)），更多詳見：MDN 外邊距合并

引申

// border-radius 圓角邊框：是一個(gè)最多可指定四個(gè) border -*- radius 屬性的復(fù)合屬性。每個(gè)半徑的四個(gè)值的順序是：左上角，右上角，右下角，左下角（順時(shí)針）
// 語(yǔ)法： border-radius: <length>{1,4}[/<length>{1,4}]?
// 實(shí)例：
border-radius: 10px;     // 注意：設(shè)置的是圓角直徑
border-radius: 10px 20px;   // 如果沒(méi)有反斜杠則水平和垂直方向相等。這里表示左上角和右下角圓角半徑為10px，右上角和左下角半徑為20px
border-radius: 10px/20px;   // 如果反斜杠存在，前面的值是水平方向的半徑，后面的值是垂直方向的半徑。這里表示四個(gè)圓角的半徑均為 10px/20px
// 圓角單角：
// border-top-left-radius / border-top-right-radius / border-bottom-right-radius / border-bottom-left-radius
border-top-left-radius: 10px 20px;   // 圓角根據(jù)水平方向的半徑和豎直方向的半徑來(lái)確定。注意：寫圓角單角時(shí)不可加反斜杠 /
// 可設(shè)置的屬性值包括：none（默認(rèn)）、length（可以是具體值，也可以是百分比，但不是負(fù)數(shù)）
// border-radius 是否生效與是否設(shè)置了邊框 border 無(wú)關(guān)
// 重置 border-radius 沒(méi)有圓角，使用 none 無(wú)效，需要取值 0
// border-radius對(duì) <img> 沒(méi)有任何效果
// 兼容性：IE8-不支持
// 內(nèi)徑外徑：border-radius內(nèi)徑 = 外徑 - 對(duì)應(yīng)的邊框?qū)挾取．?dāng)border-radius半徑值小于等于邊框?qū)挾葧r(shí)，元素沒(méi)有內(nèi)徑效果
// 特殊圖形：
// 圓形：元素的寬高相同，且圓角半徑為寬高的一半
div{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
// 半圓：元素寬高不同，且圓角半徑與寬高要配合
div{
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0;
}
// 扇形：元素寬高及一個(gè)圓角半徑相同
div{
    width: 50px;
    height: 50px;
    border-radius: 50px 0 0 0;
}  
// 橢圓：元素寬高不同，且水平和垂直半徑分別對(duì)應(yīng)寬高
div{
    width: 120px;
    height: 80px;
    border-radius: 120px/80px;
}    


// border-image 邊界圖片：速記屬性
// 語(yǔ)法：
border-image: none; // 默認(rèn)
border-image: border-image-source || border-image-slice [ / border-image-width? | / border-image-outset ]? || border-image-repeat;
// 兼容性：IE10-不支持
// 該屬性的作用是用來(lái)替代 border-style 的，若 border-image 為 none，則顯示border-style 的值
// 實(shí)例：
border-image: url('img.img') 27 fill / 27 / 27px repeat;


// border-image-source：邊框的圖片路徑
border-image-source:url('test.img');


// border-image-slice：圖片邊框四條切割線的位置
border-image-slice:  <number> | <percentage> fill
// 不給寫單位，具體值默認(rèn)單位是 px
// 四值方向是上右下左，代表切割線的方向，切割的分別是高寬高寬
// 圖片邊框是在邊框范圍內(nèi)顯示的，若邊框?qū)挾炔坏扔趕lice切片值，則圖片邊框會(huì)按比例放大縮小，以使圖片邊框正好顯示在邊框范圍內(nèi)
// 若slice值為負(fù)，或大于盒子的寬度或高度會(huì)被100%，四個(gè)角將顯示整個(gè)背景圖片
// 若右切和左切大于盒子寬度，則上中和下中部分為空；若上切和下切大于盒子高度，則左中和右中部分為空


// border-image-width：邊框?qū)挾?border-image-width: <length> | <percentage> | <number> | auto  
// 若指定則邊框圖片寬度由該值確定，否則由盒子的邊框?qū)挾葋?lái)確定
// 可以用具體像素、數(shù)字(表示幾倍)以及百分比來(lái)表示
// 遵循四值順序


// border-image-outset：邊框圖像區(qū)域超出邊框的量
border-image-outset: 0;  // 默認(rèn)
border-image-outset: <length> | <number>
// 可以用具體像素和數(shù)字(表示幾倍)來(lái)表示
// 遵循四值順序


// border-image-repeat：邊框圖片的排列方式
border-image-repeat: stretch(拉伸，默認(rèn)值) | repeat(重復(fù)) | round(平鋪) [1,2]
// 第一個(gè)值表示水平方向的排列方式，第二個(gè)值表示垂直方向的排列方式
// repeat 是邊框中間向兩端平鋪，可能造成兩端邊緣被切的現(xiàn)象
// round會(huì)對(duì)邊框背景圖的切片進(jìn)行縮放，使其正好顯示


// 輪廓outline處在邊框邊界的外面，它不像邊框那樣參與到文檔流中，因此輪廓出現(xiàn)或消失時(shí)不會(huì)影響文檔流，即不會(huì)導(dǎo)致文檔的重新顯示。利用輪廓，瀏覽器可以合并部分輪廓，創(chuàng)建一個(gè)連續(xù)但非矩形的形狀。默認(rèn)地，輪廓是一個(gè)動(dòng)態(tài)樣式，只有元素獲取到焦點(diǎn)或被激活時(shí)呈現(xiàn)
// outline 輪廓：輪廓 outline 類似于邊框樣式的 border 屬性，允許一次完成輪廓樣式、寬度和顏色的設(shè)置
// 由于給定輪廓必須采用某種統(tǒng)一的樣式、寬度和顏色，所以 outline 是關(guān)于輪廓的唯一簡(jiǎn)寫屬性
// 對(duì)于輪廓沒(méi)有諸如 outline-top 或 outline-right 之類的屬性
// outline中并沒(méi)有包括outline-offset，需要對(duì)outline-offset進(jìn)行單獨(dú)設(shè)置
// 語(yǔ)法：
outline: [<outline-color> || <outline-style> || <outline-width>] | inherit
// 無(wú)初始值
// 兼容性：IE7-瀏覽器不支持
// 應(yīng)用于所有元素，無(wú)繼承性
// 實(shí)例：
outline: green dotted thick;
// 注意：outline不是元素尺寸的一部分，因此元素的寬度和高度屬性不包含輪廓的寬度。
// outline 和 box-shadow 一樣不會(huì)占據(jù)文檔流空間
/*
輪廓樣式
outline-style: none（默認(rèn)） | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit（與邊框不同的是，值少了一個(gè) hidden）
應(yīng)用于所有元素，無(wú)繼承性

輪廓寬度
與邊框類似，輪廓寬度不能為負(fù)數(shù)，也不能指定為百分比值
outline-width: thin | medium（默認(rèn)） | thick | <length> | inherit
應(yīng)用于所有元素，無(wú)繼承性
如果輪廓的樣式是 none，則輪廓寬度計(jì)算值為 0
初始值: invert（IE）、前景色（其它瀏覽器）
應(yīng)用于所有元素，無(wú)繼承性

輪廓顏色
與邊框不同，輪廓顏色有關(guān)鍵字 invert 反色輪廓，代表對(duì)輪廓所在的像素完全反色轉(zhuǎn)換，使輪廓在不同的背景顏色中都可見
但實(shí)際上invert關(guān)鍵字只有IE瀏覽器支持，其它瀏覽器的輪廓顏色是元素本身的前景色
outline-color: <color> | invert | inherit

輪廓偏移
輪廓偏移用來(lái)定義輪廓的偏移位置的數(shù)值。當(dāng)參數(shù)值為正數(shù)時(shí)，表示輪廓向外偏移；當(dāng)參數(shù)值為負(fù)值時(shí)，表示輪廓向內(nèi)偏移
outline-offset: length | inherit
默認(rèn)值為 0
應(yīng)用于所有元素，無(wú)繼承性
兼容性：IE瀏覽器不支持
*/


// box-shadow 盒陰影：可設(shè)置一個(gè)或多個(gè)下拉陰影的框，該屬性是一個(gè)用逗號(hào)分隔陰影的列表（即可疊加，形成多陰影），每個(gè)陰影由 2-4 個(gè)長(zhǎng)度值、一個(gè)可選的顏色值和一個(gè)可選的 inset 關(guān)鍵字來(lái)規(guī)定。省略長(zhǎng)度的值是 0。
box-shadow: none;   // 默認(rèn)
box-shadow: 10px 10px 4px 3px #ccc;    // 外陰影，此例中各個(gè)參數(shù)分別代表：水平偏移（必需）、垂直偏移（必需）、模糊半徑（可選）、陰影大小（可選）、陰影顏色（可選，默認(rèn)和文本顏色一致）
box-shadow: inset 0px 0px 4px #red;    // 內(nèi)陰影
// 注意：陰影只是一種修飾，不占用空間
//  可以使用多重陰影，但使用過(guò)多會(huì)造成性能差
// 最先寫的陰影在最頂層
// 邊框在內(nèi)陰影之上，內(nèi)陰影在背景圖片之上，背景圖片在背景色之上，背景色在外陰影之上
// 內(nèi)陰影對(duì) <img> 元素沒(méi)有任何效果
// 該屬性與 border-radius 一脈相承，若通過(guò) border-radius 設(shè)置為圓角，則 box-shadow 的最終呈現(xiàn)也將是圓角
// 模擬邊框
border: 1px solid #000;
box-shadow: 0 0 0 1px #000;


// 在W3C的標(biāo)準(zhǔn)模型下，寬度和高度僅僅包含了內(nèi)容寬度，除去了邊框和內(nèi)邊距兩個(gè)區(qū)域，這樣為web設(shè)計(jì)師處理效果帶來(lái)了不少麻煩
// box-sizing：CSS3新增了一個(gè)盒模型屬性box-sizing，能夠事先定義盒模型的尺寸解析方式（設(shè)置width、height指定的區(qū)域）
box-sizing: border-box;  // 此時(shí)給元素設(shè)置的寬度除了原先的內(nèi)容 content，還包括填充 padding 以及邊框 border
// 可設(shè)置的屬性值包括：content-box（默認(rèn)值。這是CSS2.1指定的寬度和高度的行為。指定元素的寬度和高度（最小/最大屬性）適用于box的寬度和高度。元素的填充和邊框布局和繪制指定寬度和高度除外）、border-box（指定寬度和高度（最小/最大屬性）確定元素邊框box。也就是說(shuō)，對(duì)元素指定寬度和高度包括 padding 和border 的指定。內(nèi)容的寬度和高度減去各自雙方該邊框和填充的寬度從指定的“寬度”和“高度”屬性計(jì)算）、inherit
// 應(yīng)用于塊級(jí)元素和內(nèi)聯(lián)塊狀元素。無(wú)繼承性
// 兼容性：IE7-瀏覽器不支持
// 只有firefox瀏覽器支持 padding-box 屬性值
// IE瀏覽器在 getComputedStyle 得到 width/height 是按照標(biāo)準(zhǔn)模式計(jì)算的，而不論 box-sizing 的取值
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 227,702評(píng)論 6贊 531
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,143評(píng)論 3贊 415
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人，你說(shuō)我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 175,553評(píng)論 0贊 373
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我，道長(zhǎng)，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,620評(píng)論 1贊 307
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 71,416評(píng)論 6贊 405
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 54,940評(píng)論 1贊 321
  • 城市分裂傳說(shuō)
    那天，我揣著相機(jī)與錄音，去河邊找鬼。 笑死，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,024評(píng)論 3贊 440
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 42,170評(píng)論 0贊 287
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 48,709評(píng)論 1贊 333
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,597評(píng)論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,784評(píng)論 1贊 369
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,291評(píng)論 5贊 357
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,029評(píng)論 3贊 347
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,407評(píng)論 0贊 25
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,663評(píng)論 1贊 280
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,403評(píng)論 3贊 390
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,746評(píng)論 2贊 370

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,774評(píng)論 1贊 92
  • 本課來(lái)自http://www.imooc.com/learn/9請(qǐng)不要用作商業(yè)用途。 HTML5 HTML介紹 H...
    PYLON閱讀 3,271評(píng)論 0贊 5
  • CSS格式化排版 1、字體 我們可以使用css樣式為網(wǎng)頁(yè)中的文字設(shè)置字體、字號(hào)、顏色等樣式屬性。下面我們來(lái)看一個(gè)例...
    張文靖同學(xué)閱讀 1,297評(píng)論 0贊 3
  • 一.CSS描述 CSS全稱為“層疊樣式表(Cascading Style Sheets)”，它主要是用于定義HTM...
    snowy_sunny閱讀 1,088評(píng)論 0贊 4
  • CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器...
    百作不死的學(xué)習(xí)閱讀 1,179評(píng)論 0贊 7