margin 是什么丸冕？
- CSS 的box model中一個(gè)重要屬性就是margin延赌，是元素距離容器的距離除盏，看圖復(fù)習(xí)一下
margin：auto; 怎么用
- 可以將元素居中
- 原理是：
The element will take up the specified width, and the remaining space will be split equally between the two margins
實(shí)驗(yàn)出真理
- 將一個(gè)h1元素，設(shè)置為margin：auto; 看是否會(huì)居中呢挫以？猜猜看
<!DOCTYPE html>
<html>
<head>
<style>
h1{
margin: auto;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
結(jié)果是：
沒(méi)有居中者蠕，這是什么鬼，說(shuō)好的居中呢掐松？我們將border顯示出來(lái)看一下
機(jī)智的小伙伴可以看出來(lái)了踱侣，元素h1其實(shí)已經(jīng)居中了，h1元素不是只有文字那么長(zhǎng)大磺，而是占了一整行抡句，占滿了當(dāng)然居中了。文字存在于元素中杠愧，文字的居中是text-align的事了待榔。
為了驗(yàn)證我們想法，width設(shè)置為固定長(zhǎng)度500px。
you see锐锣， 紅色的框框也就是h1元素居中了腌闯。
實(shí)驗(yàn)二
- 將一個(gè)span 設(shè)置margin：auto; 這次我們給它先設(shè)置了width
<!DOCTYPE html>
<html>
<head>
<style>
span{
margin: auto;
width: 500px;
}
</style>
</head>
<body>
<span>Margin testing</span>
</body>
</html>
然而，
并沒(méi)有居中雕憔，而且發(fā)現(xiàn)這個(gè)寬度不像是500px啊
是的姿骏，width沒(méi)有起作用，因?yàn)閟pan就不是可以設(shè)置寬度的元素啊斤彼，故意挖坑是吧分瘦！這就是block 和inline元素的區(qū)別。
block 元素：通常另起一行琉苇，可以設(shè)置width和height擅腰，默認(rèn)width是100%
inline元素：通常不會(huì)另起一行，元素的寬高由內(nèi)容撐大翁潘，設(shè)置width無(wú)效
BUT趁冈，block 和 inline 是可以轉(zhuǎn)化的，設(shè)置display：block; display: inline; 即可
所以為span加上display：block拜马，讓我的width設(shè)置生效渗勘。
果然，藍(lán)色框框也就是我們的span元素就居中啦俩莽。
一句話總結(jié)
- 元素必須有有效的width旺坠，才可以使用margin：auto;來(lái)使元素居中
對(duì)于block元素，要設(shè)置固定大小的width, 默認(rèn)width是100%看不出來(lái)居中效果
對(duì)于inline元素扮超，先display：block; 再設(shè)置固定大小的width
PS.
- 想要文字居中用 text-align: center; 就可以啦取刃，區(qū)分開(kāi)文字在元素中居中，和元素在容器中居中哦出刷！
