[TOC] # [定義好類名](http://www.w3cplus.com/css/css-sass-scss-compass-less-bem-smacss-oocss-acss-ccss-wtfss.html) 閱讀這些不同的框架和方法，可以讓你更好的如何定義類名。它也讓我意識到，我這么多年都是草率的在寫CSS。 今年我打算使用 SMACSS，OOCSS 和 BEM 這些方法來寫CSS，并且讓自己元素的命名與Bootstrap框架中常用組件保持更緊密的結合，比如說按鈕，警告信息，表單元素等。 我最近就是按種思維方式在調自己的框架，其中包括如何組織CSS文件： 1. 讓團隊寫CSS有一個標準規范——Harry Roberts寫了一個很有名的[CSS指南](https://cssguidelin.es/) 2. JavaScript鉤子是使用的類名，盡量加上前綴`js-` 3. 在樣式中避免使用`#id` # css選擇器的優先權  CSS 優先級法則： 1. 選擇器都有一個權值，權值越大越優先； 2. 當權值相等時，后出現的樣式表設置要優于先出現的樣式表設置； 3. 創作者的規則高于瀏覽者：即網頁編寫者設置的CSS 樣式的優先權高于瀏覽器所設置的樣式； 4. 繼承的CSS 樣式不如后來指定的CSS 樣式； 5. 在同一組屬性設置中標有 `!important` 規則的優先級最大； # CSS 基礎筆記 [CSS 基礎布局](https://www.jianshu.com/p/602f0872a9b5)  > [CSS盒模型:提高你的CSS的基礎](http://www.instantshift.com/2009/11/16/css-box-model-the-foundation-for-improving-your-css/) # box-sizing 語法： ~~~ box-sizing: content-box|border-box|inherit; ~~~ | 值 | 描述 | | --- | --- | | content-box | 此值為其默認值，其讓元素維持W3C的標準Box Model，也就是說元素的寬度/高度（width/height）等于元素邊框寬度（border）加上元素內邊距（padding）加上元素內容寬度 /高度（content width/height）即：Element Width/Height = border+padding+content width/height。 | | border-box | 此值讓元素維持IE傳統的Box Model（IE6以下版本），也就是說元素的寬度/高度等于元素內容的寬度/高度。<br>從上面Box Model介紹可知，我們這里的content width/height包含了元素的border、padding、內容的width/height【此處的內容寬度/高度=width /height-border-padding】。 | | inherit | 規定應從父元素繼承 box-sizing 屬性的值。 | ## W3C 的標準Box Model: 1. 外盒尺寸計算（元素空間尺寸）： 元素空間高度 = content height + padding + border + margin （height 為內容高度） 元素空間寬度 = content width + padding + border + margin （width 為內容寬度） 2. 內盒尺寸計算（元素大小）： 元素高度= content height + padding + border 元素寬度= content width + padding + border ## IE 傳統下 Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）: 1. 外盒尺寸計算（元素空間尺寸）： 元素空間高度 = content Height + margin（height 包含了元素內容 width，padding，border） 元素空間寬度 = content Width + margin（width 包含了元素內容 width，padding，border） 2. 內盒尺寸計算（元素大小）： 元素高度 = content Height 元素寬度 = content Width IE 怪異模式下的盒模型才符合我們傳統認識里的盒子，這樣會更加直觀一些，不用再做一層轉換。 # 為什么我的`vertical-align`屬性不起作用？ vertical-align屬性只會在 inline-block（table-cell也可以理解為inline-block水平）水平的元素上起作用。所以，類似下面的代碼就不會起作用： ```css div{vertical-align:middle;} ``` 所謂`inline-block`水平的元素，就是既可以“吸”又可以“咬”的元素，既可以與`inline`水平元素混排，又能設置高寬屬性的元素。哪些元素呢，例如圖片，按鈕，單復選框，單行/多行文本框等HTML控件，只有這些元素默認情況下會對vertical-align屬性起作用。 雖然`vertical-align`屬性只會在`inline-block`（`table-cell`也可以理解為`inline-block`水平）水平的元素上起作用，但是其影響到的元素涉及到`inline`屬性的元素，這里千萬記住，inline 水平元素受`vertical-align`屬性而位置改變等不是因為其對`vertical-align`屬性敏感或起作用，而是受制于整個 line box 的變化而不得不變化的，這個后面會較為深入的分析。 # line boxes 模型 先看下面一段普通的HTML代碼： ```html <p>這是一行普通的文字，這里有個 <em>em</em> 標簽。</p> ``` 這段HTML代碼涉及到4種boxes： 1. 首先是p標簽所在的**containing box**，此box包含了其他的boxes； 2. 然后就是**inline boxes**，如下圖標注:  inline boxes不會讓內容成塊顯示，而是排成一行，如果外部含inline屬性的標簽(span,a,cite等)，則屬于inline boxes，如果是個光禿禿的文字，則屬于匿名inline boxes。 3. **line boxes**，見下圖的標注：  在containing boxes里，一個一個的inline box組成了line boxes。這是浮動影響布局的關鍵box類型，下面會詳細闡述。 4. **content area**，見下圖標注：  content area 是一種圍繞文字看不見的box。content area的大小與font-size大小相關。 > [理解 inline 元素的盒模型](https://www.jianshu.com/p/468bddc9e568) # CSS background 的簡寫 ``` background: [background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color]; ``` 其中， * `<bg-size>`必需緊跟`<position>`后且以`/`分隔，開如`center/80%`。 * `<background-color>`只在最后一層中進行書寫和使用。 > [CSS background 的簡寫](https://wayou.github.io/2019/12/14/CSS-background-%E7%9A%84%E7%AE%80%E5%86%99/) # 浮動的原始意義是什么？ 浮動出現的意義其實**只是用來讓文字環繞圖片而已**，僅此而已。而我們目前用浮動實現頁面布局本不是浮動該干的事情。 浮動破壞了圖片的inline box，產生了兩個結果：一是圖片無法與文字同行顯示，脫離了其原來所在的line box鏈；二是沒有了高度（無inline box -> 無line box -> 無高度）。而這些結果恰恰是文字環繞圖片顯示所必須的。 # CSS模型高度 在目前的CSS的世界中，所有的高度都是有兩個CSS模型產生的： 1. 一個是**box盒狀模型**，對應CSS為”height+padding+margin”； 前者的height屬性分為明顯的height值和隱藏的height值，所謂隱藏的height值是指圖片的高度，一旦載入一張圖片，其內在的height值就會起作用，即使您看不到”height”這個詞。 2. 另外一個是**line box模型**，對應樣式為”line-height”。 而后者針對于文字等這類inline boxes的元素（圖片也屬于inline boxes，但其height比line-height作用更兇猛，故其inline boxes高度等于其自身高度，對line-height無反應），inline boxes的高度直接受line-height控制（改變line-height文字拉開或重疊就是這個原因），而真正的高度表現則是由每行眾多的inline boxes組成的line boxes（等于內部最高的inline box的高度），而這些line boxes的高度垂直堆疊形成了containing box的高度，也就是我們見到的div或是p標簽之類的高度了。 對于line box模型的元素而言，沒有inline boxes，就沒有高度了，而浮動卻恰恰做了這么齷齪的事情，其直接將元素的inline boxes也破壞了，于是這些元素也就沒有了高度。 # 滾動條從哪里來？ 原因是： html { overflow:auto;} 是默認的。 如果不設置html height怎么會有滾動條，原來html有點特殊，它的widht和height是由瀏覽器窗口控制的。  # 設置html,body高度100%的作用 幾乎所有的瀏覽器，默認的偏移`margin`是在body元素上，而不是html的`padding`.（通過做實驗確實如此）有些還是body的padding，所有重置頁邊距用`body{margin:0;padding:0}`缺一不可。 在標準模式下，也就是網頁頭部寫`DOCTYPE`的時候，**body不是html頁面的根元素，html才是根元素**，如果僅僅設置body的100%，不設置html元素的高度為100%，那么body的高度不會生效，之所以不生效，是因為**如果要以百分比設置元素的尺寸，必要以父元素的尺寸作為參考，如果父元素沒有設置尺寸，自然不會生效**。 在標準模式下，由于沒有設置html的高度，所以body的高度100%就沒有參考高度，于是也就導致div的百分比高度無效，所以需要設置為： ```css html,body{ height:100%; } ``` > [由html,body{height:100%}引發的對html和body的思考](http://blog.csdn.net/javaloveiphone/article/details/51098972) # 偽類與偽元素 下面是根據用途分類的偽類總結圖和根據冒號分類的偽元素總結圖：   就像 pseudo classes (偽類)一樣， 偽元素添加到選擇器，但不是描述特殊狀態，它們允許您**為元素的某些部分**設置樣式。 # 為什么不建議使用css @import 我們確實要避免使用css @import， 原因：是這樣做會**導致css無法并行下載**，因為使用@import引用的文件只有在引用它的那個css文件被下載、解析之后，瀏覽器才會知道還有另外一個css需要下載，這時才去下載，然后下載后開始解析、構建`render tree`等一系列操作。瀏覽器在頁面所有css下載并解析完成后才會開始渲染頁面（Before a browser can begin to render a web page, it mustdownload and parse any stylesheets that are required to lay out thepage. Even if a stylesheet is in an external file that is cached,rendering is blocked until the browser loads the stylesheet from disk.），**因此 css @import 引起的 css 解析延遲會加長頁面留白期。 所以，要盡量避免使用 css @import 而盡量采用 link 標簽的方式引入**。 # 邊框 ## border-radius 規范描述： `border - * - radius`屬性的兩個長度或百分比值定義了四分之一橢圓的半徑，其定義外邊界邊緣的角的形狀（請參見下圖）。 提供2個參數，2個參數以 `/` 分隔，每個參數允許設置1~4個參數值，第1個參數表示水平半徑，第2個參數表示垂直半徑，如第2個參數省略，則默認等于第1個參數。 如果任一長度為零，則角是正方形，而不是圓角。 水平半徑的百分比是指邊框的寬度，而垂直半徑的百分比是指邊框的高度。不允許使用負值。  'border-top-left-radius：55pt（水平半徑） 25pt（垂直半徑）'的兩個值定義角的曲率。 示例： ~~~ border-radius: 2em 1em 4em / 0.5em 3em; is equivalent to： border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em; ~~~ > 來自 W3C規范： [https://www.w3.org/TR/css3-border/#border-radius](https://www.w3.org/TR/css3-border/#border-radius) ## border-image [http://www.cnblogs.com/MuYunyun/p/5693615.html#\_label10](http://www.cnblogs.com/MuYunyun/p/5693615.html#_label10) # clip-path 在 clip-path 出現之前，CSS2.1 中的 clip 屬性也有裁剪的效果，但是它只支持矩形，而且只對 position:absolute 或者 position:fixed 的元素生效，使用方式如下： ~~~ copyclip: rect(60px, 60px, 60px, 60px); // 標準寫法 clip: rect(60px 60px 60px 60px); // 兼容 ie 及 火狐瀏覽器 復制代碼 ~~~ 注意: rect 參數的順序為 top、right、botton、left 所有主流瀏覽器都支持 clip 屬性，在雪碧圖（ CSS Sprite ）的展示仍然有它的用武之地，但是**由于 clip 屬性的局限性， clip 已經被 clip-path 代替**。