2 HTML中的body和它的默认样式
大家好，我是小遁。
body有默認(rèn)的margin值
在上節(jié)課的代碼中加入<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> 復(fù)制代碼 可定義文檔中的分區(qū)或節(jié)（division/section）。 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。div是HTML中的一個(gè)標(biāo)簽,且是雙標(biāo)簽,用</div>閉合。
看一下在Chrome瀏覽器的效果,肉眼看似乎沒(méi)啥問(wèn)題，按F12 打開(kāi)開(kāi)發(fā)者工具，在Elements面板中，將鼠標(biāo)放到body元素上
橙色區(qū)域代表body元素上有默認(rèn)的margin值。
復(fù)合屬性margin
margin 簡(jiǎn)寫(xiě)屬性在一個(gè)聲明中設(shè)置所有外邊距屬性。該屬性可以有 1 到 4 個(gè)值。
使用Elements(元素)下的Computed(計(jì)算)面板,輸入margin
margin是個(gè)復(fù)合屬性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)
行內(nèi)樣式(style屬性)重置
不同瀏覽器默認(rèn)值是不一樣的
ctlr+s保存，F5刷新瀏覽器。
通過(guò)style標(biāo)簽重置樣式
在head標(biāo)簽?zāi)┪膊迦?/p>
body是標(biāo)簽選擇器,margin: 0;被稱為聲明,屬性值為0時(shí)可以不帶單位。
div標(biāo)簽是沒(méi)有默認(rèn)margin的
關(guān)于通配選擇器*
*是通配選擇器，頁(yè)面上所有的標(biāo)簽都會(huì)繼承它的聲明，這也是它被病垢的原因，會(huì)影響性能!
講道理,它所影響的性能可以說(shuō)是微乎其微的,理論上的影響要遠(yuǎn)大于實(shí)際,我大膽的猜想，像Chrome這樣優(yōu)秀的瀏覽器難道不會(huì)去做優(yōu)化嗎？
因此業(yè)內(nèi)專門(mén)總結(jié)了一些樣式表 比如normalize:https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css
Ctrl+c 復(fù)制鏈接,Ctrl+t新建一個(gè)標(biāo)簽頁(yè),在按下Enter
其實(shí)只需要對(duì)頁(yè)面用到的、需要重置的標(biāo)簽進(jìn)行重置就可以了，可以參照前輩們的成果進(jìn)行改良
如果在吐槽通配選擇器的同時(shí)，反手就使用link標(biāo)簽引入
此時(shí)Link會(huì)發(fā)起一個(gè)網(wǎng)絡(luò)請(qǐng)求，切換到Network面板，F5刷新瀏覽器。
點(diǎn)擊這個(gè)請(qǐng)求,切換到Preview(預(yù)覽)
只是為了重置margin,那就太秀了，即便如此,你刷新瀏覽器似乎也看不見(jiàn)啥明顯的區(qū)別...
因?yàn)楫?dāng)前的例子太簡(jiǎn)單了,環(huán)境太單一。
當(dāng)你在公司上班時(shí),被前輩或是小弟看到了，假如你在面試的時(shí)候，當(dāng)被問(wèn)及如何重置樣式,就回答了*
前輩會(huì)怎么想? 小弟會(huì)怎么想？面試官會(huì)怎么想？畢竟，在倡導(dǎo)標(biāo)簽語(yǔ)義化的今天,div 仍是HTML一姐,人家不需要重置margin，若是在默默的加上
再比如我計(jì)劃出一系列文章和大家一起學(xué)習(xí)前端，這里用了*重置margin...
其實(shí)小場(chǎng)面還是用通配符舒服些。
需要重置的不只有margin一個(gè)屬性，也不是只有body標(biāo)簽有默認(rèn)樣式
引入的話語(yǔ)來(lái)自 w3school 可以起步與此，但別止步于此!
上一章:1前端開(kāi)發(fā)中的語(yǔ)言問(wèn)題
下一章:3document.body為什么是null
原文地址
總結(jié)
以上是生活随笔為你收集整理的2 HTML中的body和它的默认样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： yarn RM crash问题一例
- 下一篇： 算法我也不知道有没有下一个---一个题目