聊聊CSS盒模型以及CSS選擇器

Part 1 :盒模型(box model)

"every element in web design is a rectangular box."

在一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子。在CSS中，使用標(biāo)準(zhǔn)盒模型(也可叫做框模型)描述這些矩形盒子中的每一個(gè)。這個(gè)模型描述了元素所占空間的內(nèi)容。

每個(gè)盒子有四個(gè)邊：外邊距邊(margin), 邊框邊(border), 內(nèi)填充邊(padding) 與 內(nèi)容邊(content)。

1-設(shè)置外邊距邊(margin)

外邊距區(qū)域 margin area用空白區(qū)域擴(kuò)展邊框區(qū)域，以分開(kāi)相鄰的元素。它的大小為 margin-box 的高寬。外邊距區(qū)域大小由 margin-top, margin-right, margin-bottom, margin-left及簡(jiǎn)寫(xiě)屬性 margin控制。

屬性名稱(chēng) 屬性用途
margin-top 設(shè)置元素的頂部外邊距
margin-right 設(shè)置與元素相關(guān)聯(lián)的盒子模型的右外邊距
margin-bottom 用于設(shè)置元素的底部外邊距
margin-left 設(shè)置與元素相關(guān)聯(lián)的盒子模型的左外邊距

上面屬性均允許使用負(fù)值

注意:這些值的順序是從上外邊距 (top) 開(kāi)始圍著元素順時(shí)針旋轉(zhuǎn)的：
即:margin: top right bottom left

margin 屬性接受任何長(zhǎng)度單位，可以是像素、英寸、毫米或 em。
margin 可以設(shè)置為 auto。也可為外邊距設(shè)置長(zhǎng)度值或百分比(百分?jǐn)?shù)是相對(duì)于父元素的 width 計(jì)算的).

單邊外邊距屬性

可以使用單邊外邊距屬性為元素單邊上的外邊距設(shè)置值。
假設(shè)需要把 p 元素的左外邊距設(shè)置為 20px?？梢圆捎靡韵路椒ǎ?code>p {margin-left: 20px;}

值復(fù)制
若有值相同的邊距值，則不用將四個(gè)屬性值全部寫(xiě)出
CSS 定義了一些規(guī)則，允許為外邊距指定少于 4 個(gè)值。規(guī)則如下：

  • 如果缺少左外邊距的值，則使用右外邊距的值。
  • 如果缺少下外邊距的值，則使用上外邊距的值。
  • 如果缺少右外邊距的值，則使用上外邊距的值。

例子 要設(shè)置上 下 右 左邊距值為0.25em 1em 0.5em 0.5em.也就是說(shuō)右邊和下邊的值相同。

h1 {margin: 0.25em 1em 0.5em;}

2-設(shè)置邊框邊(border)

邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線,CSS border 屬性允許你規(guī)定元素邊框的樣式(border-style)、寬度(border-style)和顏色(border-color)。

屬性名稱(chēng) 屬性用途 使用方法
border-width 為邊框指定寬度 指定長(zhǎng)度值(px, em)或使用 3 個(gè)關(guān)鍵字之一 (thin 、medium（默認(rèn)值） 和 thick)
border-style 設(shè)置邊框樣式 10 個(gè)不同的非 inherit 樣式
border-color 設(shè)置邊框顏色 使用border-color屬性

同樣，border屬性的值也采用了 top-right-bottom-left 的順序

3-設(shè)置內(nèi)填充邊(padding)

CSS padding 屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域,padding 屬性接受長(zhǎng)度值或百分比值，但不允許使用負(fù)值。

可以按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位(em/ ex / px)或百分比.

屬性名稱(chēng) 屬性用途
padding-top 設(shè)置元素的上內(nèi)邊距
padding-right 設(shè)置與元素右內(nèi)邊距
padding-bottom 用于設(shè)置元素的下內(nèi)邊距
padding-left 設(shè)置元素的左內(nèi)邊距

4-設(shè)置內(nèi)容邊(content)

內(nèi)容區(qū)域content area 是包含元素真實(shí)內(nèi)容的區(qū)域。它通常包含背景、顏色或者圖片等，位于內(nèi)容邊界的內(nèi)部，它的大小為內(nèi)容寬度 或 content-box寬及內(nèi)容高度或content-box高。

content 屬性與 :before 及 :after 偽元素配合使用，來(lái)插入生成內(nèi)容。

關(guān)于偽元素:"CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree."
即偽元素用于創(chuàng)建一些不在文檔樹(shù)中的元素，并為其添加樣式。更多詳情以后會(huì)專(zhuān)門(mén)整理~

A-content與:before 偽元素配合使用：
該偽元素允許創(chuàng)作人員在元素內(nèi)容的最前面插入生成內(nèi)容
B-content與:after偽元素配合使用，在元素之后添加內(nèi)容

例如:如何使用 :before 在元素內(nèi)容之前插入圖像

<!DOCTYPE html >
<html>
<head>
<style type="text/css">
h1:before {content:url(/logo_white.gif)}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
</body>
</html>
CSS3中新增的盒模型計(jì)算方式：box-sizing

box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。

語(yǔ)法:box-sizing: content-box|border-box|inherit;

值 描述
content-box 這是由 CSS2.1 規(guī)定的寬度高度行為。寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
border-box 為元素設(shè)定的寬度和高度決定了元素的邊框盒。就是說(shuō)，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
inherit 規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。
CSS3中新增的邊框?qū)傩?/h5>
  • border-radius:創(chuàng)建圓角邊框
  • box-shadow:向矩形添加陰影
  • border-image:使用圖片來(lái)繪制邊框

Part2:選擇器（Selectors）

CSS選擇器用于選擇你想要的元素的樣式的模式。

選擇器的類(lèi)別:
類(lèi)選擇器,id選擇器,屬性選擇器 ,派生選擇器 ，后代(包含)選擇器,子元素選擇器,相鄰兄弟選擇器

1-類(lèi)選擇器:允許以一種獨(dú)立于文檔元素的方式來(lái)指定樣式。
該選擇器可以單獨(dú)使用，也可以與其他元素結(jié)合使用.
語(yǔ)法: * 選擇器名稱(chēng){樣式}

用法:

  • 獨(dú)立使用
  • 多類(lèi)選擇器:通過(guò)把多個(gè)類(lèi)選擇器鏈接在一起，僅可以選擇同時(shí)包含這些類(lèi)名的元素（類(lèi)名的順序不限）。
  • 結(jié)合元素選擇器來(lái)使用。
    eg.若希望只有段落顯示為紅色文本：
    p.important {color:red;}

eg.假設(shè) class 為 important 的所有元素都是粗體，而 class 為 warning 的所有元素為斜體，class 中同時(shí)包含 important 和 warning 的所有元素還有一個(gè)銀色的背景 。就可以寫(xiě)作：

.important.warning {background:silver;}

2-id選擇器:可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。
語(yǔ)法:# 選擇器名稱(chēng) {樣式}

用法:

  • 獨(dú)立使用
  • 與派生選擇器一起使用:
    eg.
#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }

3-屬性選擇器 :可以為擁有指定屬性的 HTML 元素設(shè)置樣式
語(yǔ)法 :元素名稱(chēng)[指定屬性]{樣式}
用法:

  • 單個(gè)屬性值
    eg:把包含標(biāo)題（title）的所有元素變?yōu)榧t色
    *[title] {color:red;}

  • 根據(jù)具體屬性值選擇
    eg.將指向 Web 服務(wù)器上某個(gè)指定文檔的超鏈接變成紅色
    a[] {color: red;}

  • 子串匹配屬性選擇器

類(lèi)型 描述
[abc^="def"] 選擇 abc 屬性值以 "def" 開(kāi)頭的所有元素
[abc$="def"] 選擇 abc 屬性值以 "def" 結(jié)尾的所有元素
[abc*="def"] 選擇 abc 屬性值中包含子串 "def" 的所有元素

eg.

  • 特定屬性選擇類(lèi)型
    eg.選擇 lang 屬性等于 en 或以 en- 開(kāi)頭的所有元素
    *[lang|="en"] {color: red;}
  • 根據(jù)部分屬性值選擇
    eg.選擇 class 屬性中包含 important 的元素
    p[class~="important"] {color: red;}

4-派生選擇器：依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式
語(yǔ)法:元素名{樣式}

5-后代(包含)選擇器:可以定義后代選擇器來(lái)創(chuàng)建一些規(guī)則，使這些規(guī)則在某些文檔結(jié)構(gòu)中起作用，而在另外一些結(jié)構(gòu)中不起作用。

語(yǔ)法:在后代選擇器中，規(guī)則左邊的選擇器一端包括兩個(gè)或多個(gè)用空格分隔的選擇器。選擇器之間的空格是一種結(jié)合符（combinator）。每個(gè)空格結(jié)合符可以解釋為“... 在 ... 找到”、“... 作為 ... 的一部分”、“... 作為 ... 的后代”，但是要求必須從右向左讀選擇器。

eg.希望只對(duì) h1 元素中的 em 元素應(yīng)用樣式
h1 em {color:red;}

上面這個(gè)規(guī)則會(huì)把作為 h1 元素后代的 em 元素的文本變?yōu)?紅色。其他 em 文本（如段落或塊引用中的 em）則不會(huì)被這個(gè)規(guī)則選中.

6-子元素選擇器:縮小范圍，只選擇某個(gè)元素的子元素

eg.選擇只作為 h1 元素子元素的 strong 元素
h1 > strong {color:red;}
語(yǔ)法解釋:子選擇器使用了大于號(hào)（子結(jié)合符）。
子結(jié)合符兩邊可以有空白符，這是可選的。

7-相鄰兄弟選擇器:可選擇緊接在另一元素后的元素，且二者有相同父元素
語(yǔ)法:相鄰兄弟選擇器使用了加號(hào)（+），即相鄰兄弟結(jié)合符（Adjacent sibling combinator）。與子結(jié)合符一樣，相鄰兄弟結(jié)合符旁邊可以有空白符。

eg.要增加緊接在 h1 元素后出現(xiàn)的段落的上邊距
h1 + p {margin-top:50px;}

選擇器分組

可以將任意多個(gè)選擇器分組在一起，對(duì)此沒(méi)有任何限制。

例如，如果想把很多元素顯示為灰色，可以使用類(lèi)似如下的規(guī)則：
body, h2, p, table, th, td, pre, strong, em {color:gray;}
提示：通過(guò)分組，創(chuàng)作者可以將某些類(lèi)型的樣式“壓縮”在一起，這樣就可以得到更簡(jiǎn)潔的樣式表。

選擇器的優(yōu)先級(jí)

瀏覽器通過(guò)優(yōu)先級(jí)來(lái)判斷哪一些屬性值與一個(gè)元素最為相關(guān)，從而在該元素上應(yīng)用這些屬性值。優(yōu)先級(jí)是基于不同種類(lèi)選擇器組成的匹配規(guī)則。

優(yōu)先級(jí)是如何計(jì)算的？

優(yōu)先級(jí)就是分配給指定的CSS聲明的一個(gè)權(quán)重，它由 匹配的選擇器中的 每一種選擇器類(lèi)型的 數(shù)值 決定。
而當(dāng)優(yōu)先級(jí)與多個(gè)CSS聲明中任意一個(gè)聲明的優(yōu)先級(jí)相等的時(shí)候，CSS中最后的那個(gè)聲明將會(huì)被應(yīng)用到元素上。

當(dāng)同一個(gè)元素有多個(gè)聲明的時(shí)候，優(yōu)先級(jí)才會(huì)有意義。因?yàn)槊恳粋€(gè)直接作用于元素的CSS規(guī)則總是會(huì)接管/覆蓋（take over）該元素從祖先元素繼承而來(lái)的規(guī)則。

1、無(wú)條件優(yōu)先的屬性只需要在屬性后面使用 !important 。它會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式。當(dāng)然，IE 6不支持這個(gè)屬性，于是它也成為一種hack被很多人所熟知，真正使命被人淡忘。

2、第二高位的優(yōu)先屬性是在html中給元素標(biāo)簽加style。由于該方法會(huì)造成CSS的難以管理，所以不推薦使用。

3、第三級(jí)優(yōu)先的屬性是由一個(gè)或多個(gè)id選擇器來(lái)定義的。例如 #id{margin:0;} 會(huì)覆蓋 .classname{margin:3px;}。

4、第四級(jí)的屬性由一個(gè)或多個(gè) 類(lèi)選擇器、屬性選擇器、偽類(lèi)選擇器定義。如 .classname{margin:3px;} 會(huì)覆蓋 div{margin:6px;}

5、第五級(jí)由一個(gè)或多個(gè) 類(lèi)型選擇器定義。如 div{margin:6px;} 覆蓋 *{margin:10px;} 。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,108評(píng)論 1贊 92
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒(méi)有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,181評(píng)論 0贊 1
  • 1.塊級(jí)元素和行內(nèi)元素 塊級(jí)(block-level)元素；行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,191評(píng)論 1贊 4
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表，主要用...
    寥寥十一閱讀 2,046評(píng)論 0贊 6
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類(lèi)選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    wzhiq896閱讀 2,112評(píng)論 0贊 2

友情鏈接更多精彩內(nèi)容