《css世界》- 詳細重點筆記與技巧

時間  2019-11-07
標籤 css世界 詳細 重點 筆記 技巧 欄目 CSS 简体版
原文   原文鏈接

概述

在《css世界》這本書中有一些「黑魔法」給列舉出來，在結合本身的理解。 篇幅有點長，但願你們可以堅持看完，必定會有收穫！！！
如下是摘自每章內一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等;

ps: 特別是 「line-height、vertical-align」內容須要反覆仔細研究閱讀php

何爲「流」

成爲 文檔流，將窗體自上而下分紅一行一行，並在每行中按從左至右依次排放元素 （引導元素排列和定位）

什麼是流體佈局

利用元素「流」的特性實現的各種佈局效果。由於「流」自己具備自適應特性，因此「流體佈局」每每都是具備自適應性。
元素寬度按照分辨率寬度進行長度、寬度的調整，但佈局不變。

「未定義行爲」

當某個瀏覽器中出現與其餘瀏覽器 不同的行爲或樣式表現；
Web應用場景變幻無窮，Web標準也是不可能面面俱到的，也會存在規範描述之外的場景，此時，各大瀏覽器廠家只能根據本身的理解與喜愛去實現，一旦個性化就會出現差別

currentColor 變量

當前的文字顏色;凡事須要使用顏色值的地方，均可以使用currentColor替換，比方說背景色 – background-color, 漸變色 – gradient, 盒陰影 – box-shadow, SVG的填充色 – fill等等 
div { color:#3c3c3c; border: 1em solid currentColor; }

currentColor-CSS3超高校級好用CSS變量css

塊級元素

默認狀況下，塊級元素會新起一行;佔據其父元素（容器）的整個空間
  • 塊級盒子負責結構
  • 內聯盒子負責內容

應用

正是因爲「塊級元素」具備換行特性，所以理論上它均可以配合clear屬性來清除浮動帶來的影響 
.clear:after {
　 content: '';
   display: table;　// 也能夠是block，或者是list-item
　 clear: both;
}

爲何 list-item 元素會出現項目符號

list-item（「 附加盒子」）名「 標記盒子」；由於生成了一個附加的盒子， 學名「標記盒子」（marker box），專門用來放圓點、數字這些項目符號；

display:inline-block 或者 display:xx-xx 理解（容器盒子）

元素都兩個盒子，外在盒子和內在盒子；
外在盒子：外在的「內聯盒子」（inline）
內在盒子：內在的「塊級容器盒子」（block）

深藏不露的 width:auto

充分利用可用空間

<div>、<p>這些元素的寬度默認是100%於父級容器的

收縮與包裹

浮動、絕對定位、inline-block元素或table元素

收縮到最小

出如今table-layout爲auto的表格中；當每一列空間都不夠的時候，文字能斷就斷，但中文是隨便斷的，英文單詞不能斷

超出容器限制

內容很長的連續的英文和數字，或者內聯元素被設置了white-space:nowrap

「內部尺寸」和「外部尺寸」

「內部尺寸」: 尺寸由內部元素決定
「外部尺寸」: 寬度由外部元素決定

外部尺寸與流體特性

正常流寬度

<div>、<p>這些元素的寬度默認是100%於父級容器；display:block;

流動性

寬度100%顯示，

margin/border/padding和content內容區域自動分配水平空間html

格式化寬度

觸發條件
  • 「絕對定位模」（position屬性值爲absolute或fixed的元素中）
表現
絕對定位元素的寬度表現是「包裹性」，寬度由內部尺寸決定
特殊
  • 當left/top或top/bottom對立方位的屬性值同時存在，元素的寬度表現爲「格式化寬度」，
  • 其寬度大小相對於最近的具備定位特性（position屬性值不是static）的祖先元素計算 
div { position: absolute; left: 20px; right: 20px; } 
div { position: absolute; top: 20px; bottom: 20px; } // 但不知道爲何不行

內部尺寸與流體特性

包裹性

除了「包裹」（max-width:100%），還有「自適應性（元素尺寸由內部元素決定， 但永遠小於「包含塊」容器的尺寸）」 
<button>按鈕</button>
<input type="button" value="按鈕">

著名的「按鈕」元素：極具表明性的inline-block元素css3

  • 按鈕上的文字個數比較有限，沒機會換行
  • <button>標籤按鈕纔會自動換行，<input>標籤按鈕，默認white-space:pre，是不會換行的，須要將pre值重置爲默認的normal

應用

文字少的時候居中顯示，文字超過一行的時候居左顯示web

.box {
   padding: 10px;
   background-color: #cd0000;
　 text-align: center;
}
.content {
　 display: inline-block;
　 text-align: left;
}
<div class="box">
    <p id="content" class="content">文字內容</p>
</div>

首選最小寬度

元素最適合的最小寬度
  • 東亞文字（如中文）最小寬度爲每一個漢字的寬度:font-size:14px;
  • 西方文字最小寬度由特定的連續的英文字符單元決定（通常會終止於空格（普通空格）、短橫線、問號以及其餘非英文字符等）

最大寬度

是元素能夠有的最大寬度（ 若是內部沒有塊級元素或者塊級元素沒有設定寬度值,其實是最大的連續內聯盒子的寬度）

如何評價*{box-sizing:border-box}

box-sizing 發明的初衷

解決 替換元素寬度自適應問題

易產生不必的消耗

  • 通內聯元素（非圖片等替換元素），box-sizing不管是什麼值，對其渲染表現都沒有影響
  • search類型的搜索框，其默認的box-sizing就是border-box（若是瀏覽器支持），所以，*對search類型的<input>而言也是沒有必要的消耗

關於 height:100%

父元素height爲auto，只要子元素在文檔流中，其百分比值徹底就被忽略了;百分比高度值要想起做用，其父級必須有一個能夠生效的高度值;

爲什麼height:100%無效

包含塊的高度沒有顯式指定（即 高度由內容決定），而且該 元素不是絕對定位，則計算值爲auto 
'auto' * 100/100 = NaN

如何讓元素支持height:100%效果

  • 設定顯式的高度值
  • 使用絕對定位

width:100%效

width:100%有效包含塊的寬度取決於該元素的寬度，那麼產生的佈局在CSS 2.1中是未定義的

CSS min-width/max-width 和 min-height/max-height

max-* 初始值是none

假如說 max-width初始值是auto,咱們的width永遠不能設置爲比auto計算值更大的寬度值

min-* 初始值 0（實踐爲auto）

  • min-wdith/height值爲auto合法
  • 數值變化無動畫

max-width 超越!important，超越最大

max-width會覆蓋width,不是普通的覆蓋，是超級覆蓋;比直接在元素的style屬性中設置CSS聲明還要高

min-width超越最大

min-width和max-width衝突; 遵循「超越最大」規則（注意不是「後來居上」規則）， min-width覆蓋

任意高度元素的展開收起動畫技術

咱們展開的元素內容是動態的，換句話說高度是不固定的 
.element {
　 max-height: 0;
　 overflow: hidden;
　 transition: max-height .25s;
}
.element.active {
　 max-height: 666px;　　/* 一個足夠大的最大高度值 */
}

max-height值比height計算值大的時候，元素的高度就是height屬性的計算高度canvas

注意

max-height不能設置很大，若是延遲時間長，會有延遲的感受。瀏覽器

內聯元素

內聯世界深刻的基礎—內聯盒模型

內容區域（content area）

圍繞 文字看不見的盒子，其大小僅受字符自己特性控制,本質上是一個 字符盒子（character box）；

可是有些元素，如圖片這樣的替換元素，其內容顯然不是文字，不存在字符盒子之類的，所以，對於這些元素，內容區域能夠當作元素自身markdown

內聯盒子

元素的「外在盒子」，用來決定元素是內聯仍是塊級 
<span>、<a>和<em>等

行框盒子

由一個一個「內聯盒子」組成的

包含盒子（「包含塊」）

由一行一行的「行框盒子」組成(CSS規範中，並無「包含盒子」的說法，更準確的稱呼應該是「 包含塊」)

幽靈空白節點

內聯元素的全部解析和渲染會有前面有一個「空白節點」；不佔據任何寬度，看不見也沒法經過腳本獲取（ 文檔聲明必須是HTML5文檔聲明（HTML代碼以下）） 
div {
　 background-color: #cd0000;
}
span {
　 display: inline-block;
}
<div><span></span></div>

深刻理解 content

替換元素

過修 改某個屬性值呈現的內容就能夠被替換的元素; 如「img」

特性

內容的外觀不受頁面上的CSS的影響

須要相似appearance屬性，或者瀏覽器自身暴露的一些樣式接口，例如::-ms-check{}

有本身的尺寸

其默認的尺寸（不包括邊框）是300像素×150像素，如<video>、<iframe>或者<canvas>

在不少CSS屬性上有本身的一套表現規則

vertical-align屬性，對於替換元素和非替換元素，vertical-align屬性值的解釋是不同

替換元素的尺寸計算規則

固有尺寸

替換內容本來的尺寸有着本身的寬度和高度

HTML尺寸

HTML原生屬性width和height屬性、<input>的size屬性、<textarea>的cols和rows屬性等

CSS尺寸

經過CSS的width和height或者max-width/min-width和max-height/min-height設置的尺寸

爲什麼圖片以及其餘表單類替換元素設置display:block寬度卻沒有100%容器

CSS尺寸 > HTML尺寸 > 固有尺寸
  1. 若是沒有CSS尺寸和HTML尺寸，則使用固有尺寸做爲最終的寬高
  2. 若是沒有CSS尺寸，則使用HTML尺寸做爲最終的寬高
  3. 若是有CSS尺寸，則最終尺寸由CSS屬性決定
  4. 內聯替換元素和塊級替換元素使用上面同一套尺寸計算規則

列外

在沒有src屬性下，各個瀏覽器表現的各不相同;src缺省的<img>不是替換元素，而是一個普通的內聯元素
  • IE瀏覽器下是28×30
  • Chrome瀏覽器下是0×0
  • Firefox瀏覽器下顯示的是0×22

應用

異步加載的圖片；使用一張透明的圖片佔位
<img>
<img>直接沒有src屬性;當圖片的src屬性缺省的時候，圖片不會有任何請求，是最高效的實現方式

圖片資源的固有尺寸是沒法改變

設置圖片個尺寸不是直接設置圖片的固有尺寸，圖片的固有尺寸是沒法設置；可是設定width和height會影響圖片的尺寸

查看示例app

緣由
  • 圖片中的content替換內容默認的適配方式是填充（fill）
  • <img>和其餘一些替換元素的替換內容的適配方式能夠經過object-fit屬性修改了；（相似於background-size原理）

替換元素和非替換元素的距離有多遠

替換元素和非替換元素之間只隔了一個src屬性

特色
  • Firefox瀏覽器下,最終的寬度是100%自適應父容器的可用寬度的。其表現和普通的<span>相似，已經徹底不是替換元素了
  • Chrome瀏覽器其實也有相似的表現，只是須要特定的條件觸發而已,不爲空的alt屬性值
應用
基於僞元素的圖片內容生成技術

查看示例異步

  • 不能有src屬性
  • 不能使用content屬性生成圖片
  • 須要有alt屬性並有值
  • Firefox下::before僞元素的content值會被無視，::after無此問題

替換元素和非替換元素之間只隔了一個CSS content屬性

在Chrome瀏覽器下，全部的元素都支持content屬性，而 其餘瀏覽器僅在::before/::after僞元素中才有支持

查看示例

注意
content屬性改變的僅僅是視覺呈現，當咱們以右鍵或其餘形式保存這張圖片的時候，所保存的仍是原來src對應的圖片

content與替換元素關係剖析

content屬性生成的內容都是 替換元素
  • content生成的文本是沒法選中、沒法複製;沒法被屏幕閱讀設備讀取，也沒法被搜索引擎抓取;替換的僅僅是視覺層
  • content動態生成值沒法獲取

content 內容生成技術

清除浮動

content字符內容生成

content圖片生成

div:before {
　 content: url(1.jpg);
}

content attr屬性值內容生成（比較經常使用）

img::after {
　  /* 生成alt信息 */
　  content: attr(alt); 
　  /* 其餘CSS略 */
}

字體圖標

理解content計數器

padding 屬性

padding 與元素的尺寸

內聯元素的padding在垂直方向一樣會影響佈局，但僅僅是視覺表現

內聯元素沒有 可視寬度和可視高度的說法（clientHeight和clientWidth永遠是0）， 垂直方向的行爲表現徹底受line-height和vertical-align的影響;視覺上並無改變和上一行下一行內容的間距

應用

增長連接或按鈕的點擊區域大小

利用內聯元素的padding實現高度可控的分隔線

元素髮生錨點定位;標題距離頁面的頂部有一段距離

padding 的百分比值

塊狀特性的元素

padding百分比值不管是 水平方向仍是垂直方向均是相對於寬度計算

內聯元素

  • 一樣相對於寬度計算
  • 默認的高度和寬度細節有差別
  • padding會斷行

padding 與圖形繪製

移動端菜單「三道槓」

雙層圓點圖形效果

margin 屬性

margin 與元素尺寸以及相關佈局

元素尺寸的相關概念

元素內部尺寸

  • $().innerWidth()和$().innerHeight()；
  • content + padding；
  • DOM API clientWidth clientHeight

元素尺寸

  • $().width()和$().height()；
  • content + padding + border；
  • DOM API offsetWidth offsetHeight

元素外部尺寸

  • $().outerWidth(true) $().outerHeight(true)
  • content + padding + border + margin

margin與元素的內部尺寸(針對具備塊狀特性的元素)

只有元素是「充分利用可用空間」(寬度自動100%)

margin才能夠改變元素的可視尺寸

應用

列表塊兩端對齊，一行顯示3個，中間有2個20像素的間隙 
ul {
　  margin-right: -20px;
}
ul > li {
　  float: left;
　  width: 100px;
　  margin-right: 20px;
}

正確看待 CSS 世界裏的 margin 合併

什麼是margin合併

塊級元素的上外邊距（margin-top）與下外邊距（margin-bottom）有時會合併爲單個外邊距

注意

  • 塊級元素，但不包括浮動和絕對定位元素，儘管浮動和絕對定位可讓元素塊狀化
  • 只發生在垂直方向，須要注意的是，這種說法在不考慮writing-mode的狀況

margin合併的多種場景

相鄰兄弟元素margin合併

p { margin: 1em 0; }
<p>第一行</p>
<p>第二行</p>

父級和第一個/最後一個子元素

解決margin合併

margin-top合併

  • 父元素設置爲塊狀格式化上下文元素（overflow：hidden）
  • 父元素設置border-top值
  • 父元素設置padding-top值
  • 父元素和第一個子元素之間添加內聯元素進行分隔

margin-bottom合併

  • 父元素設置爲塊狀格式化上下文元素（overflow：hidden）
  • 父元素設置border-bottom值
  • 父元素設置padding-bottom值
  • 父元素和第一個子元素之間添加內聯元素進行分隔
  • 父元素設置height、min-height或max-height

margin合併的計算規則

正正取大值

正負值相加

負負最負值

margin 合併的意義

兄弟元素的margin 合併

讓圖文信息的排版更加舒服天然

兄弟元素的margin 合併

在頁面中任何地方嵌套或直接放入任何裸""<div>""，都不會影響原來的塊狀佈局。

深刻理解 CSS 中的 margin:auto

觸發條件

width或height爲auto時;元素是具 有對應方向的自動填充特性

填充規則

填充閒置尺寸
  • 若是一側定值，一側auto，則auto爲剩餘空間大小
  • 若是兩側均是auto，則平分剩餘空間

應用

左右對齊

查看示例

margin 無效情形解析

  • display 計算值inline的內聯元素
  • 表格中的<tr>和<td>元素或者設置display 計算值是table-cell 或table-row
  • margin 合併的時候，更改margin 值

功勳卓越的 border 屬性

瞭解各類 border-style 類型

應用

三道槓

.icon-menu {
　 width: 120px;
　 height: 20px;
　 border-top: 60px double;
　 border-bottom: 20px solid;
}

border-color 和 color

border-color默認顏色就是color色值;沒有指定 border-color顏色值的時候，會使用當前元素的 color計算值做爲邊框色

border 與透明邊框技巧

增長點擊區域大小

.icon-clear {
　 width: 16px;
　 height: 16px;
　 border: 11px solid transparent;
}

字母 x—CSS 世界中隱匿的舉足輕重的角色

字母x與CSS中的x-height

圖片描述

  • ascender height: 上下線高度
  • cap height: 大寫字母高度
  • median: 中線
  • descender height: 下行線高度

字母x與CSS中的ex

ex是CSS中的一個相對單位; 小寫字母x的x-height（不受字體和字號影響的內聯元素的垂直居中對齊效果）；內聯元素默認是基線對齊的，而基線就是x的底部，而1ex就是一個x的高度；

查看示例

注意

  • vertical-align:middle

    • 指的是基線往上1/2 x-height高度;內聯元素垂直居中是對文字

內聯元素的基石 line-height

內聯元素的高度之本——line-height

  • 非替換元素的純內聯元素，其可視高度徹底由line-height決定
定了用來計算行框盒子高度的基礎高度; 經過改變「行距」來實現

查看示例

「行距」

![x-height2](F:markdown-筆記css世界x-height2.png)

行距 = line-height - font-size

做用

能夠瞬間明確咱們的閱讀方向，讓咱們閱讀文字更輕鬆

"半行距"

當前文字的上方和下方；這個「行距」的高度僅僅是完整「行距」高度的一半

計算公式

半行距 = (line-height - font-size )/2;

替換元素的高度與line-height的關係

line-height不能夠影響替換元素；可是在視覺上是受到line-height影響了，那是由於把「幽靈空白節點」的高度變高了；圖片爲內聯元素，會構成一個「行框盒子」，而在HTML5文檔模式下，每個「行框盒子」的前面都有一個寬度爲0的「幽靈空白節點」特性表現和普通字符如出一轍；

塊級元素的高度與line-height的關係

經過改變塊級元素裏面內聯級別元素佔據的高度實現

爲何 line-height 可讓內聯元素「垂直居中」

CSS中「行距的上下等分機制」

單行文字垂直居中

只須要line-height這一個屬性就能夠

近似垂直居中

文字字形的垂直中線位置廣泛要比真正的「行框盒子」的垂直中線位置低

多行文本垂直居中

須要line-height屬性的好朋友vertical-align屬性幫助

查看示例

深刻 line-height 的各種屬性值

line-height:normal

不一樣系統不一樣瀏覽器的默認line-height都是有差別

![3](F:markdown-筆記css世界3.png)

line-height應該重置爲多大的值,是使用數值、百分比值仍是長度值

數值

如line-height:1.5，其最終的計算值是和當前font-size相乘後的值

百分比值

如line-height:150%，其最終的計算值是和當前font-size相乘後的值

長度值

也就是帶單位的值，如line-height:21px或者line-height:1.5em;最終的計算值是和當前font-size相乘後的值

區別

  • 使用數值；全部的子元素繼承的都是這個值
  • 使用百分比值或者長度值；全部的子元素繼承的是最終的計算值

應用

重圖文內容展現的網頁或者網站
考慮到文章閱讀的溫馨度，line-height值能夠設置在1.6～1.8
偏重佈局結構精緻的網站
長度值或者數值

內聯元素 line-height 的「大值特性」

終父級元素的高度都是由 數值大的那個line-height決定

line-height 的好朋友 vertical-align

vertical-align 家族基本認識

線類

如baseline（默認值）、top、middle、bottom

文本類

如text-top、text-bottom；

上標下標類

如sub、super

數值百分比類

如20px、2em、20%等 百分比是相對於line-height的計算值計算

vertical-align 做用的前提

只能做用在display計算值爲 inline、inline- block，inline-table或table-cell的元素上

vertical-align 和 line-height 之間的關係

對字符而言， font-size越大字符的基線位置越往下，由於文字默認所有都是基線對齊，因此當字號大小不同的兩個文字在一塊兒的時候，彼此就會發生上下位移，若是位移距離足夠大，就會超過行高的限制，而致使出現意料以外的高度

應用

  • 圖片之間間隙問題
默認和基線（也就是這裏字母x的下邊緣）對齊，字母x往下的行高產生的多餘的間隙就嫁禍到圖片下面，讓人覺得是圖片產生的間隙，實際上，是 「幽靈空白節點」、line-height和vertical-align屬性共同做用的結果

深刻理解 vertical-align 線性類屬性值

inline-block與baseline

一個inline-block元素，若是裏面沒有內聯元素，或者overflow不是visible，則該元素的基線就是margin底邊緣；
不然其基線就是元素裏面最後一行內聯元素的基線

　應用

圖標與文字居中
  • 圖標高度和當前行高都是20px
  • 圖標標籤裏面永遠有字符
  • 圖標CSS不使用overflow:hidden保證基線爲裏面字符的基線，可是要讓裏面潛在的字符不可見

查看示例

vertial-align:top/bottom

  • 內聯元素：元素底部和當前行框盒子的頂部對齊
  • table-cell元素：元素底padding邊緣和表格行的頂部對齊

vertial-align:middle

  • 內聯元素：元素的垂直中心點和行框盒子基線往上1/2 x-height處對齊
  • table-cell元素：單元格填充盒子相對於外面的表格行居中對齊

查看示例

深刻理解 vertical-align 文本類屬性值

vertical-align:text-top

盒子的頂部和父級內容區域的頂部對齊

vertical-align:text-bottom

盒子的底部和父級內容區域的底部對齊

vertical-align 上標下標類屬性值

vertical-align:super

提升盒子的基線到父級合適的上標基線位置

vertical-align:sub

下降盒子的基線到父級合適的下標基線位置。

基於 vertical-align 屬性的水平垂直居中彈框

查看示例

魔鬼屬性 float

float 的本質與特性

浮動的本質就是爲了 實現文字環繞效果。 而這種文字環繞，主要指的就是文字環繞圖片顯示的效果

特性

包裹性

  1. 包裹

    • 假設浮動元素父元素寬度200px，浮動元素子元素是一個128px寬度的圖片，則此時浮動元素寬度表現爲「包裹」，就是裏面圖片的寬度128px;

  2. 自適應性

    • 若是浮動元素的子元素不僅是一張128px寬度的圖片，還有一大波普通的文字,浮動元素寬度就自適應父元素的200px寬度，最終的寬度表現也是200px

塊狀化並格式化上下文

元素一旦float的屬性值不爲none，則其display計算值就是block或者table

破壞文檔流

沒有任何margin合併

float 的做用機制

  1. 行框盒子若是和浮動元素的垂直高度有重疊，則行框盒子在正常定位狀態下只會跟隨浮動元素
  2. 塊狀盒子中的「行框盒子」被浮動元素限制，沒有任何的重疊

float 更深刻的做用機制

浮動錨點

是float元素所在的「流」中的一個點，這個點自己並不浮動，就表現而言如同一個空的內聯元素，有內聯元素天然就有「行框盒子」

浮動參考

是浮動元素對齊參考的實體: float元素的「浮動參考」是「行框盒子」，也就是float元素在當前「行框盒子」內定位

float 與流體佈局

查看示例

.animal元素沒有浮動，也沒有設置寬度， 所以，流動性保持得很好，設置margin-left、border-left或者padding-left均可以自動改變content box的尺寸，繼而實現了寬度自適應佈局效果

float 的自然剋星 clear

什麼是 clear 屬性

clear屬性是 讓自身不能和前面的浮動元素相鄰，注意這裏「前面的」3個字，也就是clear屬性對「後面的」浮動元素是漠不關心的

成事不足敗事有餘的 clear

查看示例

  • clear屬性只有塊級元素纔有效;
  • 因爲clear:both的做用本質是讓本身不和float元素在一行顯示，並非真正意義上的清除浮動

CSS 世界的結界—BFC

BFC 的定義

「CSS世界的結界」;經過一些特定的手段造成的封閉空間，裏面的人出不去，外面的人進不來，具備極強的防護力

表現原則

  • BFC元素是不可能發生margin重疊
  • BFC元素清除浮動

觸發BFC條件

  • <html>根元素
  • float的值不爲none
  • overflow的值爲auto、scroll或hidden
  • display的值爲table-cell、table-caption和inline-block中的任何一個
  • position的值absolute
只要元素符合上面任意一個條件， 就無須使用clear:both屬性去清除浮動

BFC 與流體佈局

img { float: left; }
.animal { overflow: hidden; }
<div class="father">
　 <img src="me.jpg">
　 <p class="animal">小貓1，小貓2，...</p>
</div>
通流體元素在設置了overflow:hidden後， 會自動填滿容器中除了浮動元素之外的剩餘空間，造成自適應佈局效果，並且這種自適應佈局要比純流體自適應更加智能

最佳結界 overflow

要想完全清除浮動的影響，最適合的屬性不是clear而是overflow。通常使用overflow:hidden，利用BFC的「結界」特性完全解決浮動對外部或兄弟元素的影響

overflow 剪裁界線 border box

當子元素內容超出容器寬度高度限制的時候，剪裁的邊界是 border box的內邊緣

注意

要儘可能避免滾動容器設置padding-bottom值，除了樣式表現不一致外，還會致使scrollHeight值不同
  • Chrome:若是容器可滾動（假設是垂直滾動），則padding-bottom也算在滾動尺寸以內
  • IE和Firefox瀏覽器忽略padding-bottom

overflow 與錨點定位

觸發條件

  • URL地址中的錨鏈與錨點元素對應並有交互行爲

    • 由」內而外」的錨點定位會觸發窗體的重定位，也就是說，若是頁面也是能夠滾動的，則點擊選項卡按鈕後頁面會發生跳動

  • 可focus的錨點元素處於focus狀態

    • 相似連接或者按鈕、輸入框等能夠被focus的元素在被focus時發生的頁面重定位現
    • 頁面窗體就有滾動條，絕大多數狀況下，也都不會發生跳動現象

錨點定位做用的本質

經過改變容器滾動高度或者寬度來實現;容器的滾動高度，而不是瀏覽器的滾動高度; 並且定位行爲的發生是由內而外

定位行爲的發生是由內而外

普通元素和窗體同時可滾動的時候，會由內而外觸發全部可滾動窗體的錨點定位行爲

overflow:hidden跟overflow:auto和overflow：scroll

別就在於有沒有那個滾動條。元素設置了overflow:hidden聲明， 裏面內容高度溢出的時候，滾動依然存在，僅僅滾動條不存在

float 的兄弟 position:absolute

當 absolute和float同時存在的時候， float屬性是無任何效果的

absolute 的包含塊

元素用來計算和定位的一個框

計算規則

  1. 根元素（不少場景下能夠當作是<html>）被稱爲「初始包含塊」，其尺寸等同於瀏覽器可視窗口的大小
  2. position是relative或者static，則「包含塊」由其最近的塊容器祖先盒的content box邊界造成
  3. position:fixed,是「初始包含塊」

  4. position:absolute，則「包含塊」由最近的position不爲static的祖先元素創建

    1. 內聯元素也能夠做爲「包含塊」所在的元素

      內聯元素的「包含塊」是由「生成的」先後內聯盒子決定的，與裏面的內聯盒子細節沒有任何關係

    2. 包含塊」所在的元素不是父塊級元素，而是最近的position不爲static的祖先元素或根元素

      1. 絕對定位元素默認的最大寬度就是「包含塊」的寬度

    3. 邊界是padding box而不是content box

      由於絕對定位元素的定位值和列表容器的padding值耦合在一塊兒了:咱們對padding間距進行調整的時候，絕對定位元素的right、top值也必定要跟着一塊兒調整，不然就會出現樣式問題

具備相對特性的無依賴 absolute 絕對定位

一個絕對定位元素，沒有任何left/top/right/bottom屬性設置，而且其祖先元素所有都是非定位元素: 當前位置

特性

  • 代碼更簡潔
  • 相對定位特性:僅僅是不佔據CSS流的尺寸空間而已

absolute 與 overflow

若是 overflow不是定位元素， 同時絕對定位元素和overflow容器之間沒有定位元素，則overflow沒法對absolute元素進行剪裁

若是overflow的屬性值不是hidden而是auto或者scroll，即便絕對定位元素高寬比overflow元素高寬還要大，也都不會出現滾動條

應用

  • 局部滾動的容器中模擬近似position:fixed的效果

查看示例

absolute 與 clip

clip屬性要想起做用，元素必須是 絕對定位或者固定定位

從新認識的 clip 屬性

fixed固定定位的剪裁

overflow屬性每每就力不能及了，由於fixed固定定位元素的包含塊是根元素，除非是根元素滾動條，普通元素的overflow是根本沒法對其進行剪裁的; 可是clip能夠

最佳可訪問性隱藏

它具 有更強的廣泛適應性，任何元素、任何場景均可以無障礙使用

深刻了解 clip 的渲染

  • clip隱藏僅僅是決定了哪部分是可見的，非可見部分沒法響應點擊事件等
  • 視覺上隱藏，可是元素的尺寸依然是本來的尺寸，在IE瀏覽器和Firefox瀏覽器下抹掉了不可見區域尺寸對佈局的影響，Chrome瀏覽器卻保留了

absolute 的流體特性

當 absolute 遇到 left/top/right/bottom 屬性

absolute元素才 真正變成絕對定位元素

若是咱們僅設置了一個方向的絕對定位,沒有設置方向依然保持了相對特性

absolute 的流體特性

流體特性:對立方向同時發生定位的時候

設置了對立定位屬性的絕對定位元素的表現神似普通的<div>元素，不管設置padding仍是margin，其佔據的空間一直不變，變化的就是content box的尺寸

absolute 的 margin:auto 居中

.element {
　 width: 300px; height: 200px;
　 position: absolute; 
　 left: 0; right: 0; top: 0; bottom: 0;
　 margin: auto;
}

position:relative 纔是大哥

relative 與定位

相對自身

相對於自身進行偏移定位

查看示例

  • 當相對定位元素同時應用對立方向定位值的時候；只有一個方向的定位屬性會起做用；孰強孰弱則是與文檔流的順序有關的，默認的文檔流是自上而下、從左往右

無侵入

即便本身移動，也會在原來的位置留下空間

當relative進行定位偏移的時候，通常狀況下不會影響周圍元素的佈局

relative 的最小化影響原則

  1. 儘可能不使用relative，若是想定位某些元素，看看可否使用「無依賴的絕對定位」
  2. 若是場景受限，必定要使用relative，則該relative務必最小化(再增長div嵌套，且沒有定位)

強悍的 position:fixed 固定定位

position:fixed 不同的「包含塊」

position:fixed固定定位元素的「包含塊」是<html>根元素；

理解 CSS 世界的層疊上下文和層疊水平

當內容發生層疊的時候，必定會有一個先後的層疊順序產生

什麼是層疊上下文

自成一個小世界。這個小世界中可能有其餘的「層疊結界」，而自身也可能處於其餘「層疊結界」中

什麼是層疊水平

同一個層疊上下文中元素在z軸上的顯示順序

理解元素的層疊順序

元素髮生層疊時有着特定的垂直顯示順序

![css3](F:markdown-筆記css世界css3.png)

務必牢記的層疊準則

誰大誰上

當具備明顯的層疊水平標識的時候，如生效的z-index屬性值，在同一個層疊上下文領域，層疊水平值大的那一個覆蓋小的那一個

後來居上

當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處於後面的元素會覆蓋前面的元素

深刻了解層疊上下文

層疊上下文的特性

  • 層疊上下文的層疊水平要比普通元素高
  • 層疊上下文能夠阻斷元素的混合模式
  • 層疊上下文能夠嵌套，內部層疊上下文及其全部子元素均受制於外部的「層疊上下文」
  • 每一個層疊上下文和兄弟元素獨立，也就是說，當進行層疊變化或渲染的時候，只須要考慮後代元素
  • 每一個層疊上下文是自成體系的，當元素髮生層疊的時候，整個元素被認爲是在父層疊上下文的層疊順序中

層疊上下文的建立

天生派

頁面根元素天生具備層疊上下文，稱爲根層疊上下文。
  • <html>

正統派

z-index值爲數值的定位元素的傳統「層疊上下文」。

position值爲relative/absolute以及Firefox/IE瀏覽器（不包括Chrome瀏覽器）下含有position:fixed聲明的定位元素，當其z-index值不是auto的時候，會建立層疊上下文

擴招派

其餘CSS3屬性
  • 元素爲flex佈局元素（父元素display:flex|inline-flex），同時z-index值不是auto
  • 元素的opacity值不是1
  • 元素的transform值不是none
  • 元素mix-blend-mode值不是norma
  • 元素的filter值不是none
  • 元素的isolation值是isolate
  • 元素的will-change屬性值爲上面2～6的任意一個（如will-change:opacity、will-chang:transform等）
  • 元素的-webkit-overflow-scrolling設爲touch

層疊上下文與層疊順序

  • 若是層疊上下文元素不依賴z-index數值，則其層疊順序是z-index:auto，可當作z:index:0級別
  • 若是層疊上下文元素依賴z-index數值，則其層疊順序由z-index值決定

z-index 負值深刻理解

z-index負值渲染的過程就是一個尋找第一個層疊上下文元素的過程，而後層疊順序止步於這個層疊上下文元素

z-index「不犯二」準則

定位元素一旦設置了z-index值

從普通定位元素變成了層疊上下文元素，相互間的層疊順序就發生了根本的變化，很容易出現設置了巨大的z-index值也沒法覆蓋其餘元素的問題

避免z-index「一山比一山高」的樣式混亂問題

line-height 的另一個朋友 font-size

font-size 和 vertical-align 的隱祕故事

line-height的部分類別屬性值是相對於font-size計算的，vertical-align百分比值屬性值又是相對於line-height計算的

理解 font-size 與 ex、 em 和 rem 的關係

font-size值越大，天然ex對應的大小也就大

em相對於當前元素，

rem相對於根元素，本質差異在於當前元素是多變的，根元素是固定的，也就是說，若是使用rem，咱們的計算值不會受當前元素font-size大小的影響

理解 font-size 的關鍵字屬性值

font-size默認值是medium，而medium計算值僅與瀏覽器設置有關

font-size:0 與文本的隱藏

並非全部小於12px的font-size都會被看成12px處理，有一個值例外，那就是0，也就是說，若是font-size:0的字號表現就是0，那麼文字會直接被隱藏掉，而且只能是font-size:0，哪怕設置成font-size:0.0000001px，都仍是會被看成12px處理的

字體屬性家族的你們長 font-family

瞭解襯線字體和無襯線字體

襯線字體

筆畫開始、結束的地方有額外裝飾並且筆畫的粗細會有所不一樣的字體

無襯線字體

沒有這些額外的裝飾，並且筆畫的粗細差很少

等寬字體的實踐價值

font-family: Consolas, Monaco, monospace;

等寬字體與代碼呈現

利於代碼呈現

ch單位與等寬字體佈局

ch相關的字符是0，就是阿拉伯數字0;1ch表示一個0字符的寬度，因此6個0所佔據的寬度就是6ch

字體家族其餘成員

貌似粗獷、實則精細無比的 font-weight

用數值做爲font-weight屬性值，必須是100～900的整百數

font-weight不管是設置300、400、500仍是600，文字的粗細都沒有任何變化，只有到700的時候纔會加粗一下

由於咱們的系統裏面缺少對應粗細的字體

具備近似姐妹花屬性值的 font-style

italic

用當前字體的斜體字體

oblique

單純地讓文字傾斜

font 屬性

做爲縮寫的 font 屬性

font-size和font-family是必需的

使用關鍵字值的 font 屬性

使用關鍵字做爲屬性值的時候必須是獨立的，不能添加font-family或者font-size之類

font 關鍵字屬性值的應用價值

但願非Windows系統下不要使用「微軟雅黑」字體，而是使用其系統字體 
html { font: menu; }
body { font-size: 16px; }

html { font: small-caption; }
body { font-size: 16px; }

html { font: status-bar; }
body { font-size: 16px; }

讓網頁的字體跟系統走

真正瞭解@font face 規則

@font face 的本質是變量

@font-face {
　font-family: 'example';
　src: url(example.ttf);
　font-style: normal;
　font-weight: normal;
　unicode-range: U+0025-00FF;
}

font-family

font-family能夠當作是 一個字體變量;

本來系統就有的字體名稱,不能隨便設置

src

引入的字體資源能夠是系統字體，也能夠是外鏈字體

  • 使用系統安裝字體

    • local()

  • 使用外鏈字體

    • url()

font-style

重置對應字體樣式或字重下該使用什麼字體

font-weight

它定義了不一樣字重、使用不一樣字體

unicode-range

讓特定的字符或者特定範圍的字符使用指定的字體

文本的控制

text-indent 與內聯元素縮進

對文本進行縮進控制
  • text-indent的百分比值是相對於當前元素的「包含塊」計算的，而不是當前元素
  • 僅對第一行內聯盒子內容有效
  • 非替換元素之外的display計算值爲inline的內聯元素設置text-indent值無效，若是計算值是inline-block/inline-table則會生
  • <input>標籤按鈕text-indent值無效
  • <button>標籤按鈕text-indent值有效(有兼容問題)
  • <input>和<textarea>輸入框的text-indent在低版本IE瀏覽器下有兼容問題

letter-spacing 與字符間距

控制字符之間的間距，這裏說的「字符」包括英文字母、漢字以及空格等

特性

  • 繼承性
  • 默認值是normal而不是0
  • 支持負值，且值足夠大的時候，會讓字符造成重疊，甚至反向排列（非IE瀏覽器）
  • 和text-indent屬性同樣，不管值多大或多小，第一行必定會保留至少一個字符
  • 支持小數值，即便0.1px也是支持的，但並不總能看到效果，這與屏幕的密度有關
  • 暫不支持百分比值

word-spacing 與單詞間距

增長空格的間隙寬度; 是做用在「空格」上

瞭解 word-break 和 word-wrap 的區別

word-break

是全部的都換行，絕不留情，一點兒空隙都不放過

word-wrap

若是這一行文字有能夠換行的點，如空格或CJK（中文/日文/韓文）之類的，就不打英文單詞或字符的主意了，在這些換行點換行，至於對不對齊、好很差看則不關心

white-space 與換行和空格的控制

white-space的處理模型

如何處理元素內的空白字符

white-space與最大可用寬度

當white-space設置爲nowrap的時候，元素的寬度此時表現爲「最大可用寬度」，換行符和一些空格所有合併，文本一行顯示

如何解決 text-decoration 下劃線和文本重疊的問題

border 
a {
　text-decoration: none;
　border-bottom: 1px solid;
}

瞭解:first-letter/:first-line僞元素

深刻:first-letter僞元素及其實例

::first-letter僞元素生效的前提

  1. 元素的display計算值必須是 block、inline-block、list-item、display:table和display:flex、table- cell或者table-caption，其餘全部display計算值都沒有用

  2. 常見的標點符號、各種括號和引號在::first-letter僞元素眼中所有都是「輔助類」字符

    • ·@#%&()（）[]【】{}:："「」;；'‘’》《,，.。？?!！…、/\

查看示例

::first-letter僞元素能夠生效的CSS屬性

  1. 全部字體相關屬性：font、font-style、font-variant、font-weight、font-size、line-height和font-family
  2. 全部背景相關屬性：background-color、background-image、background- position、background-repeat、background-size和 background-attachment
  3. 全部margin相關屬性：margin、margin-top、margin-right、margin-bottom和margin-left
  4. 全部padding相關屬性：padding、padding-top、padding-right、padding- bottom和padding-left
  5. 全部border相關屬性：縮寫的border、border-style、border-color、border-width和普通書寫的屬性
  6. color屬性
  7. text-decoration、text-transform、letter-spacing、word-spacing（合適情境下）、line-height、float和vertical-align（只有當float爲none的時候）等屬性

應用

  • 電商價格 符號添加字體大小
電商產品常常會有價格，價格前面通常都有一個¥符號，這個符號字體每每會比較特殊，字號也比較大，同時和文字的數值有幾像素的距離

注意

  • 僞元素會受到影響
p:before {
　content: '新聞：';
}
p:first-letter {
　color: silver;
}

<p>這是新聞的標題……</p>

故事相對較少的:first-line僞元素

向文本的首行添加特殊樣式

生效前提與能夠生效的CSS屬性同上

CSS 世界的 background 很單調

隱藏元素的 background-image 到底加不加載

一個元素若是display計算值爲none

  • 在IE瀏覽器下（IE8～IE11，更高版本不肯定）依然會發送圖片請求
  • Firefox瀏覽器不會

  • 至於Chrome和Safari瀏覽器則彷佛更加智能一點

    • 若是隱藏元素同時又設置了background-image，則圖片依然會去加載
    • 若是父元素的display計算值爲none，則背景圖不會請求，此時瀏覽器或許放心地認爲這個背景圖暫時是不會使用的

元素的顯示與隱藏

隱藏實踐

元素不可見，同時不佔據空間；輔助設備沒法訪問，同時不渲染

<script type="text/html">
　<img src="1.jpg">
</script>

元素不可見，同時不佔據空間；輔助設備沒法訪問，但資源有加載，DOM可訪問

.dn {
　display: none;
}

元素不可見，同時不佔據空間；輔助設備沒法訪問，但顯隱的時候能夠有transition淡入淡出效果

.hidden {
　position: absolute;
　visibility: hidden;
}

元素不可見，不能點擊，輔助設備沒法訪問，但佔據空間保留

.vh {
　visibility: hidden;
}

元素不可見，不能點擊，不佔據空間，但鍵盤可訪問

.clip {
　position: absolute; 
　clip: rect(0 0 0 0);
}
.out {
　position: relative; 
　left: -999em;
}

元素不可見，不能點擊，但佔據空間，且鍵盤可訪問

.lower {
  position: relative;
　z-index: -1;
}

元素不可見，但能夠點擊，並且不佔據空間

.opacity {
　position: absolute;
　opacity: 0;
　filter: Alpha(opacity=0);
}

元素看不見，但位置保留，依然能夠點能夠選

.opacity {
　opacity: 0;
　filter: Alpha(opacity=0);
}

display 與元素的顯隱

display:none元素的background-image圖片不加載

  • Firefox瀏覽器下不加載；包括父元素display:none也是如此

  • Chrome和Safari瀏覽器

    • 父元素display:none，圖片不加載
    • 自己背景圖所在元素隱藏，則圖片依舊會去加載
  • 對IE瀏覽器而言，不管怎樣都會請求圖片資源

display:none元素的image圖片全部瀏覽器下依舊都會請求圖片資源

一些屬性也是自然display:none

hidden類型的<input>輸入框

動畫實現

  • display:none顯隱控制並不會影響CSS3 animation
  • 會影響CSS3 transition過渡效果執行（transition每每和visibility屬性走得比較近）

visibility 與元素的顯隱

不只僅是保留空間這麼簡單

visibility的繼承性

父元素設置visibility:hidden，子元素也會看不見

visibility與CSS計數器

visibility:hidden不會影響計數器的計數

visibility與transition

CSS3 transition支持的CSS屬性中有visibility，可是並無display

和 border 形似的 outline 屬性

語法和border屬性很是相似，分寬度、類型和顏色，支持的關鍵字和屬性值與border屬性如出一轍

萬萬不可在全局設置 outline:0 none

  • 在默認狀態下，對處於focus狀態的元素，瀏覽器會經過虛框或者外發光的形式進行區分和提示;
  • 這種虛框或者外發光效果是很是有必要的，不然用戶根本就不知道本身當前聚焦在哪一個元素上，甚至所以而迷失

真正的不佔據空間的 outline 及其應用

outline屬性確實不佔據任何空間，輪廓寬度設置得再寬廣，也不會影響任何元素的任何佈局，而且outline輪廓是可穿透的

改變水平流向的 direction

direction 簡介

.direction {
    direction: ltr;　 // 默認值
    direction: rtl;
}
  • ltr是初始值，表示left-to-right，就是從左往右的意思。目前東亞以及歐美文字書寫就是從左往右的；
  • rtl表示right-to-left，就是從右往左的意思。阿拉伯語（Arabic）、希伯來語（Hebrew）等的書寫就是從右往左的

應用

如何處理這種不一樣設備、不一樣按鈕順序的問題

@media screen and (max-width: 480px) {
　.dialog-footer { direction: rtl; }
}

改變 CSS 世界縱橫規則的 writing-mode

writing-mode 本來的做用

用來實現文字豎向呈現 
.writing-mode {
    writing-mode: lr-tb | tb-rl | tb-lr (IE8+);
    writing-mode: horizontal-tb | vertical-rl | vertical-lr;
}

writing-mode 不經意改變了哪些規則

基於 本來水平方向才適用的規則所有均可以在垂直方向適用

普通塊元素可使用margin:auto實現垂直居中

水平方向也能margin合併

使用text-align:center實現圖片垂直居中

使用text-indent實現文字下沉效果

.btn:active {
　text-indent: 2px;
}
.verticle-mode {
　writing-mode: tb-rl;　　
　writing-mode: vertical-rl;
}

查看示例

實現全兼容的icon fonts圖標的旋轉效果

查看示例

利用高度的高度自適應佈局

當文檔變成垂直流的時候，height高度自然自適應

writing-mode 和 direction 的關係

writing-mode

改變 文檔流爲垂直方向

direction

改變的是 垂直方向的內聯元素的文本方向

ps:有什麼不清楚、錯誤，歡迎提出。

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