box model

為了加一個新功能，抄了部分頁面順帶一大坨 css 代碼，結果原有部分頁面樣式就亂掉了。罪魁禍首就是兩者的盒模型不同(如上圖)，其中 W3C 模型也被成為 standards mode，IE 模型也被稱為 quirks mode。當然部分選擇器相同也產生了污染。

在調查原因的過程中，發現一個做法可以很好的分隔開不同來源的 css。即在利用 less 的 mixin 特性，在新加入的 css 外套一層選擇器，在這層選擇器內定義相應的盒模型，然后將相關的 html 外也套一個對應的選擇器，這樣就完成了隔離。

舉個栗子，A 站是 quirks mode，從該站抄來部分代碼如下

html

...

...

css

#header { color: #6c94be;}

...

首先對 css 加入外層的自定義選擇器進行隔離，同時定義盒模型(本例為 quirks mode)

.site-a,

.site-a *,

.site-a *:before,

.site-a *:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

#header { color: #6c94be;}

...

}

以上 less 部分編譯后生成的 css 將會限定在 .site-a 的子元素內生效。

然后在相關 html 中也套入對應選擇器

總結

以上是生活随笔為你收集整理的css抄页面,如何正确的抄网页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。