CSS之Reset – 我的笔记本

HTML标签在浏览器中都有默认的样式,例如p标签有上下边距,strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别,例如ul默认带有缩进样式,在IE下,它的缩进是由margin实现的,而在Firefox下却是由padding实现的。
因为市面上浏览器众多,而不同浏览器之间的默认值又不统一,所以我们需要使用CSS Reset,其实就是给所有元素默认样式,而不用浏览器的默认样式。
比如下面的Reset样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Reset</title>
    <style type="text/css">
        *, *:before, *:after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <h1>Use a CSS Reset</h1>
    <h3>Resetting a browser's base styles gives developers a clean slate to work with.</h3>
    <form action=".">
    <div class="text">
        <label for="type-text">Text (text)</label>
        <input type="text" name="type-text" id="type-text">
    </div>
    <div class="text">
        <label for="type-search">Search (search)</label>
        <input type="search" name="type-search" id="type-search">
    </div>
    <div class="text">
        <label for="type-tel">Telephone (tel)</label>
        <input type="tel" name="type-tel" id="type-tel">
    </div>
    <div class="text">
        <label for="type-url">URL (url)</label>
        <input type="url" name="type-url" id="type-url">
    </div>
    <div class="text">
        <label for="type-email">E-mail (email)</label>
        <input type="email" name="type-email" id="type-email">
    </div>
    <div class="text">
        <label for="type-datetime">Date and Time (datetime)</label>
        <input type="datetime" name="type-datetime" id="type-datetime">
    </div>
    <div class="text">
        <label for="type-date">Date (date)</label>
        <input type="date" name="type-date" id="type-date">
    </div>
    <div class="text">
        <label for="type-month">Month (month)</label>
        <input type="month" name="type-month" id="type-month">
    </div>
    <div class="text">
        <label for="type-week">Week (week)</label>
        <input type="week" name="type-week" id="type-week">
    </div>
    <div class="text">
        <label for="type-time">Time (time)</label>
        <input type="time" name="type-time" id="type-time">
    </div>
    <div class="text">
        <label for="type-datetime-local">Local Date and Time (datetime-local)</label>
        <input type="datetime-local" name="type-datetime-local" id="type-datetime-local">
    </div>
    <div class="text">
        <label for="type-number">Number (number)</label>
        <input type="number" name="type-number" id="type-number" min="0" max="20">
    </div>
    <div class="text">
        <label for="type-range">Range (range)</label>
        <input type="range" name="type-range" id="type-range" min="0" max="100">
    </div>
    <div class="text">
        <label for="type-color">Color (color)</label>
        <input type="color" name="type-color" id="type-color">
    </div>
    <div class="submit-area">
        <input type="submit" value="Submit" name="submit-1">
    </div>
    </form>
</body>
</html>

一些常见的CSS Reset

  • box-sizing继承自html

    html {
      box-sizing: border-box;
    }
    *, *::before, *::after {
    box-sizing: inherit;
    }
  • 单独设置button的重置属性和一次性设置重置属性

    button {
        background: none;
        border: none;
        color: inherit;
        font: inherit;
        outline: none;
        padding: 0;
    }
    
    button {
        all: unset;
    }
  • 使用:not()可以指定不应用的样式

    /* add border */
    .nav li {
        border-right: 1px solid #666;
    }
    /* remove border */
    .nav li:last-child {
        border-right: none;
    }
    .nav li:not(:last-child) {
        border-right: 1px solid #666;
    }

参考链接

Related Posts

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注