關於使用text-align:center和margin:0 auto 兩種居中方式的比較
前言:最近由於要學習后端，需要提前學習一部分前端知識，補了補css知識，發現狂神在講這一部分講的不是特別清楚，於是自己決定試一試
1.需要先了解塊級元素和行間元素
塊級元素有:div（div默認是塊級元素），p標簽，h1-h6等；
行間元素有:a標簽，img標簽等
兩者區別就是，塊級元素可以獨占一行，之后的默認存在換行符，行間元素可以多個處於一行內，只有超過外部邊框的時候會換行。
2.問題的引出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="frame">
<img src="背景.jpg" >
</div>
</body>
</html>
一個非常簡單的測試
得到的界面是：
想要將這個圖片居中，我們應該怎么操作。
text-align：center將塊中元素向中對齊
margin：0 auto 將外邊距設置為上下為0px，左右各占所在框的一半
3.解決方法
思路一：由於div標簽是塊級元素，所以我認為直接在外層的div中使用text-align:center，就可以將div存在的元素img移動到中間去
選中這一個圖片查看，可以看到，這樣一個塊是占滿這一行，它的width應該就是屏幕的寬度
通過設置
<div style="text-align:center;">
實現了要求。
思路二:通過將img變為塊級元素后，再通過設置外邊距margin來實現要求
<img src="背景.jpg" style="display: block; margin: 0 auto;" >
由於我也是剛學，其實這里還有一些疑問，我覺得當我設置display:block的時候，我在瀏覽器的開發者工具下查看img元素，藍色應該會占滿每個block的區間