一个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;

}

前端 CSS 一些标签默认有padding的更多相关文章

  1. css 去除标签默认样式

    p,ul,ol,li,dl,dt,dd { list-style-type: none; margin: 0; padding: 0;}

  2. 前端css盒模型及标准文档流及浮动问题

    1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...

  3. 前端之常用标签和CSS初识

    外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时 外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层di ...

  4. htmlcss笔记--标签默认值样式重置css reset

    1.<a>标签 有默认文字修饰:下划线, 去除:text-decoration:none; text-decoration属性值: none 默认.定义标准的文本. underline 定 ...

  5. 总结那些有默认margin,padding值的html标签

    一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...

  6. html标签默认属性值之margin;padding值

    一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16, ...

  7. 扯一扯前端css的整体架构设计：（2）base基础类的那些事儿

    周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...

  8. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  9. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

随机推荐

  1. hdu 1506 单调栈

    #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #defin ...

  2. 复试笔试复习 & bd面试总结

    计算机网络: 1.OSI模型中提供端到端服务的是传输层 2.波特率的含义是每秒钟信号变化的次数 3.非屏蔽双绞线中5类网线的数据速率为100Mbps,连接器是RJ-45 4.虚电路在数据链路层实现,电 ...

  3. JMeter 性能测试实例

    一.性能测试分类: 1.基准测试 2.并发测试 3.负载测试 4.压力测试 1.基准测试: 也是单用户测试,测试环境确定以后,对业务模型中的重要业务做单独的测试,获取单用户运行时的各项性能指标,为多用 ...

  4. 非父子组件通过事件传值-vue

    1.创建中央事件总线:额外的 new Vue()2.$emit 触发事件3.$on 监听事件 在使用组件的文件中: <template> <div> <x-test :b ...

  5. IO流二

    1 数据流(了解) 1.1 概述 为了方便的操作java语言的基本数据类型和String类型的数据,可以使用数据流. 数据流的分类: DataInputStream DataOutputStream ...

  6. Java语言Lang包下常用的工具类介绍_java - JAVA

    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 无论你在开发哪中 Java 应用程序,都免不了要写很多工具类/工具函数.你可知道,有很多现成的工具类可用,并且代码质量都 ...

  7. 【leetcode】848. Shifting Letters

    题目如下: 解题思路:本题首先要很快速的计算出任意一个字符shift后会变成哪个字符,其实也很简单,让shift = shift % 26,接下来再做计算.第二部是求出每个字符要shift的次数.可以 ...

  8. linux运维、架构之路-Kubernetes集群部署

    一.kubernetes介绍        Kubernetes简称K8s,它是一个全新的基于容器技术的分布式架构领先方案.Kubernetes(k8s)是Google开源的容器集群管理系统(谷歌内部 ...

  9. luogu 2491 [SDOI2011]消防 / 1099 树网的核 单调队列 + 树上问题

    Code: #include<bits/stdc++.h> #define ll long long #define maxn 300001 #define inf 1000000000 ...

  10. 863D - Yet Another Array Queries Problem（思维）

    原题连接:http://codeforces.com/problemset/problem/863/D 题意:对a数列有两种操作: 1 l r ,[l, r] 区间的数字滚动,即a[i+1]=a[i] ...