前端的一些雕蟲小技，從100%和滾動條提及

時間 2019-11-17

標籤前端一些雕蟲小技 100% 滾動條提及简体版

原文原文鏈接

一、100%和滾動條css

當咱們在css中把html和body同時設爲100%時，會出現滾動條html

html,
        body {
            width: 100%;
            height: 100%;
        }

緣由是html和body之間有8px的margin，這個margin怎麼來的呢，咱們在chrome中用F12看一下chrome

這個8px的margin來自於user agent stylesheet，那這個user agent stylesheet又是啥玩意呢，在mdn上面，咱們能夠看到瀏覽器

這裏面說的用戶代理樣式就是user agent stylesheet，可見這是瀏覽器內定的樣式，這個8px的margin就是流量拿起本身內定的。在css裏面是有個內定的層疊順序的，層疊順序越大，級別越高，user agent stylesheet是屬於最低級的樣式，用戶若是修改了margin，那麼user agent stylesheet就無效了，這個順序說明以下：ui

由於body設置成了widht和height都是100%，再加上margin的8px，這樣它的上級容器html的width和height各加上了16px，就超出了100%，因此就出現了滾動條。3d

解決這個問題很簡單，把這個8px的margin設置成0就好了代理

body {
           margin: 0px;
        }

因爲咱們自定義的css的層疊級別比user agent stylesheet高，因此margin被設置成了0px，滾動條也就消失了code

二、同級別的樣式一決高下htm

若是是同一級別的樣式，通常都是內聯的樣式要高於外嵌的樣式，好比下面的代碼blog

<!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的代碼