CSS深入理解——慕課網筆記（張鑫旭主講）

阿新 • • 發佈：2019-02-03

一、CSS深入理解之border

1. border-width不支援百分比

受語義和使用場景決定的，不會因為裝置大而邊框變大的

2. border-style屬性

border-style:dotted;在Chrome/Firefox是方點，IE下是圓點

3. border-color

當沒有指定border-color的時候，會使用color作為邊框顏色

border與background定位侷限，在CSS2.1中，background定位只能相對於左上角數值定位，不能相對於右下角

4. border與三角等圖形的構建

4.1. 實現三角形

4.2. 實現梯形

4.3. 增加響應區域大小-複選框

4.4. 增加可使渲染區域

.icon{
    position:relative;
    left:-20px; //圖示為20px*20px
    border-right:20px solid transparent;//透明邊框border突破可視區域的限制
    filter: drop-shadow(20px 0 #ff0000); //利用此做一個顏色不同的原圖示
    overflow:hidden; //隱藏原始圖示
}

5. border與等高佈局

比margin,padding實現的好處：

它們使用了很大的負值，當我們很負的元素有個錨點定位的時候，就會出現佈局飛昇的效果。

但是這樣實現不支援百分比寬度。

二、CSS深入理解之padding

1. CSS padding與元素的尺寸

1.1. 對於block水平元素：

1) 當width:auto or box-sizing:border-box，padding值沒有暴走，不影響尺寸。

2) padding值暴走，一定會影響尺寸。e.g.當padding大小超過寬高的時候，容器寬度改變，如中間有文字，那麼文字以最小寬度顯示。

3) width非auto，padding影響尺寸，容器擴大。

1.2. 對於inline水平元素：

水平padding影響尺寸，垂直padding不影響尺寸，但是會影響背景顏色（佔據空間）。

1.3. 應用：高度可控的分割線

比如：實現註冊 | 登入，中間的分割線

html：

註冊<span></span>登入

CSS：

span{
    padding: 16px 6px 1px;
    margin-left: 12px;
    border-left: 2px solid;
    font-size:0;
}

2. CSS padding負值和百分比值

2.1. 利用padding製作正方形

.div{
    padding:50%;
}

2.2. 但是對於inline元素，垂直padding會讓“struct（幽靈空白節點）”出現，所以改成

.inline_div{
    padding:50%;
    font-size:0;
}

3. CSS 標籤元素的內建padding

3.1. button表單的padding

對於Firefox，設定padding:0左右依然有padding，所以需設為：

button::-moz-focus=inner{
    padding:0;
}

對於IE7，文字越多，左右padding逐漸變大，所以需設為：

button{
    overflow:visible;
}

padding與inline-height不相容，所以個人技巧：

<button id="btn"></button>
<label for="btn">button</label>

然後設定label樣式

label{
    display:inline-block;
    inline-height:20px;
    padding:10px;
}

4. padding與圖形繪製

4.1. 實現三道槓：

<div class="line-tri"></div>

.line-tri{
    width:150px;
    height:30px;
    padding:15px 0;/*槓槓中間的空白部分*/
    border-top: 30px solid;/*第一道槓*/
    border-bottom:30px solid;/*第三道槓*/
    background-color:black;/*第二道槓*/
    background-clip:content-box;/*第二道槓，important*/
}

5. CSS padding與佈局

5.1. 使用百分比單位構建固定比例佈局結構（正方形）

.div{padding:50%;}

5.2. 配合margin等高佈局

/*父盒子*/
.box{
   overflow: hidden;
   resize:vertical;
}

/*子盒子*/
.child-orange,.child-green{margin-bottom: -600px;padding-bottom: 600px;}

.child-orange{
   float: left;background: orange;
}

.child-green{
   float: left;background: green;
}

5.3. 兩欄自適應佈局

<div class="box">
   <img src="mm.jpg">
    words...
</div>

<div>
   <img src="mm.jpg">
   <div class="auto">words...</div>
</div>

/*padding在容器上*/
.box{
   padding-left: 120px;
}

.box img{
   float: left;
   margin-left: -120px;
}

/*padding在子元素上*/
img{
 float：left；
}


.auto{
 padding-left:120px;
}

三、CSS深入理解之margin

1. 正確看待CSS的margin重疊

1.1. 相鄰兄弟margin重疊

1.2. 父子margin重疊其他條件

1.2.1. margin-top重疊父元素非塊狀格式化上下文元素

（resolution：父級元素設定overflow：hidden）

1.2.2. 父元素沒有border-top設定

（resolution：父級元素設定border-top）

1.2.3. 父元素沒有padding-top值

（resolution：父級元素設定padding-top）

1.2.4. 父元素和第一個子元素之間沒有inline元素分隔

（resolution：父級元素與第一個子元素之間設定inline元素。 e.g. ）

1.3. margin-bottom重疊父元素非塊狀格式化

上下文元素父元素沒有border-bottom設定

父元素沒有padding-bottom值

父元素和第最後一個子元素之間沒有inline元素分割

父元素沒有height，min-height，max-height限制（resolution參考margin-top）

1.4. 空block元素margin重疊其他條件

元素沒有border設定元素

沒有padding設定

裡面沒有inline元素沒有height，或者min-height（resolution參考margin-top）

1.5. margin重疊計算規則：

正正取大值

正負值相加

負負最負值

四、CSS深入理解之float

1. 浮動的原始意義

浮動出現的意義其實只是用來讓文字環繞圖片而已

2. 清除浮動的幾個方法：

2.1. 投機取巧法

<div style="clear:both;"></div>

放到當作最後一個子標籤放到父標籤那。初學者專用，有時候一不留神中間多了個空格會產生一段空白高度的。

2.2. overflow+zoom

.fix{overflow:hidden; zoom:1;}

程式碼簡潔，涵蓋所有瀏覽器。但是如果裡面的元素存在margin負值定位或是負的絕對定位，便會直接被裁掉了，所以此方法是有不小的侷限性的。

2.3. after + zoom方法

.fix{

zoom:1;

}

.fix:after{

display:block;

content:'clear'; /*這裡content裡寫什麼都行*/

clear:both;

line-height:0;

visibility:hidden;

}

這裡的line-height:0寫成height:0也是可以的。此方法可以說是綜合起來最好的方法了，不會影響任何其他樣式，通用性強，覆蓋面廣，推薦使用。

3. float與JavaScript

JavaScript可以改變CSS的屬性，其他些屬性還好，但是這個float值得一說，為何呢，因為float貌似是JavaScript中的一個關鍵字，不能使用obj.style.float="left";這樣的句子。得使用其他寫法。

IE瀏覽器：obj.style.styleFloat = "left";
其他瀏覽器：obj.style.cssFloat = "left";

4. float與流體佈局

4.1. 浮動與兩側皆自適應的流體佈局

.mib_head_a { float: left; margin-right: 20px; }

/* 下面這個是固定佈局寫法 */

.mib_cell { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }

4.2. 浮動與右側尺寸固定的流體佈局

要實現如下效果：

/* 下面這個是右浮動，改變DOM位置的流體佈局寫法 */

<div class=”.mib_head_r”></div>
<div class=”mib_feed_flow ”></div>

.mib_head_r { width: 56px; float: right; }
.mib_feed_flow { margin-right: 76px; }

/* 下面這個是左浮動，不改變DOM位置的流體佈局寫法 */

<div class=”mib_full_float”></div>
<div class=”mib_head_l”></div>

.mib_full_float { width: 100%; float: left; }
.mib_head_l { width: 50px; float: left; margin-left: -50px;}

4.3. 浮動與單側尺寸固定的流體佈局

.mib_head_a { width: 56px; float: left; }

/* 下面這個是固定佈局寫法 */

.mib_feed_fixed { width: 484px; float: right; }

/* 下面這個是流體佈局寫法 */

.mib_feed_flow { margin-left: 76px; }

4.4. float與IE7相容性問題

含clear的浮動元素包裹不正確
浮動元素倒數第二個莫名垂直間距
浮動元素最後一個字元重複問題
浮動元素樓梯排列問題
浮動元素和文字不在同一行的問題

五、CSS深入理解之absolute

1. 圖片圖示絕對定位覆蓋

.icon-recom { position: absolute; }

.icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; }

<a href="http://www.imooc.com/view/121" class="course-list">
    <div class="course-list-img">
        <span class="icon-recom">推薦</span>
        <img width="280" height="160" alt="分享：CSS深入理解之float浮動" src="http://img1.sycdn.imooc.com/53d74f960001ae9d06000338-300-170.jpg">
        <!--  -->
        <i class="icon-vip">vip</i>
    </div>
</a>

使用註釋節點避免相鄰節點間插入空格，保證相鄰節點完美貼合。

2. 下拉框的絕對定位

<div class="course-sidebar-search">
    <ul id="result" class="course-sidebar-result">
        <li><a href="http://www.imooc.com/view/121">分享：CSS深入理解之float浮動</a></li>
        <li><a href="http://www.imooc.com/view/118">案例：CSS圓角進化論</a></li>
        <li><a href="http://www.imooc.com/view/93">案例：CSS Sprite雪碧圖應用</a></li>
        <li><a href="http://www.imooc.com/view/77">案例：CSS3 3D 特效</a></li>
        <li><a href="http://www.imooc.com/view/57">案例：如何用CSS進行網頁佈局</a></li>
    </ul>
    <input class="course-search-input" placeholder="課程搜尋">
    <a href="javascript:" class="course-search-btn">搜尋</a>
</div>

.course-search-input { line-height: 18px; padding: 10px; float: left; }
.course-sidebar-result { position: absolute; width: 260px; margin: 39px 0 0 -1px; }

3. absolute實現居中、邊緣定位

<div class="course-loading-x">
    <img src="http://img1.sycdn.imooc.com/5453077400015bba00010001.gif" class="course-loading" alt="載入中...">
</div>
<div class="course-fixed-x">
    <div class="course-fixed">
        <a href="http://www.imooc.com/activity/diaocha" class="goto_top_diaocha"></a>
        <a href="http://www.imooc.com/mobile/app" class="goto_top_app"></a>
        <a href="http://www.imooc.com/user/feedback" class="goto_top_feed"></a>
    </div>
</div>

.course-loading-x { text-align: center; }//使用center對 進行文字居中

.course-loading { position: absolute; margin-left: -26px; }//表示圖示寬度為52px，-26px實現圖示居中

.course-fixed-x { text-align: right; }//使用right對 進行靠右，使得fixed的物件初始位置在大框的右側

.course-fixed { display: inline; position: fixed; margin-left: 20px; }

4. 文字圖示對齊與定位

.regist-star { position: absolute; margin-left: -1em; }

<label class="regist-label"><span class="regist-star">*</span>登入郵箱</label>

5. 高度自適應的九宮格效果

<div class="page">
    <div class="list" data-index="1"></div>
    <div class="list" data-index="2"></div>
    <div class="list" data-index="3"></div>
    <div class="list" data-index="4"></div>
    <div class="list" data-index="5"></div>
    <div class="list" data-index="6"></div>
    <div class="list" data-index="7"></div>
    <div class="list" data-index="8"></div>
    <div class="list" data-index="9"></div>
</div>

.list {
    float: left;
    height: 33.3%; width: 33.3%;
    position: relative;
}

.list:before {
    content: '';
    position: absolute;
    left: 10px; right: 10px; top: 10px; bottom: 10px;
}

.list:after {
    position: absolute;
    height: 30px;
    left: 0; right: 0; top: 0; bottom: 0;
}

6. left/right拉伸和width同時存在

.image {
    position: absolute; 
    left: 0; 
    right: 0; 
    width: 50%; 
    margin:auto;
}

絕對定位的拉伸受限於父級，想要做到拉伸效果，必須給父級設定高度。

7. 使用絕對定位實現整體佈局

header,footer{
    position:absolute;
    left: 0;
    right: 0;
}

header{
    height:48px;
    top:0;
}

footer{
    height:48px;
    bottom:0;
}

content{
    position:absolute;
    top:48px;
    bottom:48px;
    overflow:auto;
}

此時頭部尾部都是fixed效果，不跟隨滾動。避免了移動端position:fixed實現的諸多問題。

六、CSS深入理解之overflow

1. overflow基本屬性

如果overflow-x和overflow-y二者的值相同，等同於overflow；如果二者值不同，其中一個被賦予visible；另一個被賦予auto，hidden，scroll，其中visible會被重置為auto。
寬度設計機制，IE7瀏覽器把100%寬度算成了外部容器的寬度，滾動條一出現整個容器的可利用面積是會被壓縮的，外部容器的寬度減少，於是，在IE7上就出現了水平滾動條。此時應刪除寬度100%；

2. overflow與滾動條

2.1. 預設滾動條

預設滾動條來自於<html>
IE7-瀏覽器預設：html{overflow-y:scroll;}
IE8+等瀏覽器：html{overflow:auto;}

2.2. js與滾動高度

chrome: document.body.scrollTop;

others: document.documentElement.scrollTop;

var st = document.body.scrollTop || document.documentElement.scrollTop;

2.3. overflow出現的問題

(1) overflow的padding-bottom缺失現象導致scrollHeight（元素內容高度）不一致。除chrome外其他瀏覽器均有此現象。

(2) 解決水平居中跳動問題的修復：

對於IE7-：

html{ overflow-y: scroll; }

對於其他：

.container{
    padding-left:calc(100vw - 100%);
}

100vw -瀏覽器寬度；

100% -可用內容寬度；

2.4. 自定義滾動條-webkit

::-webkit-scrollbar

::-webkit-scrollbar-thumb

::-webkit-scrollbar-track

3. overflow與BFC

overflow與BFC（block formatting context，塊級格式化上下文，相當於頁面之結界，內部元素再怎麼翻雲覆雨都不會影響外部）

overflow: visible不能觸發BFC

3.1. 清除浮動影響

IE7+等使用.clearfix{ overflow:hidden; _zoom:1;}，但是副作用明顯，無法廣泛應用，於是，廣為流傳的是：

.clearfix{ *zoom:1;}

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

3.2. 避免margin穿透問題

div.outter>div.inner

在以上情況中，inner的margin-top會穿透inner，變成outter的margin-top。（margin-left則沒有這個情況）

法一：outter加一個overflow:auto或hidden。

還可以利用邊框、 padding、 margin元素自身BFC化

3.3. 實現倆欄自適應佈局

左浮動，右overflow，推薦使用浮動元素撐開間距

.left{
    float:left;
    width:120px;
    margin-right:10px;
}

.right{
    min-height:200px;
    overflow:hidden;
    ……
}

3.4. overflow與absolute

3.4.1. overflow:hidden失效

失效原因：絕對定位元素不總是被父級overflow屬性裁剪，尤其當overflow在絕對定位元素及其包含塊之間的時候。（包含塊是指“含position：relative/absolute/fixed宣告的父級元素，沒有則body元素。”）

e.g.

3.4.2.

如何避免失效

(1) overflow元素自身為包含塊（自身增加包含塊元素）

(2) overflow元素的子元素為包含塊（子集增加包含塊）

<div class=”overflow-hidden”>
    <div style=”position:relative”>
        <img src=”1.jpg” class=”absolute”/>
    </div>
</div>

(3) 任意合法transform聲明當作包含塊

overflow元素自身transform

√ IE9+/Firefox

× Chrome/Safari(win)/Opera

overflow子元素transform

√ IE9+/Firefox

√ Chrome/Safari(win)/Opera

4. 依賴overflow的樣式表現

(1) resize宣告起作用，要使用overflow元素，但是overflow的屬性值不能是visible。

(2) resize文字域預設有overflow:auto

(3) text-overflow:ellipsis要與overflow:hidden同時使用

5. overflow與錨點技術

5.1. 錨點定位的本質：改變容器的滾動高度

(1) 容器可滾動

(2) 錨點元素在容器內

5.2. 錨點定位的觸發：

(1) url地址中的錨鏈與錨點元素

(2) 可focus的錨點元素處於focus態

5.3. 錨點定位與選項卡技術

應用於：單頁頁面，相容IE6,IE7

.box{overflow:hidden;}

<div class="box">
  <div class="list" id="one">1</div>
  <div class="list" id="two">2</div>
  <div class="list" id="three">3</div>
  <div class="list" id="four">4</div>
</div>

<div class="link">
  <a href="#one" class="click">1</a>
  <a href="#two" class="click">2</a>
  <a href="#three" class="click">3</a>
  <a href="#four" class="click">4</a>
</div>

七、CSS深入理解之relative

1. relative限制作用

(1) 限制left/top/right/bottom定位

(2) 限制z-index層級

<div class=”relative zindex3” id=”1”>
    <div class=”absolute zindex1”  id=”2”></div>
</div>

<div class=”relative zindex2” id=”3”>
    <div class=”absolute zindex2”  id=”4”></div>
</div>

此時，2，4div中的z-index不再起作用，以1，3中的為主

新建層疊上下文與層級控制

除IE6,IE7外，如果relative的z-index為auto，則不會限制內部absolute元素層疊問題。

(3) 限制overflow

見3.4.2（2）

2. relative與相對自身無侵入：

相對自身位置改變，不會影響其他元素的位置

top與bottom，left與right是鬥爭關係其中之一起作用另一個就無效

3. relative最小化原則

3.1. 儘量避免使用relative

absolute不依賴relative

3.2. relative最小化

將需要定位的元素獨立出一個div，避免層級層疊問題

<div style="position:relative">
    <img src="123.jpg" style="position:absolute; top:0; right:0;"/>
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
    ……
</div>

八、CSS深入理解之z-index

1. 基本特性

支援負值

支援CSS3 animation動畫

在CSS2.1時代，需要和定位元素（relative/absolute/fixed/sticky）配合使用

2. z-index與定位屬性

2.1. 層疊上下文（stacking context）

層疊上下文（stacking context）是html元素中的三維概念，表示元素在z軸上有了“可以高人一等”。

(1) 頁面根元素天生具有層疊上下文，稱為“根層疊上下文”

(2) z-index值為數值的定位元素也具有層疊上下文

(3) 其他屬性

2.2. 層疊水平（stacking level

層疊上下文中的每個元素都有一個層疊水平（stacking level），決定了同一個層疊上下文中元素在z軸上的顯示順序。遵循“後來居上”和“誰大誰上”的層疊準則。

層疊水平和z-index不是一個東西。普通元素也有層疊水平，但是隻有定位元素才有z-index。

層疊上下文可以巢狀，組合成一個分層次的層疊上下文。每個層疊上下文和兄弟元素獨立：當進行層疊變化或渲染的時候，只需要考慮後代元素。

每個層疊上下文是自成體系的：當元素的內容被層疊後，整個元素被認為是在父層的層疊順序中。

2.3. 層疊順序：元素髮生層疊時候有著特定的垂直顯示順序。

內容層疊順序高於佈局

2.4. 關於z-index與層疊上下文

(1) 定位元素預設z-index:auto可以看成是z-index:0

(2) z-index不為auto的定位元素會建立層疊上下文

(3) z-index層疊順序的比較止步於父級層疊上下文

3. 其他屬性與層疊上下文

(1) z-index值不為auto的flex項（父元素display:flex|inline-flex）

(2) 元素的opacity值不為1

(3) 元素的transform不是none

(4) 元素mix-blend-mode不是normal

(5) 元素的filter不是none

(6) 元素的isolation是isolate

(7) position:fixed宣告

(8) will-chang指定的屬性值為上面任意一個

(9) 元素的-webkit-overflow-scrolling為touch

他們之間的關係：

(1) 不支援z-index的層疊上下文元素的層疊順序均是z-index:auto級別

(2) 依賴z-index的層疊上下文元素的層疊順序取決於z-index值

4. z-index相關實踐分享

4.1. 最小化影響原則

4.2. 不犯二準則

目的：避免z-index混亂，一山比一山高的樣式問題

做法：對於非浮層元素，避免設定z-index值，靈活運用後來居上，層疊上下文，層疊水平這些準測，z-index值不能超過2。

4.3. 元件層級計數器

目的：避免浮層元件因z-index被覆蓋的問題

原因：

(1) 總會有意想不到的高層級元素

(2) 組建的覆蓋規則具有動態性

(3) 做法：元件層級計數器（通過JS獲得body下子元素的最大z-index）

4.4. 可訪問性隱藏

九、CSS深入理解之line-height

1. 高度原理：

行高 = 內容區域高度 + 行間距, line-height = content area +vertical spacing

行高決定內聯盒子高度；行間距牆頭草，可大可小（甚至賦值），保證高度正好等同於行高。

2. 各屬性值

line-height: normal，跟著使用者的瀏覽器走，且與元素字型關聯

line-height:<length>，具體數字如10em

line-height:<number>，根據當前字型大小計算。所有可繼承元素根據font-size重計算行高。（推薦）

line-heigtht:<percent>，根據當前字型大小計算。當前元素根據font-size計算行高，繼承給下面的元素。

line-heigtht:inhert，行高繼承，如input等元素預設行高是normal，使用inhert可以讓文字框樣式可控性更強

body全域性數值行高經驗

body{ font-size:14px; line-height: }

重閱讀如部落格，推薦1.5，1.6

如果普通不重閱讀的網站，匹配20畫素的使用經驗 inline-height:1.4286（20px/14px的意思）

3. 行高與圖片

4. 實際應用

4.1. 圖片水平垂直居中

4.2. 多行文字水平垂直居中

十、CSS深入理解之vertical-align

1. vertical-align：數值/百分比

數值：在baseline對其基礎上上下偏移對應數值大小。

百分比：是相對於line-height計算的

2. vertical-align起作用的前提

只應用於inline水平元素和table-cell元素（預設狀態下，圖片、文字、按鈕、單元格）

<div class=”test-list”>
    <span>文字</span>
    <img src=”pic.jpg”/>
</div>

.test-list > span{
    display: inline-block;
    width:200px;
    vertical-align:middle;
}

.test-list > img { vertical-align:middle; }

3. 隱匿文字節點

原CSS：vertical-align:baseline; line-height:1.5; font-size:24px

解決方案：

消滅vertical-align，改成display: block; margin: auto; //從inline水平改成塊狀水平

改變預設對齊方式，vertical-align: baseline，改成bottom、middle、top等

改變inline-height: 0或font-size: 0;

注意HTML要寫成以下形式：

<p><img src=”pic.jpg”/><!-- 這裡要折行或空格 -->
</p>

4. CSS2的視覺化格式模型文件

The baseline of an “inline-block” is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ”overflow” property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

“inline-block” 的基線是正常流中的最後一個line box的基線，除非這個line box裡面既沒有line boxes或者本身”overflow”屬性的計算值不是“visible”，這種情況下基線是margin底邊緣。（line boxes是由一個一個inline boxes組成的）

inline boxes盒子1沒有任何內容，此時本盒子的基線是底邊緣

inline boxes盒子2有文字line box，此時這個inline-block盒子的基線就按照裡面line box元素的基線作為它自己的基線，此時文字的基線是x-baseline的下邊緣。兩個基線對齊就產生了如圖效果。

5. vertical-align:middle

定義：

inline/inline-block元素：元素的垂直中心點和父元素基線上1/2 x-height處對齊

table-cell元素：單元格填充盒子相對於外面的表格行居中對齊

所以設定行高大於圖片高度，再設垂直居中的時候是近似的。

6. vertical-align: text-top/text-bottom

盒子的頂部/底部和父級的content area的頂部/底部對齊。

實際運用：主要用於表情圖片（或原始尺寸背景圖示）與文字的對齊效果。

使用基線圖示片上，使用頂線/底線的問題在於受其他內聯元素影響，造成巨大的定位偏差；使用中線需要恰好的字型大小以及相容性要求不高；使用文字底部比較合適，不受行高以及其他內聯元素影響；

7. vertical-align:super/sub

vertical-align:super提高盒子的基線到父級合適的上標基線位置。

vertical-align:sub降低盒子的基線到父級合適的下標基線位置。

8. vertical-align實際運用

8.1. 圖示與文字對齊：vertical-align負值

8.2. 不定尺寸圖片或多行文字的垂直居中

(1) 主體元素inline-block化

(2) 0寬度100%高度輔助元素

(3) vertical-align:middle;