Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >清空默认边距的完整代码

清空默认边距的完整代码

作者头像

贵哥的编程之路

发布于 2020-10-28 06:29:44

发布于 2020-10-28 06:29:44

1K00

代码可运行

举报

文章被收录于专栏：用户7873631的专栏用户7873631的专栏

运行总次数：0

代码可运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>54-清空默认边距</title>
    <style>
        /*
        *{
            margin: 0;
            padding: 0;
        }
        */
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
            margin:0;padding:0
        }
        p{
            width: 610px;
            height: 110px;
            background-color: #cdcdcd;
            border: 1px solid #000000;
        }
    </style>
</head>
<body>
<!--
1.为什么要清空默认边距(外边距和内边距)
在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距

2.如何清空默认的边距
格式
*{
            margin: 0;
            padding: 0;
}

3.注意点
通配符选择器会找到(遍历)当前界面中所有的标签, 所以性能不好
企业开发中可以从这个网址中拷贝
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

-->
<p>葬爱:非主流文化的常用词，是当今网络流行术语.且流行于非主流杀马特之中。葬，即埋葬，爱，即爱情，翻译成外语就bury love</p>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/09/03 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

line-height最详解（记住,文字是在行高中垂直居中的,顶部的内边距是边框到行高顶部的距离哈)

height line padding size

注意点：行高和盒子高不是同一个概念行高指的是每行内容的高度盒子高指的是元素的高度

贵哥的编程之路

2020/11/03

1.5K0

line-height最详解（记住,文字是在行高中垂直居中的,顶部的内边距是边框到行高顶部的距离哈)

前端基础-CSS基础（七）

auto border dt input padding

本文目录盒子模型参考盒子模型 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

efonfighting

2019/12/24

3420

css中还原字体与行高

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0;padding:0 } p { b

贵哥的编程之路

2020/10/28

1.1K0

前端学习(12)~css学习(六)：盒模型详解

border document height padding width

但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

Vincent-yuan

2020/03/19

8580

前端学习(6)~html回顾

html html5 css xml

html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。下面来分别介绍。

Vincent-yuan

2020/02/23

4730

css中行高与字号

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0;padding:0 } p {

贵哥的编程之路

2020/10/28

5280

期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7页)

javascript html css jquery java

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 --- <font

IT司马青衫

2022/08/19

1.5K0

期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7页)

【CSS】处理兼容性问题 | CSS Hack | IE

css padding width 对象浏览器

（1）IE6双边距bug: 块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。这种问题主要就是会把某些元素挤到了第二行。

前端修罗场

2023/10/07

3220

CSS常见兼容性问题总结

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。

书童小二

2018/09/03

1.2K0

谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。不断更新，不断更新，不断更新，重要的事情说三遍。谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少谈谈一些有趣的CSS题目

Sb_Coco

2018/05/28

5190

CSS的盒子模型

一个盒子中主要的属性就5个：width、height、padding、border、margin。 width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。 height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度 padding是“内边距”的意思 border是“边框” margin是“外边距”

Demo_Yang

2018/10/15

1.3K0

自动切换背景的登录页面

数组图片资源渲染登录函数

本文讲解如何美化登录页面，给登录页面加上一个不断随着时间自动切换的背景的功能，这样更好看。

GeekLiHua

2025/01/21

1730

清除浏览器CSS样式

/* YUI 3.18.1 (build f7e7bcb) Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ html { color: #000; background: #FFF } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fiel

喝茶去

2019/04/16

1.1K0

谈谈CSS中一些比较"偏门"的小知识前面我写了：谈谈html中一些比较"偏门"的知识，现在这篇(主要)想谈谈个人所见的CSS一些小知识点，加深印象；同时也希望有需要的人能有收获！

前面我写了：谈谈html中一些比较"偏门"的知识，现在这篇(主要)想谈谈个人所见的CSS一些小知识点，加深印象；同时也希望有需要的人能有收获！ 1.常见的浏览器内核：以IE为代表：IE，MaxThon，TT，the World，360，搜狗浏览器等-----Trident内核[又称MSHTML] Firefox，Netscape 6及以上版本，seaMonkey等-----Gecko内核 Opera7及以上----- Opera内核原为：Presto，现为：Blink; Webkit内核：Safari,C

用户1149564

2018/01/11

1.5K0

CSS学习笔记（基础篇）

CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)

Daotin

2018/08/31

4.7K0

css学习--css基础

学习慕课网笔记，课程：http://www.imooc.com/code/2024 1.css选择器子选择器：parent>child 子选择器是指选择parent的范围内的第一个子元素。这里parent和child均是伪代码。可以是class用.classname，也可以是标签ul>li,也可以是id #pid>#cid 后代选择器：parent child 后代选择器是指：选择parent范围内的所欲child元素。与子选择器不同的是，这里包含嵌套内的child元素，而子选择器仅仅选中parent

Ryan-Miao

2018/03/13

2.4K0

从零开始学 Web 之 CSS（四）CSS初始化、定位、overflow、标签规范

CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。

Daotin

2018/08/31

1.4K0

从零开始学 Web 之 CSS（四）CSS初始化、定位、overflow、标签规范

前端开发面试题总结之——CSS3

---- 相关知识点布局、浮动、盒子模型、弹性和模型、选择器优先级、居中定位、兼容性、 hack写法...... 题目&答案如何理解CSS的盒子模型？每个HTML元素都是长方形盒子。（1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。（2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。 link和@import的区别？（1）link属于XHTML标签，

用户1667431

2018/04/18

1.1K0

前端开发面试题总结之——CSS3

面试官：对下面的 CSS 题目回答一遍

在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。padding 和 border 再加上设置的宽高一起决定整个盒子的大小

公众号---人生代码

2021/04/22

1.3K0

【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )

css html 工具基础模型

将效果图片拖动到 Adobe Fireworks 中 , 使用切片工具分析盒子模型 :

韩曙亮

2023/03/30

1.6K0

【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )

相关推荐

line-height最详解（记住,文字是在行高中垂直居中的,顶部的内边距是边框到行高顶部的距离哈)

更多 >

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验