前端 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;
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM