zoukankan      html  css  js  c++  java
  • 前端 CSS 一些标签默认有padding

    一个html body标签 默认有 margin外边距属性

    比如ul标签,有默认的padding-left值。

    那么我们一般在做站的时候,是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

    我们现在可以使用通配符选择器

    *{
      padding:0;
      margin:0;    
    }

    页面

    <!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">
        <title>Title</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
    </html>

    ul里面 所有的padding,magin属性都被清除了

    所以页面布局时候使用通配符选择器

    But,这种方法效率不高。

    所以我们要使用并集选择器来选中页面中应有的标签(不用背,因为有人已经给咱们写好了这些清除默认的样式表,reset.css)

    https://meyerweb.com/eric/tools/css/reset/

    官网的

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
  • 相关阅读:
    CentOS安装Maven
    多线程好文推荐
    [转]HashMap详解
    [转]Nginx介绍-反向代理、负载均衡
    数据库连接池内存泄漏问题的分析和解决方案
    RocketMQ文章
    [转]35张图就是为了让你深入AQS
    Jenkins总结1-部署jenkins
    理解SQLAlchemy的表继承关系(4)--高级应用
    理解SQLAlchemy的表继承关系(3)-Concrete Table Inheritance
  • 原文地址:https://www.cnblogs.com/mingerlcm/p/10886149.html
Copyright © 2011-2022 走看看