CSS 盒模型（元素分類动漾、width、height荠锭、padding旱眯、border、margin）

CSS盒模型

  • 在CSS中盒模型被分為兩種，第一種是W3C的標準模型删豺，第二種是IE怪異盒模型共虑。兩種盒子模型都包括padding、margin呀页、border妈拌、content。不同之處在于后者的寬高定義的是可見元素框的尺寸（content還包括border和padding）赔桌，而不是元素框的內容區(qū)尺寸供炎。目前對于瀏覽器大多數(shù)元素都是基于W3C標準的盒模型，但對于表單form中的部分元素還是基于IE的怪異盒模型疾党，如 input 里的 radio音诫、checkbox、button 等元素雪位，如果給其設置 border 和 padding 它們也只會往元素盒內延伸
  • 那么我們如何進行選擇了竭钝，通常我們選擇“標準W3C盒子模型”，通過在網(wǎng)頁的頂部加上DOCTYPE聲明雹洗，如下：
<!DOCTYPE html>
  • 如果不加DOCTYPE聲明香罐，那么各個瀏覽器會根據(jù)自己的行為去理解網(wǎng)頁，即IE瀏覽器會采用IE盒子模型去解釋你的盒子时肿，而Chrome庇茫、Firefox等瀏覽器會采用標準W3C盒子模型解釋你的盒子，這就導致不同的瀏覽器中顯示的樣式有差異螃成。反之旦签，如果加上了DOCTYPE聲明，那么所有瀏覽器都會采用標準W3C盒子模型去解釋你的盒子寸宏，網(wǎng)頁就能在各個瀏覽器中顯示一致了
  • 盒子3D模型宁炫，由上到下（由表及里）為：
    • 邊框（border）
    • 內容＋填充（content＋padding）
    • 背景圖片（background-image）
    • 背景顏色（background-color）
    • 邊界（margin）
  • 疊加之后就形成我們所看到了盒子模型的平面圖

元素分類

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

塊狀元素（也稱塊級元素，block）

  • 塊狀元素特點：
    • 每個塊級元素都從新的一行開始罩阵，并且其后的元素也另起一行
    • 元素的高度竿秆、寬度、行高以及頂和底邊距都可以設置
    • 絕大部分塊狀元素寬度在不設置的情況下稿壁，是它本身父容器的100%（和父容器的寬度一致）幽钢，除非設定一個寬度，即從左到右撐滿頁面常摧，獨占一行搅吁。也有例外的，比如 table落午，占據(jù)一行的空間谎懦，但是寬度是根據(jù)內容來定的
    • 元素觸碰到頁面邊緣時，會自動換行
    • 塊狀元素都具有盒模型的特征
  • 設置display: block就是將元素顯示為塊狀元素
    • 例如a {display: block;}代碼就是將內聯(lián)元素a轉換為塊狀元素溃斋，從而使a元素具有塊狀元素特點
  • 注意：
    • 有時我們看到塊級元素并沒有從左到右撐滿頁面界拦，那是因為瀏覽器通常會給標簽賦予默認的樣式

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

  • 內聯(lián)元素特點：
    • 和其它元素都在一行上梗劫，不會改變HTML文檔結構
    • 元素的高度享甸、寬度及頂部和底部填充、邊距不可設置（左右填充padding-left``padding-right及左右間距margin-left``margin-right是可以設置的）梳侨。但如果設置了頂部蛉威、底部的填充、間距走哺，對行內元素的邊框蚯嫌、背景色會有影響
    • 元素的寬度就是它包含的文字或圖片的寬度，不可改變
    <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>
  • 設置display: inline就是將元素顯示為內聯(lián)元素
    • 例如div {display: inline;}代碼就是將塊狀元素div轉換為內聯(lián)元素丙躏，從而使div元素具有內聯(lián)元素特點
  • 注意：
    • 盒子模型择示，意思是指具備內容、填充晒旅、邊框栅盲、邊界這些屬性，行內元素也擁有废恋，所以具備盒子模型的特征谈秫，但是默認情況下是無法對寬度、高度以及頂部拴签、底部的填充孝常、間距進行設置的，需要設置display:block;蚓哩，改變行內元素以塊狀元素呈現(xiàn)构灸，從而進行設置
    • 塊狀元素可以包含行內元素和塊狀元素，行內元素只能包含文本和行內元素岸梨。但是在HTML5中喜颁，由于使用了內容模型，<a>元素也可以包含塊級元素
    <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>

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

  • 當行內元素之間有“回車”曹阔、“tab”半开、“空格”時就會出現(xiàn)間隙
  • 解決辦法：
    • 寫在一行，之間不要有空格之類的符號
    • 使用font-size赃份，設置內聯(lián)元素的父元素字體大小為 0寂拆，然后設置內聯(lián)元素字體大小奢米。如下
// 舉例
<title>行內元素</title>
<style type="text/css">

body {
    font-size: 0px;    
}

a, span, em {
    background: pink; /*設置a、span纠永、em標簽背景顏色都為粉色*/
    font-size: 16px;
}

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

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

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

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

  • display:inline-block;在IE6嫌佑、IE7下只有設置在默認顯示方式為inline的元素上才會生效，該如何實現(xiàn)兼容IE6侨歉、IE7的通用的方式屋摇？
  • IE6、IE7支持對HTML行內元素設置inline-block幽邓。實際上只是看起來支持而已炮温，IE6、IE7并不識別inline-block這個屬性值牵舵，只是觸發(fā)了layout柒啤，讓行內元素有了inline-block的表征，比如說：行內顯示且可設置寬高等等畸颅。而對HTML塊級元素設置inline-block担巩，也只是觸發(fā)了layout，對塊級元素設置行內塊級屬性的目的沒有達到没炒。
  • 那么在IE6涛癌、IE7下，怎么實現(xiàn)塊級元素的inline-block屬性值設置呢送火？
  • 常見有2種方法：
  • 1.先使用display:inline-block;屬性觸發(fā)塊元素拳话，然后再定義display:inline，讓塊元素呈遞為行內對象（兩個display要先后放在兩個CSS聲明中才有效果种吸，這是IE的一個經(jīng)典bug弃衍，如果先定義了display:inline-block;然后再將display設回inline或block，layout不會消失）坚俗，代碼如下：
div {display:inline-block;}
div {display:inline;}
  • 2.直接讓塊元素設置為行內對象呈遞（設置屬性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元素在塊級元素中留空隙就是因為圖像的默認垂直對齊方式是基線對齊（基線對齊在原理上圖像底邊與匿名文本大寫英文字母X的底邊對齊）；而匿名文本是有行高的速缆，所以X的底邊距離行框有一段距離哥桥，這段距離就是圖像留出的空隙
  • 解決這個問題有以下幾個解決辦法：
    • display: block; ：因為垂直對齊方式只能作用于替換元素和行內元素，更改為塊級元素激涤，會使垂直對齊方式失效
    • 父級的line-height: 0;：這樣使匿名文本與行框的距離為0
    • vertical-align: top/middle/bottom;
    <style type="text/css">
    /*
    使用 inline-block 元素的時候，常會遇到兩個 bug：
    1. 兩個inline-block 元素之間如果有空格判呕、回車倦踢、tab，那么在頁面上就有一個空隙
       解決辦法：將父元素的 font-size 設置為 0侠草，然后在 inline-block 元素中將 font-size 設置為需要的大小 

    2. 兩個不同高度的 inline-block 元素無法對齊辱挥，或者下面無緣無故多出幾像素
       解決辦法：改變 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）

  • 盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的晤碘，css內定義的寬（width）和高（height），指的是填充里的內容范圍
  • 因此一個元素實際寬度（盒子的寬度）= 左邊界margin-left＋左邊框border-left＋左填充padding-left＋內容寬度width＋右填充padding-right＋右邊框border-right＋右邊界margin-right
  • width／height可設置的屬性值：
    • auto：默認值功蜓，瀏覽器可計算出實際的寬度／高度
    • length：使用px园爷、cm等單位定義寬度／高度
    • %：定義基于包含塊（父元素）寬度的百分比寬度／高度
    • inherit：從父元素繼承width／height屬性的值
    • 應用于塊狀元素和內聯(lián)塊狀元素。無繼承性
  • 引申：
    • max-width：設置元素的最大寬度（不包括填充式撼、邊框或頁邊距）
    • min-width：設置元素的最小寬度（不包括填充童社、邊框或頁邊距）
    • max-height：設置元素的最大高度（不包括填充、邊框或頁邊距）
    • min-height：設置元素的最小高度（不包括填充著隆、邊框或頁邊距）
    • 當最小寬度（高度）大于最大寬度（高度）時扰楼，以最小寬高的值為準
    • 應用于塊狀元素和內聯(lián)塊狀元素。無繼承性

關于Div的寬度與高度的100%設定

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

    body{
        background-color: #ccc;
    }
    
    /*這里為什么不是我們預想的那樣美浦，.container 高度并沒有充滿父元素 body*/
    /*事實上弦赖，由于 .container 中沒有內容，我們都看不到它*/
    .container{
        height: 100%;
        background-color: lightblue;
    }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
  • div的100%是從其上一級div的寬高繼承來的浦辨，有一點很關鍵蹬竖，就是要設置div100%顯示，必須設置其上一級div的寬度或高度流酬，否則無效案腺。舉例說明：父div(deman)寬300高200，子div(cc)如果在這個條件下設置divcc的寬高都為100%的話康吵，那cc的確切大小就是父div的大信ァ（寬300高200），在嘗試中我們還會發(fā)現(xiàn)晦嵌，div顯示會受自身和其上一級div的padding和margin影響同辣，而其實際寬高不受影響
  • 前面總得有個容器說明它的高度是多少拷姿。這樣的話div才能按比例100%繼承上一級的高度『岛可惜的是瀏覽器一般默認解釋為內容的高度响巢，而不是100%。但是只要為html和body設置高度為100%就可以了：html,body{ height:100%; }棒妨，這樣之后div會按比例來繼承上一級的高度了踪古，僅僅設置的div元素的height: 100%;沒有效果
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }

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

    body{
        background-color: #ccc;
    }

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

盒模型－填充（padding）

  • 元素內容與邊框之間是可以設置距離的，稱之為填充酷勺。填充也可以分為上脆诉、右击胜、下偶摔、左（順時針）辰斋，該屬性可以有1到4個值
// 順序一定不要搞混
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;}
  • 可以設置的值包括：
    • length：規(guī)定以具體單位計的填充值臂外，比如像素窟扑、厘米等漏健。默認值是 0px
    • %：基于父元素的寬度的百分比的填充
    • inherit：從父元素繼承 padding值
    • 應用于所有元素嚎货。無繼承性
  • 注意：
    • 對于行內元素蔫浆，左內邊距應用到元素的開始處瓦盛，右內邊距應用到元素的結尾處橡卤，上下內邊距不影響行高
    • 負值是不允許的
.box a{display: inline-block; width: 50px; height: 25px; padding-top: 40px;｝
// 如上，padding的設置會影響元素實際的顯示效果，瀏覽器中顯示 a 元素對象的高為 65px巧勤，但實際上嵌灰，a的height還是為 25px

盒模型－邊框（border）

  • 邊框是一條以空格分隔的集合樣式，包括邊框粗細（邊框寬度）颅悉、邊框顏色和邊框樣式沽瞭，且先后順序無關
border: border-width border-color border-style
border: 1px solid red;


// border-width：設置一個元素的四個邊框的寬度。此屬性可以有一到四個值
// 可設置的屬性值包括：this（細的邊框）剩瓶、medium（默認值驹溃。中等的邊框）、thick（定義粗的邊框）延曙、length（自定義邊框的寬度）豌鹤、inherit
border-width: thin medium thick 10px;
// 邊框的寬度不能為負，不能指定為百分比值


// border-style：設置一個元素的四個邊框的樣式枝缔。此屬性可以有一到四個值
// 如果一個邊框沒有樣式布疙，邊框將根本不會存在
// 可設置的屬性值包括：none（定義無邊框）、hidden（與 “none” 相同愿卸。不過應用于表格時除外灵临，對于表格，hidden 用于解決邊框沖突）趴荸、dotted（點狀邊框）俱诸、dashed（虛線）、solid（實線）赊舶、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：設置一個元素的四個邊框顏色滋捶。此屬性可以有一到四個值
// 可設置的屬性值包括：color（通常設為十六進制顏色）、transparent（指定邊框的顏色應該是透明的）余黎、inherit
// 默認的邊框顏色是元素本身的前景色重窟，即元素的文本顏色；如果元素沒有任何文本惧财，則邊框顏色是其父元素的文本顏色
// 但是巡扇，在表格中，若只設置 border-style垮衷，而不設置 border厅翔，則邊框顏色為黑色，而不與文本顏色相同
// border-style 屬性要聲明到 border-color 屬性之前搀突。元素必須在改變其顏色之前獲得邊框
border-color: red green;
  • 實例：
// 如下面代碼為 div標簽來設置邊框粗細為2px刀闷、樣式為實心的紅色邊框
div {
    border:2px solid red;
}
上面是border代碼的縮寫形式，也可以分開寫成
div {
    border-width: 2px;
    border-style: solid;
    border-color: red;
}
// border屬性除了可以設置上面的三個屬性值仰迁，還可以設置 inherit（指定應該從父元素繼承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的縮寫形式，針對的是上悬秉、右澄步、下、左四個方向的邊框和泌，并不能單獨為各個方向設置邊框樣式
  • 邊框單邊：
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- 前綴，且只能四條邊分開寫武氓，否則無效
  • 注意：
    • 邊框繪制在元素背景之上（有兼容問題）
    • 同一元素的邊框相交處是斜線
    • 可以用邊框實現(xiàn)三角形
    • 行內元素的上下邊框由于不影響行高梯皿，不影響布局；左右邊框會影響布局

盒模型－邊界（margin）

  • 設置外邊距 margin 會在元素外創(chuàng)建額外的空白县恕，空白通常指不能放其他元素的區(qū)域东羹，而且在這個區(qū)域中可以看到父元素的背景。邊界也可以分為上忠烛、右属提、下、左（順時針）
  • 填充（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;}
  • 可以設置的值包括：
    • auto：瀏覽器計算外邊距
    • length：規(guī)定以具體單位計的外邊距值犯眠，比如像素、厘米等症革。默認值是 0px
    • %：基于父元素的寬度的百分比的外邊距
    • inherit：從父元素繼承 margin值
    • 應用于所有元素筐咧。無繼承性
  • 注意：
    • 外邊距可以應用到行內元素，上下外邊距對行高沒有任何影響噪矛。由于上下外邊距實際上是透明的量蕊，所以這個聲明沒有任何視覺效果。左外邊距應用到元素開始處艇挨；右外邊距應用到元素結束處
    • 負值是允許的
    • 相鄰元素（毗鄰元素）的的邊界會被合并（以值大的為準）残炮，更多詳見：MDN 外邊距合并

引申

// border-radius 圓角邊框：是一個最多可指定四個 border -*- radius 屬性的復合屬性。每個半徑的四個值的順序是：左上角缩滨，右上角势就，右下角，左下角（順時針）
// 語法： border-radius: <length>{1,4}[/<length>{1,4}]?
// 實例：
border-radius: 10px;     // 注意：設置的是圓角直徑
border-radius: 10px 20px;   // 如果沒有反斜杠則水平和垂直方向相等脉漏。這里表示左上角和右下角圓角半徑為10px苞冯，右上角和左下角半徑為20px
border-radius: 10px/20px;   // 如果反斜杠存在，前面的值是水平方向的半徑侧巨，后面的值是垂直方向的半徑舅锄。這里表示四個圓角的半徑均為 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ù)水平方向的半徑和豎直方向的半徑來確定。注意：寫圓角單角時不可加反斜杠 /
// 可設置的屬性值包括：none（默認）司忱、length（可以是具體值皇忿，也可以是百分比，但不是負數(shù)）
// border-radius 是否生效與是否設置了邊框 border 無關
// 重置 border-radius 沒有圓角坦仍，使用 none 無效鳍烁，需要取值 0
// border-radius對 <img> 沒有任何效果
// 兼容性：IE8-不支持
// 內徑外徑：border-radius內徑 = 外徑 - 對應的邊框寬度。當border-radius半徑值小于等于邊框寬度時桨踪，元素沒有內徑效果
// 特殊圖形：
// 圓形：元素的寬高相同老翘，且圓角半徑為寬高的一半
div{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
// 半圓：元素寬高不同，且圓角半徑與寬高要配合
div{
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0;
}
// 扇形：元素寬高及一個圓角半徑相同
div{
    width: 50px;
    height: 50px;
    border-radius: 50px 0 0 0;
}  
// 橢圓：元素寬高不同，且水平和垂直半徑分別對應寬高
div{
    width: 120px;
    height: 80px;
    border-radius: 120px/80px;
}    


// border-image 邊界圖片：速記屬性
// 語法：
border-image: none; // 默認
border-image: border-image-source || border-image-slice [ / border-image-width? | / border-image-outset ]? || border-image-repeat;
// 兼容性：IE10-不支持
// 該屬性的作用是用來替代 border-style 的铺峭，若 border-image 為 none墓怀，則顯示border-style 的值
// 實例：
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
// 不給寫單位，具體值默認單位是 px
// 四值方向是上右下左卫键，代表切割線的方向傀履，切割的分別是高寬高寬
// 圖片邊框是在邊框范圍內顯示的，若邊框寬度不等于slice切片值莉炉，則圖片邊框會按比例放大縮小钓账，以使圖片邊框正好顯示在邊框范圍內
// 若slice值為負，或大于盒子的寬度或高度會被100%絮宁，四個角將顯示整個背景圖片
// 若右切和左切大于盒子寬度梆暮，則上中和下中部分為空；若上切和下切大于盒子高度绍昂，則左中和右中部分為空


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


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


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


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

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

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

輪廓偏移
輪廓偏移用來定義輪廓的偏移位置的數(shù)值橄唬。當參數(shù)值為正數(shù)時赋焕，表示輪廓向外偏移；當參數(shù)值為負值時仰楚，表示輪廓向內偏移
outline-offset: length | inherit
默認值為 0
應用于所有元素宏邮，無繼承性
兼容性：IE瀏覽器不支持
*/


// box-shadow 盒陰影：可設置一個或多個下拉陰影的框，該屬性是一個用逗號分隔陰影的列表（即可疊加缸血，形成多陰影）蜜氨，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規(guī)定捎泻。省略長度的值是 0飒炎。
box-shadow: none;   // 默認
box-shadow: 10px 10px 4px 3px #ccc;    // 外陰影，此例中各個參數(shù)分別代表：水平偏移（必需）笆豁、垂直偏移（必需）郎汪、模糊半徑（可選）、陰影大写秤（可選）煞赢、陰影顏色（可選，默認和文本顏色一致）
box-shadow: inset 0px 0px 4px #red;    // 內陰影
// 注意：陰影只是一種修飾哄孤，不占用空間
//  可以使用多重陰影照筑，但使用過多會造成性能差
// 最先寫的陰影在最頂層
// 邊框在內陰影之上，內陰影在背景圖片之上瘦陈，背景圖片在背景色之上凝危，背景色在外陰影之上
// 內陰影對 <img> 元素沒有任何效果
// 該屬性與 border-radius 一脈相承，若通過 border-radius 設置為圓角晨逝，則 box-shadow 的最終呈現(xiàn)也將是圓角
// 模擬邊框
border: 1px solid #000;
box-shadow: 0 0 0 1px #000;


// 在W3C的標準模型下蛾默，寬度和高度僅僅包含了內容寬度，除去了邊框和內邊距兩個區(qū)域捉貌，這樣為web設計師處理效果帶來了不少麻煩
// box-sizing：CSS3新增了一個盒模型屬性box-sizing支鸡，能夠事先定義盒模型的尺寸解析方式（設置width冬念、height指定的區(qū)域）
box-sizing: border-box;  // 此時給元素設置的寬度除了原先的內容 content，還包括填充 padding 以及邊框 border
// 可設置的屬性值包括：content-box（默認值牧挣。這是CSS2.1指定的寬度和高度的行為刘急。指定元素的寬度和高度（最小/最大屬性）適用于box的寬度和高度。元素的填充和邊框布局和繪制指定寬度和高度除外）浸踩、border-box（指定寬度和高度（最小/最大屬性）確定元素邊框box叔汁。也就是說，對元素指定寬度和高度包括 padding 和border 的指定检碗。內容的寬度和高度減去各自雙方該邊框和填充的寬度從指定的“寬度”和“高度”屬性計算）据块、inherit
// 應用于塊級元素和內聯(lián)塊狀元素。無繼承性
// 兼容性：IE7-瀏覽器不支持
// 只有firefox瀏覽器支持 padding-box 屬性值
// IE瀏覽器在 getComputedStyle 得到 width/height 是按照標準模式計算的折剃，而不論 box-sizing 的取值
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末另假，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子怕犁，更是在濱河造成了極大的恐慌边篮，老刑警劉巖，帶你破解...
    沈念sama閱讀 219,539評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件奏甫，死亡現(xiàn)場離奇詭異戈轿，居然都是意外死亡，警方通過查閱死者的電腦和手機阵子，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3贊 396
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門思杯，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人挠进，你說我怎么就攤上這事色乾。” “怎么了领突？”我有些...
    開封第一講書人閱讀 165,871評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵暖璧，是天一觀的道長。 經(jīng)常有香客問我君旦，道長澎办，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,963評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任于宙，我火速辦了婚禮浮驳，結果婚禮上悍汛，老公的妹妹穿的比我還像新娘捞魁。我一直安慰自己，他們只是感情好离咐，可當我...
    茶點故事閱讀 67,984評論 6贊 393
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布谱俭。 她就那樣靜靜地躺著奉件，像睡著了一般。 火紅的嫁衣襯著肌膚如雪昆著。 梳的紋絲不亂的頭發(fā)上县貌，一...
    開封第一講書人閱讀 51,763評論 1贊 307
  • 城市分裂傳說
    那天，我揣著相機與錄音凑懂，去河邊找鬼煤痕。 笑死，一個胖子當著我的面吹牛接谨，可吹牛的內容都是我干的摆碉。 我是一名探鬼主播，決...
    沈念sama閱讀 40,468評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼脓豪，長吁一口氣：“原來是場噩夢啊……” “哼巷帝！你這毒婦竟也來了？” 一聲冷哼從身側響起扫夜，我...
    開封第一講書人閱讀 39,357評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤楞泼，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后笤闯，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體堕阔，經(jīng)...
    沈念sama閱讀 45,850評論 1贊 317
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,002評論 3贊 338
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年颗味，在試婚紗的時候發(fā)現(xiàn)自己被綠了印蔬。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,144評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡脱衙，死狀恐怖侥猬，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情捐韩，我是刑警寧澤退唠，帶...
    沈念sama閱讀 35,823評論 5贊 346
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站荤胁，受9級特大地震影響瞧预，放射性物質發(fā)生泄漏。R本人自食惡果不足惜仅政，卻給世界環(huán)境...
    茶點故事閱讀 41,483評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一垢油、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧圆丹，春花似錦滩愁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0贊 22
  • 一樁弒父案硝枉，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽廉丽。三九已至，卻和暖如春妻味，著一層夾襖步出監(jiān)牢的瞬間正压，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工责球， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留焦履，地道東北人。 一個月前我還...
    沈念sama閱讀 48,415評論 3贊 373
  • 代替公主和親
    正文 我出身青樓雏逾，卻偏偏與公主長得像裁良，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子校套，可洞房花燭夜當晚...
    茶點故事閱讀 45,092評論 2贊 355

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案价脾？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,754評論 1贊 92
  • 本課來自http://www.imooc.com/learn/9請不要用作商業(yè)用途。 HTML5 HTML介紹 H...
    PYLON閱讀 3,229評論 0贊 5
  • CSS格式化排版 1笛匙、字體 我們可以使用css樣式為網(wǎng)頁中的文字設置字體侨把、字號、顏色等樣式屬性妹孙。下面我們來看一個例...
    張文靖同學閱讀 1,287評論 0贊 3
  • 一.CSS描述 CSS全稱為“層疊樣式表(Cascading Style Sheets)”秋柄，它主要是用于定義HTM...
    snowy_sunny閱讀 1,076評論 0贊 4
  • CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內容在瀏覽器...
    百作不死的學習閱讀 1,165評論 0贊 7