css 超出文字头尾相接滚动_前端的一些雕虫小技，从100%和滚动条说起
1、100%和滾動條
當我們在css中把html和body同時設為100%時，會出現滾動條
html,body {width: 100%;height: 100%;}原因是html和body之間有8px的margin，這個margin怎么來的呢，我們在chrome中用F12看一下
這個8px的margin來自于user agent stylesheet，那這個user agent stylesheet又是啥玩意呢，在mdn上面，我們可以看到
這里面說的用戶代理樣式就是user agent stylesheet，可見這是瀏覽器內定的樣式，這個8px的margin就是流量拿起自己內定的。在css里面是有個內定的層疊順序的，層疊順序越大，級別越高，user agent stylesheet是屬于最低級的樣式，用戶如果修改了margin，那么user agent stylesheet就無效了，這個順序說明如下：
因為body設置成了widht和height都是100%，再加上margin的8px，這樣它的上級容器html的width和height各加上了16px，就超出了100%，所以就出現了滾動條。
解決這個問題很簡單，把這個8px的margin設置成0就行了
body {margin: 0px;}由于我們自定義的css的層疊級別比user agent stylesheet高，所以margin被設置成了0px，滾動條也就消失了
2、同級別的樣式一決高下
如果是同一級別的樣式，一般都是內聯的樣式要高于外嵌的樣式，比如下面的代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>test</title><link href="style.css" rel="stylesheet" type="text/css" /><style>html,body {width: 100%;height: 100%;}body {margin: 0px;}</style> </head><body></body></html>style.css的代碼
body {margin: 1px !important;}在頁面和外部的css里面都設置了body的margin，但因為層疊優先級的問題，body的margin還是0。
如果我們想要改變這個順序呢，如果大家仔細看上面出現過的這張圖，就有答案了
使用!important就可以讓外部css的優先級排到內聯css前面，我們修改style.css試一下
body {margin: 1px !important;}看下頁面的情況
現在生效的已經是style.css里面配置的margin了。
那么什么情況下應該使用!important呢？
!important就像一種特殊手段，更像一種標識，表示這條css的配置很重要，不應該被其他css覆蓋掉，所以切記不要隨便用，只有必要時采用。下面是MDN總結的一些規則：
總結
以上是生活随笔為你收集整理的css 超出文字头尾相接滚动_前端的一些雕虫小技，从100%和滚动条说起的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： protractor端到端测试简介
- 下一篇： 2017年html5行业报告,云适配发布