CSS文字的居中 盒子模型
阿新 • • 發佈：2019-02-05
垂直居中：
文字本身具有行高，並且是居中的 強行改變文字的行高字型仍然是在居中狀態的，當行高變大時候font-size 並沒有變化，所以就是居中的。
CSS的選擇器的優先順序：
行內（樣式style）選擇器--->ID選擇器#--->類選擇器----->元素選擇器div{}
類選擇器的 就近原則。
CSS盒子模型：
盒子模型分為標準盒模型和怪異盒模型；
內外邊距 padding + margin
padding top
padding right
padding bottom
padding left
padding ； 10px 20px 20px 10 px 上右下左的順序
margin是控制元素塊移動的；
下面；
①巢狀的div中，外部div設定了標籤box-sizing:border-box，其不隨內部div的padding（內邊距）變化而變化；
② margin（外邊距）控制著元素塊的位置和移動，指定margin-top：50px,測了下是正確的；
附上程式碼；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>內外邊距</title> <style type="text/css"> /*當內邊距增大後，會把盒子撐大，若不想讓盒子變大設定box-sizing:border-box*/ .father { width: 150px; height: 150px; background-color: hotpink; padding: 10px 20px 20px 30px; /*中間不需逗號*/ box-sizing: border-box; } .son { width: 150px; height: 150px; background-color: pink; } /*外邊距控制著 元素塊的移動*/ .margin { width: 200px; height: 200px; background-color: green; margin-top: 50px;/* 和下面一行可以更改為 margin：50px auto */ /*margin: 0 auto;*/ /*水平居中*/ } </style> </head> <body> <!--內邊距 padding --> <div class="father"> <div class="son"></div> </div> <!--外邊距 margin 中特殊取值 margin:0 auto 讓一個固定大小的元素塊水平居中 --> <div class="margin"></div> </body> </html>