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> 復制代碼 可定義文檔中的分區或節（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和它的默认样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： yarn RM crash问题一例
- 下一篇： android 浏览器对图片加载高度渲染