CSS 設計指南 學習筆記 二

時間  2019-11-08
標籤 css 設計 指南 學習 筆記 欄目 CSS 简体版
原文   原文鏈接

原文地址：http://justclear.github.io/css-stylin-with-css-note-2css

本篇文章是筆者的 《CSS 設計指南》 學習筆記的第二部分，因爲最近都在準備期末考的事，因此都沒來得及對 《CSS 設計指南》 進行一些總結，沒有看以前第一部分的話也能夠從這裏傳送過去。git

第三章 定位元素

3.1 理解盒模型

其實 HTML 頁面中每一個元素其實都是一個「盒子」，默認狀況下這些盒子的邊框不可見，背景也是透明的，因此咱們不能直接的看到頁面中盒子的結構，可是咱們能夠藉助一些 Web Developer 工具條能夠方便地顯示盒子的邊框和背景，讓咱們能很直觀的看到這些盒子的結構。github

每一個盒子都有三組屬性：web

  • 外邊距(margin)： 能夠設置盒子與相鄰盒子之間的距離。瀏覽器

  • 邊框(border)： 能夠設置邊框的寬度、樣式和顏色。工具

  • 內邊距(padding)：能夠設置盒子內容區和邊框之間的距離。佈局

一個盒子有四條邊，因此這些屬性也各有四個屬性，分別是上(top)、右(right)、下(bottom)和左(left)，爲了更直觀的瞭解盒模型的結構，這裏放上一張盒模型的結構圖：學習

盒模型

儘管這三組屬性共有 12 個屬性值，但咱們也能夠對它們進行簡寫，這裏以 margin 爲例：字體

margin-top:1px; 
margin-right:1px; 
margin-botton:1px; 
margin-left:1px;

縮寫後的代碼以下:搜索引擎

margin:1px 1px 1px 1px;

縮寫的順序是上 -> 右 -> 下 -> 左，順時針的方向。相對的邊的值相同，則能夠省掉，代碼以下:

margin:1px;// 四個方向的邊距相同，等同於margin:1px 1px 1px 1px; 
margin:1px 2px;// 上下邊距都爲1px，左右邊距均爲2px，等同於margin:1px 2px 1px 2px 
margin:1px 2px 3px;// 右邊距和左邊距相同，等同於margin:1px 2px 3px 2px; 
margin:1px 2px 1px 3px;// 注意，這裏雖然上下邊距都爲1px，可是這裏不能縮寫。

3.1.1 盒子的邊框(border)

邊框(border)有四個相關屬性：

  • 寬度(border-width)：可使用 thin、 medium 和 thick 等文本值，也可使用除百分比和負值之外的任何絕對值。

  • 樣式(border-style)：有 none、 hidden、 dotted、 dashed、 solid、 double、 groove、 ridge、 inset 和 outset 等文本值。

  • 顏色(border-color)：可使用任何顏色值，包括 rgb、 hsl、十六進制顏色值和顏色關鍵字。

  • 圓角(border-radius)：屬於 CSS3 新增屬性，可以使用百分比、相對值和絕對值。

CSS 推薦標準並無明確規定 border-width 的幾個文本值的確切寬度，因此實際寬度會因瀏覽器而異。

border-radius 不影響盒子的定位。

3.1.2 盒子的內邊距(padding)

內邊距是盒子內容區與盒子邊框之間的距離。在沒有設置內邊距的狀況下，內容緊挨着邊框：

內邊距

設置內邊距後，內容區與邊框有必定的距離(padding 的大小)：

內邊距

3.1.3 盒子外邊距(margin)

與內邊距和邊框相比，外邊距就要顯得複雜的多了，首先是外邊距疊加，垂直方向上的外邊距會疊加，例若有三個段落應用了以下規則：

p {
    height:50px; 
    border:1px solid #000;
    background: #fff;
    margin-top: 50px;
    margin-bottom: 30px;
}

因爲第一段的下邊距與第二段的上邊距相鄰，你可能會以爲它們兩個盒子邊框之間的外邊距只和是 80px，但其實是 50px，像這樣上下外邊距相遇時，它們會相互重疊，直到一個外邊距碰到另外一個盒子的邊框。就上面例子而言，第二段較寬的上外邊距會碰到第一段的邊框，也就是說較寬的外邊距決定兩個盒子之間的距離。

3.1.5 外邊距的單位

在設置段落文本外邊距時應該注意，爲了不因增大字號致使段落間外邊距不變引發的總體不協調的問題，在設置段落的上下外邊距是應該使用 em 單位，這樣當字體大小調整時，段落的上下外邊距也會根據字體的大小來調整距離，這樣頁面的總體佈局就會比較協調一致，而左右外邊距則能夠用 px 絕對單位，確保左右外邊距不會因字體大小的調整而發生改變，好比能夠這麼設置：

p {
    font-size: 1em;
    margin: .75em 30px;
}

這樣段落垂直距離就會始終保持字體高度的四分之三的高度，水平外邊距不會因字體的調整而發生改變了。

3.2 盒子有多大

做者在本章介紹了塊級元素和行內元素的不一樣行爲。

3.2.1 沒有寬度的盒子

做者在這一節中專門提到了一個 「沒有寬度」的概念：沒有顯式地設置元素的 width 屬性。若是不設置塊級元素的 width 屬性，那麼這個屬性的默認值就是 auto ，結果就是會讓元素的寬度擴展到與父元素同寬，對於塊級元素和行內元素更具體的介紹請看筆者的上一篇文章CSS 設計指南 學習筆記 一。

盒模型結論一：

沒有設置寬度的元素始終會擴展到填滿其父元素的寬度爲止，添加水平外邊距、水平邊框和水平內邊距都會致使內容寬度的減小，減小量等於水平外邊距、水平邊框和水平內邊距的和。

3.2.2 有寬度的盒子

盒模型結論二：

爲設定了寬度的盒子添加外邊距、邊框和內邊距，會致使盒子擴展的更寬，實際上，盒子的 width 屬性設定的只是盒子內容區的寬度，而不是盒子要佔據的( margin-left + border-left + padding-left + width + padding-right + border-right + margin-right )水平寬度。

因此必定要記住的是，給設定了 width 的元素添加外邊距、邊框和內邊距所展現的行爲與默認的 auto 狀態下的行爲會有大相徑庭的表現。

拓展：

可是與佈局相關的元素大部分都同時設置了 margin、 border、 padding 和 width，這就致使了在佈局時的各類計算保證總寬度( margin-left + border-left + padding-left + width + padding-right + border-right + margin-right )保持不變，這樣不只麻煩，有的時候還比較容易出錯，爲了解決這一問題， CSS3 新增了一個 box-sizing 屬性，經過它能夠將設置了 width 的元素也設定成具備默認的 auto 狀態下的行爲。這樣就省去了許多計算 width 的時間，同時也不會出錯，並且它的瀏覽器支持狀況也是一片大好（ 除了 IE 6 和 IE 7 不支持，其餘個別老版本的瀏覽器須要添加瀏覽器私有前綴才支持 ）。

能夠這樣使用這個屬性：

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Browser Supported

3.3 浮動與清除

浮動和清除是頁面佈局的一大利劍，分別是 float 和 clear，浮動可讓原來上下堆疊的塊級元素變成左右並列，能夠實現文字繞圖片排列效果。浮動的元素會脫離常規的文檔流，原來緊跟其後的元素會在空間容許的狀況下向上提高到與浮動元素分庭抗禮。若是浮動元素後面有兩個段落，而你只想讓第一段與浮動元素並列（就算旁邊還能放下第二段，也不想讓它上來），就可使用 clear 屬性清除浮動。

3.3.2 圍住浮動元素的三種方法

浮動元素脫離了文檔流，因此咱們看不到包含它的父元素了，這種狀況有時候並非咱們想要的，因此做者在本章介紹瞭如何圍住浮動元素的三種方法。

方法一：爲父元素添加 overflow: hidden; 強制它包圍浮動元素。

這種方法在某些狀況下也不適用，好比經過浮動設置的水平排列的菜單，對其父元素設置 overflow: hidden; 後，儘管父元素圍住了它，可是若是菜單有下拉選項的話，當鼠標移動到上面的時候下拉菜單並不會顯示，由於設置了 overflow: hidden;，因此超出父元素範圍的內容都被隱藏掉了。

方法二：同時浮動父元素

父元素設置浮動後，無論其子元素是不是浮動，父元素都會牢牢地包圍住它的子元素，所以須要用 width: 100%; 再讓父元素的寬度與瀏覽器容器同寬。一樣，儘管父元素圍住了它，可是這樣會致使頁面中出現大量的浮動元素，而浮動元素有每每很差控制，並不利於頁面的佈局。

方法三：添加非浮動的清除元素

第三種強制父元素包含其浮動的子元素的方式就是給父元素的最後添加一個非浮動的子元素，而後清除該子元素，所以父元素必定會包含這個子元素以及前面的浮動元素：

// HTML
<section>
    <p>It's fun to float</p>
    <div class="clearfix"></div>
</section>

// CSS
p {
    float: left;
}
.clearfix {
    clear:both;
}

儘管這個方法能解決上面提到的兩種方法中的問題，但它還不是最好的方法，由於它會在文檔中添加無心義的標籤，這違反了標籤語義化的規則，對搜索引擎並不友好。因此若是你要清楚浮動但既不想浮動父元素又不想對父元素設置 overflow: hidden; 也不想增長無心義的標籤的話，可使用僞元素來清除浮動：

.clearfix::after {
    content: " ";
    display: table;
    clear: both;
}

而後在父元素中添加 clearfix 類，由於搜索引擎並不會抓取僞元素，因此這種方法並無增長無心義的標籤，這裏應該注意的是，CSS3 標準是用兩個冒號來區別僞元素和僞類，而 CSS2.1 中無論是僞元素仍是僞類都是用單個冒號表示，然而 IE8 並不支持雙冒號的僞元素，因此問題就來了，若是你要遵循 CSS3 的標準使用雙冒號的話就不兼容 IE8 了，若是使用但冒號的話又不符合 CSS3 標準規範，固然如今大多數仍是使用但冒號的，選擇哪一種仍是看我的的選擇。

3.4 定位

CSS 佈局的核心是 position 屬性，對元素應用這個屬性能夠相對於它在常規文檔流中的位置從新定位，position 屬性有 4 個值： static、 relative、 absolute 和 fixed。

3.4.1 靜態定位(static)

靜態定位下的塊級元素會在默認文檔流中上下堆疊，想要突破 static 定位提供的這種按順序佈局元素的方式，就必須對元素的 position 屬性的值改成其餘三個值。

3.4.1 相對定位(relative)

所謂的相對定位就是相對於元素原來的位置（static 狀態下的位置）進行定位，也就是說在不設置 top、 right、 bottom 或 left 的話，和它在默認(static)狀況下的表現是相同的，可是若是對它設置了 top、 right、 bottom 或 left 的話，就會相對與它默認的位置進行定位。相對定位的元素能夠遮住靜態(static)定位的元素。能夠給 top 和 left 屬性設定負值，把元素向上和向左移動。

3.4.2 絕對定位(absolute)

絕對定位跟靜態定位和相對定位是絕對不同的，靜態定位和相對定位並不會脫離文檔流，會佔居原來的位置，而絕對定位會把元素完全從文檔流中拿出來，而後再相對於其餘元素（這裏的其餘元素指的是定位上下文，默認是 body 元素）定位。

絕對定位的一個重要的概念就是定位上下文，把元素的 position 屬性設定爲 relative、 absolute 或 fixed 後，繼而可使用 top、 right、 bottom 和 left 屬性，相對於「另外一個元素」移動該元素的位置。這裏的「另外一個元素」就是該元素的定位上下文。

絕對定位的默認定位上下文是 body，這是由於 body 是標記中全部元素的惟一的祖先元素，而實際上，絕對定位元素的任何祖先元素均可以成爲該絕對定位元素的定位上下文，只要把相應的祖先元素的 position 屬性的值設定爲 relative 便可。

3.4.3 固定定位

從徹底脫離文檔流的角度說，固定定位與絕對定位相似。但不一樣之處在於，固定定位的定位上下文是視口（瀏覽器窗口），所以它不會隨頁面的滾動而移動。最多見的狀況是用它來建立不隨頁面滾動而移動的導航元素。

3.5 顯示屬性

display 屬性的值不少，但經常使用的除了前面提到的控制塊級元素、行內元素和行內塊級元素的 block、 inline 和 inline-block 之外，還有一個比較經常使用的就是 none，把元素的 display 屬性的值設定爲 none 後，該元素及所包含在其中的元素，都不會在頁面中顯示。他們原先戰局的全部空間都會被「回收」，就好像相關元素根本不存在同樣。

與此相似的屬性還有 visibility，這個屬性經常使用的兩個值是 visible(默認值) 和 hidden，把元素的 visibility 屬性的值設定成 hidden ，元素會被隱藏，但它還會佔據頁面中原來的空間位置。

筆者以爲有點相似定位中 absolute 和 relative 的感受，就是 absolute 定位的元素的原來的位置會被「回收」（脫離文檔流），就好像元素根本不存在同樣（指的是原來佔據的位置不存在同樣），relative 定位的元素還會佔據頁面中原來的空間位置。

3.6 背景

背景支持爲元素添加背景顏色也背景圖片。

3.6.1 CSS 背景屬性

CSS 規定如下與背景相關屬性：

background-color: ; // 背景顏色
background-image: url(); // 背景圖片
background-repeat: ; // 背景重複
background-position: ; // 背景位置
background-size: ; // 背景尺寸 CSS3 新增屬性
background-attachment: ; // 背景粘附
background-clip: ; // 背景
background-origin: ; // 背景

3.6.5 背景位置

background-position：關鍵字 px em 百分比；

用於控制背景位置的 background-position 屬性，是全部背景屬性中最複雜的。background-position 有 5 個關鍵字值： top、 right、 bottom、 left 或 center，這些關鍵字值任意兩個組合起來均可以做爲該屬性的值。好比 top right 表示把圖片放在元素的右上角位置，center center 表示把圖片放在元素的中心位置。除了這些關鍵字值之外還能夠用百分比、px 和 em 等單位。

拓展

要是隻設置一個值，則將其用來設定水平位置，而垂直位置會被設爲 center。

在使用關鍵字和百分比的狀況下，狀況有點特殊，設定的值會同時應用於元素和圖片，也就是說，若是設定了 80% 20%，則圖片水平 80% 的位置與元素 33% 的位置對齊，垂直方向也同樣，以下圖：

background-position

其餘單位數值就不同了，若是用像素單位來設定位置：

background-position: 80px 20px;

那麼圖片的左上角會被放在距元素左邊 80px 上邊 20px 的地方。

3.6.6 背景尺寸

background-size 是 CSS3 新增的屬性，但卻的到了瀏覽器很好的支持，這個屬性用來控制背景圖片的尺寸，能夠給它設定的值及含義以下：

  • 50%：縮放圖片，使其填充背景區的一半。

  • 100px 50px：把圖片調整到 100px 寬，50px 高。

  • cover：拉大圖片，使其徹底填滿背景區，並保持寬高比例。

  • contain：縮放圖片，使其剛好適應整個背景區域，並保持寬高比例。

3.6.7 背景粘附

background-attachment 屬性控制滾動元素內的背景圖片是否隨元素滾動而移動，這個屬性默認是 scroll，即背景圖片隨元素移動，若是把它的值改成 fixed，那麼背景圖片不會隨元素滾動而移動。

3.6.8 簡寫背景屬性

background:
    [background-color]
    [background-image]
    [background-repeat]
    [background-attachment]
    [background-position] / [ background-size]
    [background-origin]
    [background-clip];

聲明中少些了哪一個屬性（好比沒寫 no-repeat），就會使用相應屬性的默認值（repeat）。

3.6.9 其餘 CSS3 背景屬性

CSS3 新增的一些背景屬性：

  • background-clip：控制背景繪製區域的範圍，好比可讓背景顏色和背景圖片只出如今內容區，而不出如今內邊距區域，默認狀況下背景繪製區域是擴展到邊框外邊界的。

  • background-origin：控制背景定位區域的原點，能夠設定爲元素盒子左上角之外的位置。

  • background-break：控制分離元素（好比跨越多行的行內元素盒子）的顯示效果。

background-size、 background-clip 和 background-origin 的瀏覽器支持狀況仍是挺不錯的：

Browser Supported

3.6.10 多背景圖片

CSS3 還能夠給元素背景條件多個背景圖片：

p {
    background-image:     url(img/1.png), 
                        url(img/2.png), 
                        url(img/3.png);
    background-position:20% 20%,
                        30px 50px,
                        center center;
    background-repeat:    repeat,
                        no-repeat,
                        repeat;
}

在 CSS 中，咱們把每張圖片的聲明都單獨放在了一行，以逗號分隔，以便看清他們的位置、重複的設定值等等。要注意的是，代碼中先列出的圖片顯示在上方，或者說更接近前景，還有就是對每張背景圖設置重複或者位置的時候，也要用逗號一一對應隔開。

3.6.11 背景漸變

漸變就是在必定長度內兩種或多種顏色之間天然過分。漸變分兩種，一種是線性漸變，一種是徑向漸變。線性漸變是從元素的一端延伸到另外一端，徑向漸變則是從元素的一點向四周發散，下面來看一個簡單的線性漸變例子：

// HTML
<div class="gradient effect-1"></div>
<div class="gradient effect-2"></div>
<div class="gradient effect-3"></div>

// CSS 
.gradient {
    width: 200px;
    height: 200px;
    margin: 0 20px;
}
/* 默認爲從上到下 */
.effect-1 {
    background: -webkit-linear-gradient(#45b29a, #fff);
    background:    -moz-linear-gradient(#45b29a, #fff);
    background:      -o-linear-gradient(#45b29a, #fff);
    background:         linear-gradient(#45b29a, #fff);
}
.effect-2 {
    background: -webkit-linear-gradient(left, #45b29a, #fff);
    background:    -moz-linear-gradient(left, #45b29a, #fff);
    background:      -o-linear-gradient(left, #45b29a, #fff);
    background:         linear-gradient(to right, #45b29a, #fff);
}
.effect-3 {
    background: -webkit-linear-gradient(45deg, #45b29a, #fff);
    background:    -moz-linear-gradient(45deg, #45b29a, #fff);
    background:      -o-linear-gradient(45deg, #45b29a, #fff);
    background:         linear-gradient(45deg, #45b29a, #fff);
}

Gradient

上面展現了三種簡單的漸變效果，默認狀況下漸變方向是從上到下的如圖一，例 2 起點關鍵字 left 意思是漸變方向從左到右，例 3 中的 45deg （順時鐘旋轉 45 度）至關於把起點從默認的中上設定到了又上。

3.6.11.1 漸變點

漸變點就是漸變方向上的點，能夠在這些點上設定顏色和不透明度。能夠添加任意多個漸變點：

// HTML
<div class="gradient effect-1"></div>
<div class="gradient effect-2"></div>
<div class="gradient effect-3"></div>
<div class="gradient effect-4"></div>

// CSS 
.gradient {
    width: 200px;
    height: 200px;
    margin: 0 20px;
}
/* 50% 處有一個漸變點 */
.effect-1 {
    background: -webkit-linear-gradient(#45b29a, #fff 50%, #45b29a);
    background:    -moz-linear-gradient(#45b29a, #fff 50%, #45b29a);
    background:      -o-linear-gradient(#45b29a, #fff 50%, #45b29a);
    background:         linear-gradient(#45b29a, #fff 50%, #45b29a);
}
/* 20% 和 80%處有一個漸變點 */
.effect-2 {
    background: -webkit-linear-gradient(#45b29a 20%, #fff 50%, #45b29a 80%);
    background:    -moz-linear-gradient(#45b29a 20%, #fff 50%, #45b29a 80%);
    background:      -o-linear-gradient(#45b29a 20%, #fff 50%, #45b29a 80%);
    background:         linear-gradient(#45b29a 20%, #fff 50%, #45b29a 80%);
}
/* 25%、50% 和 75% 處有一個漸變點 */
.effect-3 {
    background: -webkit-linear-gradient(#45b29a, #fff 25%, #45b29a 50%, #fff 75%, #45b29a);
    background:    -moz-linear-gradient(#45b29a, #fff 25%, #45b29a 50%, #fff 75%, #45b29a);
    background:      -o-linear-gradient(#45b29a, #fff 25%, #45b29a 50%, #fff 75%, #45b29a);
    background:         linear-gradient(#45b29a, #fff 25%, #45b29a 50%, #fff 75%, #45b29a);
}
/* 爲同一個漸變點設定兩種顏色能夠的到突變的效果 */
.effect-4 {
    background: -webkit-linear-gradient(#45b29a, #fff 25%, #45b29a 25%%, #45b29a 75%, #fff 75%, #45b29a);
    background:    -moz-linear-gradient(#45b29a, #fff 25%, #45b29a 25%%, #45b29a 75%, #fff 75%, #45b29a);
    background:      -o-linear-gradient(#45b29a, #fff 25%, #45b29a 25%%, #45b29a 75%, #fff 75%, #45b29a);
    background:         linear-gradient(#45b29a, #fff 25%, #45b29a 25%%, #45b29a 75%, #fff 75%, #45b29a);
}

Gradient

例 1，若是不是使用百分比或其餘值聲明漸變點的位置，三種顏色會均勻分佈於整個漸變。

例 2，演示了起點和終點不是 0% 和 100% 時的情形。此時，在第一個漸變點(20%)以前，是第一個漸變點聲明的實色，而在該點以後，則是從該顏色到下一個漸變點顏色的過分。一樣，在最後一個漸變點(80%)以後，該漸變點的顏色會以實色擴展到元素結束。

例 3，簡單展現了相同顏色在幾個漸變點之間變來變去的效果。

例 4，展現了在同一個漸變點聲明兩種不一樣顏色，能實現一種突變的效果。

3.6.11.2 徑向漸變

在建立徑向漸變的時候，可使用參數指定形狀、位置、尺寸、顏色和不透明度：

// HTML
<div class="gradient effect-1"></div>
<div class="gradient effect-2"></div>
<div class="gradient effect-3"></div>

// CSS 
.gradient {
    width: 300px;
    height: 200px;
    margin: 0 20px;
}
.effect-1 {
    background: -webkit-radial-gradient(#fff, #45b29a);
    background:    -moz-radial-gradient(#fff, #45b29a);
    background:      -o-radial-gradient(#fff, #45b29a);
    background:         radial-gradient(#fff, #45b29a);
}
.effect-2 {
    background: -webkit-radial-gradient(circle, #fff, #45b29a);
    background:    -moz-radial-gradient(circle, #fff, #45b29a);
    background:      -o-radial-gradient(circle, #fff, #45b29a);
    background:         radial-gradient(circle, #fff, #45b29a);
}
.effect-3 {
    background: -webkit-radial-gradient(50px 30px, circle, #fff, #45b29a);
    background:    -moz-radial-gradient(50px 30px, circle, #fff, #45b29a);
    background:      -o-radial-gradient(50px 30px, circle, #fff, #45b29a);
    background:         radial-gradient(50px 30px, circle, #fff, #45b29a);
}

Gradient

例 1，展現了默認的漸變形狀，即漸變效果會填充元素，這裏是矩形，若是元素是正方形，那漸變就是圓形：

Gradient

例 2，設定了關鍵字 circle，因而漸變形狀變得均勻，並在元素最近的邊達到終點，造成了圓形漸變。而長邊剩下的區域則填充了終點的顏色。

例 3，位置參數 50px 30px 把漸變的圓心放到了靠近左上角的位置。

總結

本章的內容很多，都是一些很重要的概念，好比盒模型、定位元素、浮動與清除浮動和元素背景屬性。

到目前爲止，也對 《CSS 設計指南》 的重點知識進行了總結，固然可能有些地方總結的不夠好，若有不對的地方歡迎指出和討論急。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程