2 HTML中的body和它的默认样式
大家好，我是小遁。
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前台开发中的语言问题
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 2 HTML中的body和它的默认样式
