CSS一些概念知識及參考連接

時間 2019-12-11

標籤 css 一些概念知識參考連接欄目 CSS 简体版

原文原文鏈接

一、爲何瀏覽器解析 css 選擇器是從右到左的

參考：https://github.com/zwwill/blog/issues/2css

二、僞元素和僞類的單冒號和雙冒號

參考：https://www.jianshu.com/p/ebb86a086a87 html

三、重排和重繪

當渲染樹中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而發生改變時，瀏覽器會使渲染樹中受到影響的部分失效，並從新構造這部分渲染樹，這就是重排。完成重排後，瀏覽器會從新繪製受影響的部分到屏幕中，該過程被稱爲重繪。git

重排一定會引起重繪，但重繪不必定會引起重排。github

參考：https://www.cnblogs.com/zichi/p/4720000.html、http://www.javashuo.com/article/p-hiifunrc-kp.htmlweb

四、JS操做動畫和css動畫的區別

參考：https://blog.csdn.net/qinlulucsdn/article/details/80664183、https://www.cnblogs.com/simba-lkj/p/6139066.html編程

五、CSS選擇器優先級

!important > 行內樣式 > ID選擇器 > 類 = 僞類 = 屬性選擇器 > 標籤 = 僞元素 > 通配符 > 繼承瀏覽器

爲何CSS是從右到左解析的，參考：http://www.cnblogs.com/zhaodongyu/p/3341080.htmlsass

六、BFC佈局規則

塊格式化上下文（Block Formatting Context，簡稱BFC），能夠理解爲塊級元素中的塊級子元素的佈局規則。只有塊級子元素參與。性能優化

6.一、BFC佈局規則

內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算

屬於同一個BFC內的塊級元素的佈局符合 BFC 佈局規則，BFC 元素內的塊級子元素也能夠是一個 BFC，該子元素仍是會符合BFC父元素的佈局規則，但該子元素裏面的子元素即子子元素就和外面的BFC的子元素不屬於同一個BFC了。less

下面的第一個P元素和第二個P元素不屬於同一個 BFC 內：

<body>
  <p>Haha</p>
  <div class="wrap">
     <p>Hehe</p>
  </div>
</body>

.wrap {
    overflow: hidden;
}

6.二、擁有BFC的元素

根元素
float屬性不爲none
position爲absolute或fixed
display爲inline-block, table-cell, table-caption, flex, inline-flex
overflow不爲visible

6.三、BFC的做用

6.3.一、實現自適應兩欄佈局

利用BFC佈局規則第四條：BFC的區域不會與float box重疊。能夠實現自適應兩欄佈局

6.3.二、清除內部浮動

根據BFC佈局規則第六條：計算BFC的高度時，浮動元素也參與計算

6.3.三、防止垂直 margin 重疊

根據BFC佈局規則第二條：Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。經過使兩個塊級元素在不一樣的 BFC 內能夠解決margin 重疊的問題。

詳情參考：https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

七、瀏覽器前綴

參考：https://blog.csdn.net/jlj_cs/article/details/44204863

八、css性能優化

8.一、慎重選擇高消耗的樣式

高消耗屬性在繪製前須要瀏覽器進行大量計算，好比：box-shadows、border-radius、transparency、transforms、CSS filters（性能殺手）

8.二、避免頻繁重排

當發生重排的時候，瀏覽器須要從新計算佈局位置與大小，常見的重排元素：width、height、padding、margin、display、border-width、position、top、left、right、bottom、

8.三、不氾濫使用float

Float在渲染時計算量比較大，儘可能減小使用。

8.四、合理使用選擇器

CSS選擇器的匹配是從右向左進行的，因此有些看似很高效的選擇器實際對性能消耗很高，好比：

#header>a {font-size: bold}　　　　子選擇器，瀏覽器必須遍歷頁面中全部的 a 元素而且肯定其父元素的 id 是否爲 header 。
#header a {font-size: bold}　　　　後代選擇器開銷更大，在遍歷頁面中全部 a 元素後還需向其上級遍歷直到根節點。

因此應該合理使用選擇器：

保持簡單，不要使用嵌套過多過於複雜的選擇器。
通配符和屬性選擇器效率最低，須要匹配的元素最多，儘可能避免使用。
避免使用標籤或 class 選擇器限制 id 選擇器
不要爲了追求速度而放棄可讀性與可維護性。

8.五、經過CSS繼承減小代碼量

常見的能夠繼承的屬性好比：color，字體font系列，visibility，文本系列text-indent、text-align等等。

不可繼承的好比：position，display，float，background等

8.六、使用link加載樣式表，而不是@import方式

使用@import引入CSS會影響瀏覽器對樣式表的並行下載。使用@import引用的CSS文件只有在引用它的那個css文件被下載、解析以後，瀏覽器纔會知道還有另一個css須要下載，這時纔去下載，而後下載後開始解析、構建render tree等一系列操做。這就致使瀏覽器沒法並行下載所需的樣式文件。

8.七、精簡樣式文件，刪除沒用樣式

參考：http://baijiahao.baidu.com/s?id=1603253323416106525&wfr=spider&for=pc

九、less 和 sass

9.一、變量

@nice-blue: #5B83AD;
#header { color: @light-blue; }

9.二、混合

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}

9.三、帶參數混合

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#header {
  .border-radius(4px);
}

9.四、嵌套規則

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

9.五、運算

任何數字、顏色或者變量均可以參與運算

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

9.六、命名空間

將一些變量或者混合模塊打包封裝，更好的組織CSS和屬性集的重複使用

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
  }
  .tab { ... }
}
#header a {
  #bundle > .button;
}

9.七、做用域

LESS 中的做用域跟其餘編程語言很是相似，首先會從本地查找變量或者混合模塊，若是沒找到的話會去父級做用域中查找，直到找到爲止.

@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
#footer {
  color: @var; // red  
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。