大家好，我是小遁。

body有默认的margin值

在上节课的代码中加入<div>Hello World</div>

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<script></script><body><div>Hello World</div></body></html>
复制代码

可定义文档中的分区或节（division/section）。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

div是HTML中的一个标签,且是双标签,用</div>闭合。

看一下在Chrome浏览器的效果,肉眼看似乎没啥问题，按F12 打开开发者工具，在Elements面板中，将鼠标放到body元素上

橙色区域代表body元素上有默认的margin值。

复合属性margin

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

使用Elements(元素)下的Computed(计算)面板,输入margin

margin是个复合属性margin:8px; 可以被拆分为

上 margin-top: 8px;

右 margin-right: 8px;

下 margin-bottom: 8px;

左 margin-left: 8px;

margin:8px; 或margin:8px 10px 20px 5px; 上右下左

margin:8px 10px; 上下(8px) 右左(8px)

margin:8px 10px 20px; 上(8px) 右左(10px) 下(20px)

行内样式(style属性)重置

不同浏览器默认值是不一样的

ctlr+s保存，F5刷新浏览器。

通过style标签重置样式

在head标签末尾插入

body是标签选择器,margin: 0;被称为声明,属性值为0时可以不带单位。

div标签是没有默认margin的

关于通配选择器`*`

*是通配选择器，页面上所有的标签都会继承它的声明，这也是它被病垢的原因，会影响性能!

讲道理,它所影响的性能可以说是微乎其微的,理论上的影响要远大于实际,我大胆的猜想，像Chrome这样优秀的浏览器难道不会去做优化吗？

因此业内专门总结了一些样式表比如normalize:https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css

Ctrl+c 复制链接,Ctrl+t新建一个标签页,在按下Enter

其实只需要对页面用到的、需要重置的标签进行重置就可以了，可以参照前辈们的成果进行改良

如果在吐槽通配选择器的同时，反手就使用link标签引入

此时Link会发起一个网络请求，切换到Network面板，F5刷新浏览器。

点击这个请求,切换到Preview(预览)

只是为了重置margin,那就太秀了，即便如此,你刷新浏览器似乎也看不见啥明显的区别...

因为当前的例子太简单了,环境太单一。

当你在公司上班时,被前辈或是小弟看到了，假如你在面试的时候，当被问及如何重置样式,就回答了*

前辈会怎么想? 小弟会怎么想？面试官会怎么想？毕竟，在倡导标签语义化的今天,div 仍是HTML一姐,人家不需要重置margin，若是在默默的加上

再比如我计划出一系列文章和大家一起学习前端，这里用了*重置margin...

其实小场面还是用通配符舒服些。

需要重置的不只有margin一个属性，也不是只有body标签有默认样式

引入的话语来自 w3school 可以起步与此，但别止步于此!

上一章:1前端开发中的语言问题

下一章:3document.body为什么是null

原文地址

2 HTML中的body和它的默认样式相关推荐

修改element组件库中Cascader级联选择器下拉列表的默认样式
在保证不影响其他页面中Cascader样式的情况下(首先就不能删除scoped),如果css用到less预处理器,想到的第一个解决办法就是用深度选择器">>>" ...
Vue中修改Mint UI的Toast默认样式问题 - 字体大小调整
1- 给Toast添加className Toast({message: '请输入正确的手机号码',duration: 800,className: 'noticeError' }); 2- 添加样式 ...
项目中如何修改UI框架的默认样式
我们在使用elementUI时,只能使用框架自带的样式,普通的修改方法并不能实现,我整理了下面几种修改样式的方法. 1. 行内修改样式通过在行内设置style修改,用于局部组件块 <el-bu ...
修改element-ui中的el-card标签的头部默认样式
<el-card class="task_one-card"><div slot="header" class="clearfix& ...
html5中如何去掉input type date默认
html5中如何去掉input type date默认样式 2.对日期时间控件的样式进行修改目前WebKit下有如下9个伪元素可以改变日期控件的UI: ::-webkit-datetime-edit ...
如何更改MindMapper中的默认样式
在MindMapper选项中,我们可以通过更改一些设置来定义我们的默认样式,更加贴合我我们平常绘制导图的需要.本文解析了MindMapper选项中的默认样式,教你怎样通过设置来更改导图的默认样式. 打 ...
MindMapper中的默认样式怎样进行修改
在MindMapper选项中,我们可以通过更改一些设置来定义我们的默认样式,更加贴合我我们平常绘制导图的需要.本文解析了MindMapper选项中的默认样式,教你怎样通过设置来更改导图的默认样式. ...
Flex警告：framework.swc”具有默认样式并且在 library-path 中，表...
2019独角兽企业重金招聘Python工程师标准>>> 错误描述: 首先要提醒你的是不要小看Flex中的警告,Flex中的警告和java中不一样,有些警告可能是致命的,以至于你 ...
[译] JavaScript 中的 CSS：基于组件的样式的未来
本文讲的是[译] JavaScript 中的 CSS:基于组件的样式的未来, 原文地址:CSS in JavaScript: The future of component-based styling ...

2 HTML中的body和它的默认样式

body有默认的margin值

复合属性margin

行内样式(style属性)重置

通过style标签重置样式

关于通配选择器`*`

2 HTML中的body和它的默认样式相关推荐

最新文章

热门文章

2 HTML中的body和它的默认样式

body有默认的margin值

复合属性margin

行内样式(style属性)重置

通过style标签重置样式

关于通配选择器*

2 HTML中的body和它的默认样式相关推荐

最新文章

热门文章

关于通配选择器`*`