們學(xué)習(xí)如何應(yīng)用CSS給元素添加邊框。

CSS邊框?qū)傩裕试S我們指定一個(gè)元素邊框的樣式、寬度和顏色。

我們先來學(xué)習(xí)元素邊框的樣式。border-style 屬性指定了要顯示什么樣的邊框。允許使用以下的值：

dotted，定義一個(gè)點(diǎn)狀的邊框

dashed ，定義一個(gè)虛線邊框

solid，定義一個(gè)實(shí)線邊框

double，定義一個(gè)雙倍的邊框

none，定義無邊框

hidden，定義一個(gè)隱藏的邊框

我們來實(shí)驗(yàn)一下。

創(chuàng)建一個(gè) 009-css-borders 文件夾，在文件夾里創(chuàng)建一個(gè) css-borders.html 文件和一個(gè)border-style.css 文件。

構(gòu)建 html 基礎(chǔ)代碼，引入樣式文件。

編寫 p.dotted 回車，填入文本點(diǎn)狀的邊框。按照同樣的方法，添加其他的幾個(gè)邊框結(jié)構(gòu)。

<p>點(diǎn)狀的邊框</p>

<p>虛線邊框</p>

<p>實(shí)線邊框</p>

<p>雙倍的邊框</p>

<p>無邊框</p>

<p>隱藏的邊框</p>

<p>混合邊框</p>

<p>速記邊框</p>

在 css 里定義 p.dotted 選擇器，聲明樣式 border-style: dotted。定義其他幾個(gè)選擇器，全部聲明 border-style 屬性，值分別為：dashed、solid、double、none、hidden。

在瀏覽器里查看結(jié)果，邊框的效果都做好了。

border-style: none 和 border-style: hidden 視覺上都不顯示邊框，有什么區(qū)別呢？

在 html 里編寫：table 大于 括號(hào) tr 大于 td 乘以3 再乘以3 （table>(tr>td*3)*3）?；剀嚕瑒?chuàng)建一個(gè)3行3列的表格。給 table 元素定義border屬性，值為 1。 給第二行第一個(gè)和第二個(gè)td 定義 class屬性，值分別為 lm、m。

在 css 里定義 table 選擇器，聲明樣式 border-collapse: collapse，讓表格線細(xì)一些。這個(gè)屬性我們?cè)诤竺鏁?huì)詳細(xì)講解。

定義 td.lm 選擇器，聲明樣式 border-style: dashed。定義 td.m 選擇器，聲明樣式 text-align: center。

看一下效果，左中和左上、中以及左下邊框是相鄰的，在這些單元格上定義邊框樣式一定會(huì)產(chǎn)生沖突。

給 td.m 選擇器添加樣式聲明 border-style: none。

我們看，沒有去掉任何邊框。

再把 border-style 屬性值改為 hidden。

我們?cè)倏?，中間的 td 邊框消失了，當(dāng)然，左側(cè)相鄰的邊框也消失了。

當(dāng)表格單元格相鄰邊框產(chǎn)生沖突時(shí)，border-style: hidden 優(yōu)先級(jí)最高，border-style: solid 優(yōu)先級(jí)次之，border-style: none 優(yōu)先級(jí)最低。

還是這個(gè)表格示例，單元格左中和中之間用點(diǎn)線來分隔。如何實(shí)現(xiàn)呢？

在 td.m 選擇器里將 border-style 的值改為 dotted。

很顯然，并不是我們要的效果?？磥?，得把單元格左中的右邊線隱藏。如何控制一條邊框線呢？

可以在 border-style 中間添加一個(gè)表示方位的詞，就可以設(shè)置單個(gè)邊框線了。

比如，給 td.lm 選擇器聲明 border-right-style 屬性，就可以設(shè)置這個(gè)單元格右邊框樣式了，這里設(shè)置的值為 none。

效果實(shí)現(xiàn)了。

把這里的 border-right-style 的值設(shè)置為 hidden 是什么效果呢

通過這個(gè)例子發(fā)現(xiàn)，可以分別指定每個(gè)邊框的樣式。這些屬性有 border-top-style、border-right-style、border-bottom-style、border-left-style，用來設(shè)置元素的上、右、下、左邊框的樣式。

除了單個(gè)樣式屬性外，border-style 的屬性值，還可以使用混合的簡(jiǎn)寫方法。有四種寫法：

第一種寫法：四個(gè)值，分別代表上邊、右邊、下邊、左邊的邊框樣式。從頂部開始，按照順時(shí)針方向來設(shè)置值。比如 border-style: dotted solid double dashed，設(shè)置上邊框?yàn)樘摼€、右邊框?yàn)閷?shí)線、下邊框?yàn)殡p線、左邊框?yàn)樘摼€。

第二種寫法：三個(gè)值，分別代表上邊、左右邊、下邊的邊框樣式。第一個(gè)值表示上邊框的樣式、第二個(gè)值表示左邊和右邊框的樣式，第三個(gè)值表示下邊框的樣式。比如 border-style: dotted solid double，設(shè)置頂部邊框?yàn)樘摼€、左右邊框?yàn)閷?shí)線，底部邊框是雙線。

第三種寫法：兩個(gè)值，分別表示上下邊，左右邊的邊框樣式。第一個(gè)值表示上下邊框的樣式、第二個(gè)值表示左右邊框的樣式。比如 border-style: dotted solid，設(shè)置頂部和底部的邊框是點(diǎn)狀的、右邊和左邊的邊框是實(shí)心的。

第四種寫法：一個(gè)值，表示四個(gè)邊框的樣式。比如 border-style: dotted，四個(gè)邊都是點(diǎn)狀邊框。

在 html 里添加一個(gè) p 元素，定義 屬性。填入一些文本。

在 css 里定義 p.mix 選擇器，聲明樣式 border-style: dotted dashed solid double。

最后一個(gè)段落的混合邊框?qū)崿F(xiàn)了。

除了設(shè)置邊框樣式，還可以設(shè)置邊框的寬度。

border-width 屬性用于設(shè)置四個(gè)邊框的寬度。寬度可以被設(shè)置為一個(gè)特定的尺寸，以 px、em等為單位，或者使用三個(gè)預(yù)定義的值： thin、medium、thick——薄、中、厚。

給前三個(gè) p 元素全部聲明 border-width 樣式屬性，值分別為 5px，0.5em，thick。

三個(gè)段落的邊框線寬度就添加好了。

和邊框樣式 border-style 屬性一樣，邊框?qū)挾鹊闹狄部梢允褂没旌系暮?jiǎn)寫方法，可以給 border-width 設(shè)置四個(gè)值、三個(gè)值、兩個(gè)值或一個(gè)值。

給第四個(gè) p 元素添加 border-width: 5px 10px; 樣式。

我們看，這個(gè)邊框?qū)挾壬舷率?5 像素，左右是 10 像素。

再給最后一個(gè) p 元素添加 border-width: 2px 3px 4px 5px 樣式。

這樣，四邊不同的邊框，就擁有了不同的寬度！

除了設(shè)置邊框樣式，還可以設(shè)置邊框的顏色。

border-color 屬性用于設(shè)置四個(gè)邊框的顏色?？梢酝ㄟ^顏色名稱、十六進(jìn)制顏色值、RGB顏色值來設(shè)置顏色，也可以通過 transparent 來設(shè)置透明。

給前三個(gè) p 元素全部聲明 border-color 樣式屬性，值分別為 red，#00ff00，rgb(0, 0, 255)。

三個(gè)段落的邊框線顏色就添加好了。

和邊框樣式 border-style 屬性一樣，邊框顏色的值也可以使用混合的簡(jiǎn)寫方法，可以給 border-color 設(shè)置四個(gè)值、三個(gè)值、兩個(gè)值或一個(gè)值。

給第四個(gè) p 元素添加 border-color: purple orange 樣式。

我們看，這個(gè)邊框上下是紫色，左右是橙色。

再給最后一個(gè) p 元素添加 border-color: red green blue yellow 樣式。

這樣，四邊不同的邊框，就擁有了不同的顏色！

和字體 font 屬性一樣，邊框也可以使用速記屬性。為了縮短代碼，可以在一個(gè) border 屬性中指定 border-style、border-width、border-color 等單獨(dú)的邊框?qū)傩?。比如：border: 5px solid red，表示設(shè)置元素的邊框?qū)挾葹?像素，邊框樣式為實(shí)線，邊框顏色為紅色。

注意，border-style 是必須要聲明的，其他兩個(gè)可以省略，省略后會(huì)采用 1 像素、黑色線這兩個(gè)默認(rèn)值。

在 html 里添加一個(gè) p 元素，定義 屬性。填入一些文本。

在 css 里定義 p.shorthand 選擇器，聲明樣式 border: 5px solid #ccc。

一行樣式代碼就實(shí)現(xiàn)了邊框樣式、寬度和顏色的設(shè)置！

這個(gè)簡(jiǎn)寫的方法默認(rèn)四個(gè)邊，全部定義了相同的邊框。能不能定義單個(gè)邊呢？可以的！

很自然的猜到，通過聲明 border-top，border-right，border-bottom，border-left 四個(gè)屬性，值為上面簡(jiǎn)寫的方式，就可以單獨(dú)定義元素的某一條邊了。

注釋掉這行代碼，再聲明一個(gè) border-bottom 屬性，值同樣是 5px solid #ccc。

一行代碼，同樣實(shí)現(xiàn)了一條底部的邊框線

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

嘍大家好，我是作者“未來”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個(gè)階段，堅(jiān)持學(xué)習(xí)3個(gè)月蛻變?yōu)閃eb前端高手哦！

志同道合的小伙伴跟我一起學(xué)習(xí)交流哦！

第二階段 CSS3

10 CSS盒模型及應(yīng)用（重點(diǎn)）

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

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

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

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

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

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

CSS其實(shí)沒有太多邏輯可言，類似我們小時(shí)候玩的積木我們可以自由的，隨意的擺放出我們想要的效果。

2 認(rèn)識(shí)盒子模型組成

盒子模型（ Box Model）

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

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

3 盒子邊框（border）

語法：

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

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

none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）

solid：邊框?yàn)閱螌?shí)線（最為常用的）

dashed：邊框?yàn)樘摼€

dotted：邊框?yàn)辄c(diǎn)線

double：邊框?yàn)殡p實(shí)線

4 邊框綜合寫法（一）

5 邊框綜合寫法（二）

6 合并細(xì)線表格

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

Table{ border- collapse:collapse；} collapse單詞是合并的意思border-collapse:collapse：表示邊框合并在一起。

7 圓角矩形

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

語法格式：

8 盒子內(nèi)邊距

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

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

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

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

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

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

9 fireworks測(cè)量工具

類似ps

滴管用來拾取顏色，切片工具用來測(cè)量距離。

10 新浪導(dǎo)航欄（一）

案例：要求做出下面的效果

11 新浪導(dǎo)航欄（二）

12 外邊距以及盒子居中對(duì)齊

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

margin-top：上外邊距

margin-right：右外邊距

margin-bottom：下外邊距

margin-left：上外邊距

margin：上外邊距 右外邊距 下外邊距 左外邊距。 取值順序跟內(nèi)邊距相同。

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

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

1 必須是塊級(jí)元素。

2 盒子必須指定了寬度（width）

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

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

13 文字、盒子、圖片和背景水平居中的區(qū)別

14 清除內(nèi)外邊距

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

15 行內(nèi)元素上下內(nèi)外邊距的問題

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

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

16 外邊距合并（一）

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

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

解決方案：避免就好了。

17 外邊距合并（二）

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

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

解決方案：

1.可以為父元素定義1像素的上邊框或上內(nèi)邊距。

2.可以為父元素添加 overflow:hidden

18 盒子的計(jì)算尺寸

content寬度和高度

使用寬度屬性width和高度屬性 height可以對(duì)盒子的大小進(jìn)行控制。

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

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

注意：

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

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

19 學(xué)會(huì)計(jì)算盒子尺寸（重點(diǎn)）

Padding-left:15px 會(huì)讓盒子向右拉長(zhǎng)15像素，所以，寬度weidth要減去15px。

20 padding不影響盒子大小的情況

如果一個(gè)盒子沒有給定寬度高度或者繼承父親的寬度高度，則 padding不會(huì)影響本盒子大小

21 搜索趣圖（一）案例分析

22 搜索趣圖（二）大盒子

23 搜索趣圖（三）標(biāo)題

24 搜索趣圖（四）

25 搜索趣圖（五）

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

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

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

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

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

原因：

1. margin會(huì)有外邊距合并還有ie6下面 margin加倍的bug（討厭）所以最后使用。

2. padding會(huì)影響盒子大小，需要進(jìn)行加減計(jì)算（麻煩）其次使用。

3. width沒有問題（嗨皮）我們經(jīng)常使用寬度剩余法、高度剩余法來做。

第一個(gè)盒子不是寬度剩余法，后面就是寬度剩余法，解決間距問題。

27 CSS3盒模型

CS53中可以通過box- sazing來指定盒模型，即可指定為 content-box、 border-box，這樣我們計(jì)算盒子大小的方式就發(fā)生了改變。

可以分成兩種情況：

1、box-sizing:content-box盒子大小為width+ padding+ border content-box:此值為其默認(rèn)值，其讓元素維持W3C的標(biāo)準(zhǔn) Box Mode

2、 box-sizing:border-box盒子大小為width就是說 padding和 border是包含到width里面的。

注：上面的標(biāo)注的width指的是CSS屬性里設(shè)置的width:length, content的值是會(huì)自動(dòng)調(diào)整的。

28 盒子陰影

語法格式：

box- shadow：水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色內(nèi)/外影；

29 水晶圖片案例?

看不懂的小伙伴不要?dú)怵H，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學(xué)習(xí)，每篇文章看三遍，一個(gè)月后，回過頭來看之前的文章就會(huì)感覺簡(jiǎn)單極了。

本章已結(jié)束，下篇文章將分享《11 浮動(dòng)及應(yīng)用》小伙伴們不要錯(cuò)過喲！