《CSS 世界》 PDF版 鏈接 , 使用紙質書效果更好

第4章 深入理解 content

4.1 content - 替換元素

1. 替換元素是指內(nèi)容可以被替換。如：<img>,<object>,<video>,<iframe>,表單元素。所有替換元素都是內(nèi)聯(lián)水平元素。
2. 替換元素特點

• 外觀不受css控制，如無法改變單選復選的樣式
• 有默認的尺寸，大多為300px*150px，img為0，表單元素根據(jù)瀏覽器本身
• css屬性有自身的一套規(guī)則，替換元素的基線為元素下邊緣，非替換元素是字符x的下邊緣
• 沒有::after和::before

3. <input type="button">和<button>區(qū)別在于前者的white-space是pre后者是normal，內(nèi)容足夠多時<button>自動換行。
4. 無法改變替換元素內(nèi)容的固有尺寸。

<div class="div"></div> 
<!--這個 div 的圖片大小不會變-->
<style>
div:before {    
  content: url(1.jpg);    
  display: block;    
  width: 200px; 
  height: 200px;}
</style>

5. 替換元素img沒有src時，火狐瀏覽器下就是一個內(nèi)聯(lián)標簽，而谷歌瀏覽器要有一個不為空的alt值，IE則有一個默認的占位符。
6. 谷歌瀏覽器下所有元素都支持content，但其他瀏覽器只有::after和::before支持。
7. content屬性生成的對象叫匿名替換元素，有如下特點

• content生成的文本不能復制和選中
• 能左右:empty元素，即使用content生成了文字，但依然當做空
• content動態(tài)生成值無法獲取

8. css counter

• counter-reset
• counter-increment
• counter()/counters()

<style>
.reset { padding-left: 20px; counter-reset: wangxiaoer; line-height: 1.6; color: #666; }
.counter:before { 
    content: counters(wangxiaoer, '-') '. '; 
    counter-increment: wangxiaoer; 
 }
</style>
<div class="reset">
    <div class="counter">我是王小二
        <div class="reset">
            <div class="counter">我是王小二的大兒子</div>
            <div class="counter">我是王小二的二兒子
                <div class="reset">
                    <div class="counter">我是王小二的二兒子的大孫子</div>
                    <div class="counter">我是王小二的二兒子的二孫子</div>
                    <div class="counter">我是王小二的二兒子的小孫子</div>
                </div>
            </div>
            <div class="counter">我是王小二的三兒子</div>
        </div>
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四
        <div class="reset">
            <div class="counter">我是王小四的大兒子</div>
        </div>
    </div>
</div>

4.2 溫和的 padding

內(nèi)聯(lián)元素的 clientHeight和clientWidth永遠是0,垂直方向的行為表現(xiàn)完全受line-height和vertical-align的影響, 而設置 padding可以對background 產(chǎn)生影響
技巧:

1. 增加鏈接或按鈕的可點擊大小同時不影響當前的內(nèi)容布局
   artical a { paddingL .25em 0;}

2.登錄 | 注冊垂直分格符號 在這里 css 模擬出的管道符號的vertical-align是從 baseline 起步的,然后向下走1px,向上走10px

a + a:before {
  content: "";
  font-size: 0;
  padding: 10px 3px 1px;
  margin-left: 6px;
  border-left: 1px solid gray;
}

自身變化卻不影響周圍元素定位的方法有relative box-shadow outline inline 元素的 padding,其中inline 元素的 padding會影響外部尺寸(增加可點擊面積), 而box-shadow和outline不會

4.2.2 padding的百分比值

• padding 的百分比值是相對于父元素寬度計算的
• 內(nèi)聯(lián)元素的 padding 會斷行 , 參見 P78
• padding:50%沒顯示為正方形的原因是內(nèi)聯(lián)元素的垂直 padding會讓幽靈空白節(jié)點顯現(xiàn), 那么設置font-size:0即可顯示為正方形

4.2.3 標簽元素內(nèi)置的 padding

1. ol/ul列表內(nèi)置padding-left且單位是px, Chrome 下是40px
2. 很多表單元素內(nèi)置padding:
   • 所有瀏覽器<input> <textarea> <button>內(nèi)置padding
   • 部分瀏覽器<select>內(nèi)置padding
   • 所有瀏覽器<radio> <checkbox>無內(nèi)置padding
   • <button>按鈕的padding最難控制! 表現(xiàn)為 Firefox 設置 padding 為0但左右仍然有;IE7下button 里文字變多時左右 padding 逐漸增大(可通過設置overflow:visible消除).
   • 可使用<label>來解決上述<button> padding兼容性問題, 參見P80

4.2.4 padding 與圖形繪制

帶動畫的三道杠:

原書中使用padding繪制的確可行,不過要追求動畫的話還是選擇創(chuàng)建三個標簽比較好

    .line{
      width: 150px;
      height: 3px;
      background-color: #00CCFF;
      position: absolute;
      top:50%;
      left:50%;
      margin-left: -75px;
      transition : all 0.3s ease-in-out;
     }
    .line-middle{ margin-top: 0px;}
    .line-top{ margin-top:-40px; }
    .line-bottom{ margin-top:40px; }
    .wrap:hover .line-top{transform: translateX(0) translateY(40px) rotate(-45deg);}
    .wrap:hover .line-bottom{transform: translateX(0) translateY(-40px) rotate(45deg);}
    .wrap:hover .line-middle{opacity:0}

雙層圓點效果 比較簡單所以不貼代碼了,只是說可以用 padding 實現(xiàn)

4.3 激進的 margin

• 可以用margin-left:auto來替代float:left實現(xiàn)右對齊效果
• 塊級元素垂直居中的一種方法

.father{width:300px;height:150px;position:relative;}
.son{
  position:absolute:
  top:0;right:0;left:0;bottom:0;
  width:200px;height:100px;
  margin:auto;
}

此時 .son自動填充父級元素可用尺寸為300x150,但是它寬高被限制, 那么多余的空間就是margin:auto計算的空間, 也就是說,
為什么原始情況下margin: auto 0不會讓元素垂直居中?
答: 因為width和height的對應方向填充特性不同, width:auto會填充至100%,但height:auto會使得元素高度變?yōu)?. 而margin:auto的計算規(guī)則是對應方向可用填充空間-元素實際大小,剩余部分進行 auto劃分

4.3.5 margin 無效情形

詳細情況建議看書

1. inline的非替換元素(例如span)的垂直margin無效, 但inline 替換元素(如img)的垂直 margin 有效,而且沒有margin 合并問題
2. display: table-cell | table-row 的marigin 無效
3. margin 合并的時候, 若父元素設置margin-top:50px則子元素嘗試設置的margin-top:30px無效
4. 絕對定位元素非定位方位的margin 無效. 例如img{ top:10%; left:30%},此時right和bottom處于auto狀態(tài),也就是右側和底部沒有定位, 此時在這兩個方位上設置margin就看不到定位變化.可以結合前面的top:0 ; bottom:0; left:0; right:0的 margin計算規(guī)則來理解
5. 定高容器的子元素的margin-bottom無效 , 定寬容器的子元素的margin-right無效
6. 書中6.4節(jié)和5.3節(jié)(圖片的位置被vertical-align:baseline限制死了導致margin-top不起作用)相關的內(nèi)容

4.4 功勛卓越的 border

• 實現(xiàn)一個沒有下邊框的邊框效果時, 結合設置寬度為0和style 為 none會使得渲染性能最高div{border:1px solid; border-bottom:0 none;}
• border-color的默認值會使用當前元素的color值, 據(jù)此可以簡化hover時的 css 代碼
• 可以用border繪制梯形和三角形

第5章 內(nèi)聯(lián)元素與流

5.2 內(nèi)聯(lián)元素的基石 line-height

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

例如設計師標注了文字字形上邊緣到圖片下邊緣間距20px, 同時font-size: 14px; line-height:1.5 , 那么文字的實際margin-top值應該是17px, 因為(14*1.5 - 14)/2再向下取整是3px. 一般文字上間距向下取整, 文字下邊距向上取整

• line-height可以影響替換元素(如圖片高度)嗎? 答案是 不可以. 圖文混排時line-height只能決定最小高度, 剩下的替換元素帶來的高度增加還會受到vertical-align的影響
• 對于塊級元素line-height對其本身是沒有任何作用的, 如果改變line-height的時候塊級元素的高度跟著變化 , 實際上是通過改變塊級元素里面的內(nèi)聯(lián)元素占據(jù)的高度實現(xiàn)的
• 設置display:inline-block的時候會重置從父元素繼承來的line-height, 同時該'行框盒子'會附帶一個幽靈空白節(jié)點來使父元素的line-height生效, 該效果在實現(xiàn)多行文本居中的時候有體現(xiàn)
• line-height的值為150% | 1.5em | 18px時先在父元素計算后再繼承 , 為1.5時先繼承再在子元素里計算
• CSS 中計算行高的時候, 行高值不要向下舍入,而要向上舍入,例如下面的代碼,在 Chrome 中1.42857*14px就會以19px 呈現(xiàn), Firefox 是20px 倒沒錯, 為了讓Chrome它們都呈現(xiàn)20px設置1.42858更好一點

body{
  line-height:1.42858;   /* 20px/14px ~ 1.4285714 */
  font-size: 14px;
}

• 幾個靠在一起的inline元素會共同組成一個"行框盒子",該行框盒子表現(xiàn)出來的line-height會取它們(包括幽靈空白節(jié)點)的最大值

5.3 line-height 的好朋友 vertical-align

• vertical-align:baseline相當于vertical-align:0
• vertical-align只能對內(nèi)聯(lián)元素以及table-cell元素起作用. 有些屬性會在背后默默改變display的計算值從而導致vertical-align不起作用(例如浮動和絕對定位會讓元素塊狀化)
• 一個 inline-block 元素，如果里面沒有內(nèi)聯(lián)元素，或者 overflow 不是 visible， 則該元素的基線就是其 margin 底邊緣;否則其基線就是元素里面最后一行內(nèi)聯(lián)元素的基線。
• 掘金

為什么 span{ font-size:20px ; line-height:20px}后auto計算的高度是28px或其它不等于20的數(shù)值?

• 測試發(fā)現(xiàn), PingFang SC 的文字形成的content-area的高度大小 = font-size*1.4例如50px 對應70px , 而 Arial 就是font-size:100px對應113px , 另外 Firefox 瀏覽器可能會比 Chrome多1px
• W3C 說 行內(nèi)盒內(nèi)容區(qū)域高度在規(guī)范里面沒有定義，瀏覽器可以自己折騰
• 結論是: 行內(nèi)盒的內(nèi)容區(qū)域高度計算沒有統(tǒng)一的標準，不同的字體或者不同的瀏覽器都可能導致不同的結果，且其高度與 line-height 無關。由此我們無法確切地獲得一個跨瀏覽器的行內(nèi)盒的內(nèi)容區(qū)域高度。同樣我們也無法確切獲得一個跨瀏覽器的行內(nèi)盒高度（因為其計算式里面就包括了不定變量內(nèi)容區(qū)域高度）
• 但是, 我們應該準確計算行盒高度(最好把幽靈空白節(jié)點設為line-height:0)

為什么 span 的父元素高度受到父元素的 font-size 和自身的 font-size 影響?

答:因為對字符而言, font-size越大字符的基線位置就越往下, 因為文字默認全部都是基線對齊, 所以當字號大小不一樣的兩個文字在一起的時候, 彼此就會發(fā)生上下位移

不同字號文字高度超出行高示意圖

清除幽靈空白節(jié)點給圖片帶來的圖片間隙方法 間隙示意

1. 圖片塊狀化
2. 設置line-height:0或者通過font-size:0; line-height:默認浮點數(shù)的途徑來間接得到line-height:0
3. 圖片設置其它vertical-align屬性, 例如top | middle | bottom

不定長定寬彈框 垂直居中

.container{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  overflow:auto;
}
/* inline-block配合偽類的解決方案*/
.container{
  font-size: 0;
  text-align:center;
}
.container:before{
  content:'';
  display:inline-block;
  width: 0;
  height:100%;
  vertical-align:middle;
}
.dialog{
  display:inline-block;
  vertical-align:middle;
  font-size: 14px;
}
/* flex 的解決方法 如果有2個 dialog,他們會先左右平分空間,再居中顯示*/
.container{
  display:flex;
}
.dialog{
  margin : auto;
}
/* flex 還能這樣寫  如果有兩塊 dialog,它們會按照 flex 的指定對齊方式兩個人一起顯示在中間*/
.container{
  display:flex; justify-content:center; align-items:center;
}
.dialog{}
/* 父元素設置 table-cell 子元素設置 inlne-block 也可以, 但是這樣父元素就不兼容 fixed 全屏顯示了, 定寬高的話倒是還不錯*/

第6章 流的破壞與保護

6.1 魔鬼 float

• float會讓幾乎所有元素的display變成block(除了inline-table會變成table以外) , 因此如果再多寫一句display:block就浪費空間了.
• float的本意是構建"文字環(huán)繞效果" , 不推薦依賴它來布局, 但是有必要了解它來解釋一些樣式 bug
• "文字環(huán)繞效果"是"父級高度塌陷"和"行框盒子區(qū)域限制"共同作用的結果
• 如果行框盒子和浮動元素的垂直高度有重疊, 則行框盒子在正常定位狀態(tài)下只會跟隨浮動元素, 而不會發(fā)生重疊 . 例如文字會自動避開左側的float:left的圖片,此時無論給文字的行框盒子設置margin-left為負多少甚至是負無窮也不會生效(但是設置大于圖片寬度的正值是有效的).
• 在 CSS 世界中, float 元素的"浮動參考"是"行框盒子" , 具體表現(xiàn)為: 三行文字的右側有個float:right的元素的話, 它會緊跟在第3行的行框盒子右側. 若float 元素周圍都是塊級元素, 那么可視為它正在依賴一個叫做浮動錨點(float anchor)的點,這個點就表現(xiàn)而言像一個沒有 magin border padding 的空內(nèi)聯(lián)元素

6.2 float 的天然克星 clear

• 官方文檔定義: "clear 元素的邊不和前面的浮動元素相鄰"

經(jīng)典例子: 10個設置了float:left的 li, 再設置li:nth-of-type(3){ clear:both}, 結果表現(xiàn)為2行:
■ ■
■ ■ ■ ■ ■ ■ ■ ■
即clear 屬性讓自身不和前面的浮動元素相鄰, 但對后面的浮動元素不聞不問

• clear屬性只對塊級元素有效

6.3 BFC

• 實用設置方法:
  • overflow:auto/hidden
  • display:inline-block for IE6/IE7
  • display:table-cell
• 能發(fā)揮作用的場景:
  • 消除父子元素margin 合并 : 在父元素上設置 BFC
  • 消除兄弟元素margin 合并 在其中一個節(jié)點外包裹一層 BFC
  • 清除浮動

6.4 overflow

• overflow-x和overflow-y的 visible值和其他值不共存
• 雖然文字打點的效果核心是text-overflow:ellipsis但是該表現(xiàn)依賴于overflow:hidden; white-space : nowrap;
• tabindex值相同時, 越靠前越在外的元素越先被訪問 , tabindex="-1"的元素不會被tab 到 詳解

6.5 position:absolute

• absolute和float一樣具有包裹性
  • 讓寬度表現(xiàn)從"包裹性"切換為"最大可用寬度"
    正常情況下，文檔流中的文字內(nèi)容不可超過包含塊，元素的大小也不可超過包含塊。但存在一種特殊情況，即是連續(xù)的英文字符和數(shù)字是可以突破這個限制的。除此之外我們也可以手動設置white-space:nowrap讓寬度表現(xiàn)從包裹性變成最大可用寬度 可以參考 P182 關于包含塊的部分
• absolute也有"塊狀化"特性, 所以經(jīng)常一起出現(xiàn)的一句display:block可以說是多余的
• 提問:absolute 和 relative 相對的是 content-box / padding-box / border-box / margin-box?
  答: 被定位元素拿自己的margin-box去撞參考元素的padding-box . 參考 P183 & demo
• "無依賴絕對定位" : 即absolute的元素未設置top/left/right/bottom時所處的狀態(tài), 也不需要設置position:relative的父元素, 特別適合用來加New Hot 圖標等腳標,無依賴絕對定位元素會自動跟在文字的前面或后面,再用 margin-top 和 margin-left 微調(diào)位置即可. 腳標 demo 下拉列表 demo

6.6 absolute 的流體特性

• position:absolute;top:0;right:0;bottom:0;left:0相比position:absolute;top:0;left:0;width:100%;height:100%的區(qū)別在于前者保留了流體特性, 換句話說前者充滿了可用空間的是虛擬的margin-box, 而后者是content-box,即使強制設置box-sizing:border-box也還是和 margin-box差了一點.

6.9 大哥position:relative

• relative設置固定px單位的偏移時是相對自身, 而百分比值是相對于包含塊
• top和bottom這兩個垂直方向的百分比值是相對高度計算的
• 與絕對定位的拉伸表現(xiàn)不同, relative的top/bottom 或left/right同時設置時, 要整個你死我活,只有一個能生效(與文檔流順序有關) . 默認的文檔流是自上而下\從左往右, 因此top/bottom同時使用只有top生效, 同理left
• relative 最小化影響原則:
  • (1) 盡量不使用 relative , 定位元素時優(yōu)先使用"無依賴的絕對定位"
  • (2) 如果場景受限一定要用relative, 則務必relative 最小化

 <div class="box2" style ="position:relative">
    <img src="https://eleme.setsuna.wang/touma2.jpg" alt="" style="position:absolute;right:0;top:0">
    <p>some thing</p>
    <p>some thing</p>
    <p>some thing</p>
    <p>some thing</p>
  </div>
<!--  relative最小化原則, 把上面的代碼按照下面的方式來定位 img, 能保持更好的 index 層級 -->
<div class="box1">
    <div style ="position:relative">
      <img src="https://eleme.setsuna.wang/touma2.jpg" alt="" style="position:absolute;right:0;top:0">
    </div>
    <div class="box1">sth</div>
    <div class="box1">sth</div>
    <div class="box1">sth</div>
    <div class="box1">sth</div>
  </div>

6.10.3 fixed 背景鎖定

具體參考書中 P209 , 思路是 移動端@touchmove.preventPC 端根元素 overflow:hidden, 同時在 window 系統(tǒng)中要注意解決滾動條消失帶來的寬度變化以及頁面晃動問題, 可使用透明的 border-right 來填充windows 滾動條的原位置

第7章 CSS 世界的層疊規(guī)則

對于relative / absolute元素, 當其index不為auto的時候 , 就會創(chuàng)建一個層疊上下文, 如下面的例子,后者判斷層級時優(yōu)先比較了所在的層疊上下文

<div style="position:relative; z-index:auto;">
    <!-- 美女 -->
    <img src="1.jpg" style="position:absolute; z-index:2;">  
</div>
<div style="position:relative; z-index:auto;">
    <!-- 美景 -->
    <img src="2.jpg" style="position:relative; z-index:1;">  
</div>

<div style="position:relative; z-index:0;">
    <!-- 美女 -->
    <img src="1.jpg" style="position:absolute; z-index:2;">  
</div>
<div style="position:relative; z-index:0;">
    <!-- 美景 -->
    <img src="2.jpg" style="position:relative; z-index:1;">  
</div>

CSS3會創(chuàng)建層疊上下文的屬性

• z-index值不為auto的flex項(父元素display:flex|inline-flex).
• 元素的opacity值不是1.
• 元素的transform值不是none.
• 元素mix-blend-mode值不是normal.
• 元素的filter值不是none.
  -元素的isolation值是isolate.
• will-change指定的屬性值為上面任意一個。
• 元素的-webkit-overflow-scrolling設為touch.

再看一個例子:

<style>
  .container{
    background: white;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    width:400px;
    height: 150px;
    position:relative;
    z-index:-1;
  }
  .container:before,.container:after{
    content:'';
    position: absolute;
    width: 90%;
    height: 20%;
    background-color: antiquewhite;
    bottom:0;
  }
  .container:before{
    transform: skewX(12deg) rotate(4deg);
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
    z-index:-1;
    transform-origin: bottom right;
    right:0;
    bottom:0;
  }
  .container:after{
    transform: skewX(-12deg) rotate(-4deg);
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
    z-index:-1;
    transform-origin: bottom left;
    left:0;
    bottom:0;
  }
  .box{
    width: 300px;
    height: 200px;
  }
  .fixed{
    z-index:-50;
    margin-top:-70px;
    background: red;
    width: 400px;
    height: 400px;
  }
</style>
<body>
  <div class="container">
    ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl ashgelkasdzghgkjhdsxfhl 
  </div>
</body>

表現(xiàn)為:

container成為了層級上下文,所以排序為層級上下文的文字內(nèi)容> z-index 為負值的兩個框框 > 層級上下文的背景,對應頂圖中2 > 6 > 7 的排序

對應頂圖中 5 > 6的排序

7.7 z-index "不犯二" 準則

"不犯二準則" :
"對于非浮層元素,避免設置z-index值,z-index沒有任何理由超過2

換句話說, 對于頁面上的主體元素遵循 z-index不犯二 準則 , 而對于浮層元素(小圖標定位->彈框組件層->彈框中的出錯提示效果 層級越來越高)使用層級計數(shù)器來遞增, 也不要太大, 9就差不多了

第8章 強大的文本處理能力

使用和系統(tǒng)相同的字體:

html { font:menu;  }
body { font-size: 16px; }

個人喜歡:

body { font-family: "Helvetica","Microsoft Yahei",sans-serif; }

8.5 @font-face

@font-face {
  font-family: 'sell-icon';
  src:  url('fonts/sell-icon.eot?s6c1hl');
  src:  url('fonts/sell-icon.eot?s6c1hl#iefix') format('embedded-opentype'),
    url('fonts/sell-icon.ttf?s6c1hl') format('truetype'),
    url('fonts/sell-icon.woff?s6c1hl') format('woff'),
    url('fonts/sell-icon.svg?s6c1hl#sell-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'sell-icon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-arrow_lift:before {
  content: "\e900";
}

1. eot 是 IE 私有的,IE6~8僅支持這一種字體格式, 如果無需兼容 IE8可以果斷舍棄 eot
2. ? : IE9之前的版本會把?之后的內(nèi)容當做 url 的參數(shù), #iefix可以讓請求地址短一些,因為請求地址是不包含錨點標志#及其后面的內(nèi)容的
3. 寫兩個 src: 測試工程師測試低版本的 IE 瀏覽器喜歡使用兼容模式, 而兼容模式的 IE7和 IE8不認識問號解決方案,導致第二個 src 無法識別, 因此多了第一行
4. svg為了支持iOS 4.1及其之前版本, 現(xiàn)在可以果斷舍棄
5. ttf作為系統(tǒng)安裝字體比較多, Web 開發(fā)也能用 , 尺寸略大, 不需兼容安卓4.3之前版本的話可以舍棄
6. woff和woff2是 web open font format的縮寫, 加載速度快, Web 開發(fā)首選字體
7. format讓瀏覽器提前知道字體的格式, 以決定是否加載這個字體,而不是加載完了再判斷.
8. font-family和font-style在擁有同字體名的多字體設置時才有用,例如響應式圖標字體效果 參見 P252
   
   響應式圖標字體效果
9. unicode-range 可以針對指定字符使用其它字體替換, 例如替換中文引號

8.6 文本控制

• letter-spacing控制字符間距, 可以用來制作字符飛入效果
• word-spacing原意是控制單詞之間距離, 但實際上只控制了空格的寬度
  
• word-break:break-all所有都換行 , word-wrap:break-word如果有"空格 CJK 字符"之類的換行點存在就不打英文的主意了
• 一本萬利的text-transform: uppercase , 適用于身份證輸入x 的時候自動轉換為大寫 X / 驗證碼輸入時轉換大寫 demo

雖然顯示為大寫了但是 value 值還是小寫, 所以傳后臺時要轉換一下

• :first-letter的顏色權重總是多了一層 P277
  • :first-letter可以用來單獨調(diào)整￥這類控制價格的字符的樣式 , 而不必額外創(chuàng)造一個 dom 結構了
• white-space不同取值意義

9 元素的裝飾和美化

• CSS1-CSS3 <color>顏色知識知多少？
  CSS1&2的時候只支持17個顏色關鍵字, CSS3新增的顏色關鍵字在IE8中是不支持的.

9.2.2 與眾不同的background-position百分比計算方式

• positionX = ( 容器的高度 - 圖片的高度) * percentX
• positionY = ( 容器的寬度 - 圖片的寬度) * percentY

11 cursor

• 可以使用各種各樣的 cursor 來提高用戶體驗,例如zoom-in zoom-out default none help text move nwse-resize等等
• direction可以改變元素左右排序
• writing-mode:vertical-rl古詩豎版樣式

附

• 改變元素的收縮性可通過object-fit(替換元素)或
  width:-webkit-fit-content | fill-available | min-content來操作,具體內(nèi)容去翻鑫空間