大家好，我是小遁。
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>
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
div是HTML中的一个标签,且是双标签,用</div>闭合。
看一下在Chrome浏览器的效果,肉眼看似乎没啥问题，按F12 打开开发者工具，在Elements面板中，将鼠标放到body元素上
body元素上有默认的margin值
鼠标放在body元素上，也可点击选中
橙色区域代表body元素上有默认的margin值。
复合属性margin
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
使用Elements(元素)下的Computed(计算)面板,输入margin:
Computed面板
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属性)**重置
不同浏览器默认值是不一样的
重置body标签的margin属性
ctlr+s保存，F5刷新浏览器。
body元素默认margin值被重置.png
通过style标签重置样式
在head标签末尾插入
通过style标签重置样式
body是标签选择器,margin: 0;被称为声明,属性值为0时可以不带单位。
div标签是没有默认margin的
关于通配选择器*
通配选择器.png
*是通配选择器，页面上所有的标签都会继承它的声明，这也是它被病垢的原因，会影响性能!
讲道理,它所影响的性能可以说是微乎其微的,理论上的影响要远大于实际,我大胆的猜想，像Chrome这样优秀的浏览器难道不会去做优化吗？
因此业内专门总结了一些样式表 比如normalize:https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css
Ctrl+c 复制链接,Ctrl+t新建一个标签页,在按下Enter
src引入.png
其实只需要对页面用到的、需要重置的标签进行重置就可以了，可以参照前辈们的成果进行改良
如果在吐槽通配选择器的同时，反手就使用link标签引入
link.png
此时Link会发起一个网络请求，切换到Network面板，F5刷新浏览器。
网络请求.png
点击这个请求,切换到Preview(预览)
预览
只是为了重置margin,那就太秀了，即便如此,你刷新浏览器似乎也看不见啥明显的区别...
因为当前的例子太简单了,环境太单一。
当你在公司上班时,被前辈或是小弟看到了，假如你在面试的时候，当被问及如何重置样式,就回答了*
前辈会怎么想? 小弟会怎么想？面试官会怎么想？毕竟，在倡导标签语义化的今天,div 仍是HTML一姐,人家不需要重置margin，若是在默默的加上
div标签不需要重置margin
再比如我计划出一系列文章和大家一起学习前端，这里用了*重置margin...
其实小场面还是用通配符舒服些。
需要重置的不只有margin一个属性，也不是只有body标签有默认样式
引入的话语来自 w3school 可以起步与此，但别止步于此!
上一章:1前端开发中的语言问题
网友评论