您的關注收藏是我持續更新總結的動力！
歡迎各位大佬不吝才華補充更全面的解析供大家參考~
本篇主要總結CSS相關問題，共52小題
文章的最後，我會給出某些題目具體點的補充，點擊跳轉到最後 補充點
補充點
關於佈局講解：給你一份詳細的CSS佈局指南，請查收
補充第14點：
補充第15點：對於position屬性，除了static值不開啓定位，其他的relative、absolute、fixed、inherit都會 開啓定位 ！一般我們最常見的relative是爲absolute服務的！來看一種情況，設置position:absolute，如果父元素是<body>，不管父元素是否開啓定位，絕對定位會相對於當前頁面；如果父元素不是<body>，並且開啓定位的話，絕對定位會相對於父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
background-color:yellow;
}
.box1{
width:500px;
height:500px;
background:green;
margin:100px;
}
.box2{
width:200px;
height:100px;
background:red;
position: absolute;
left:120px;
top:200px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div><!-- 只要父元素沒開啓定位，還是按照body絕對定位-->
</div>
<!-- 如果父元素開啓定位，就按照父元素定位，我們下一個例子來看 -->
</body>
</html>
運行結果(紅塊相對於頁面的黃塊絕對定位)：
對比來看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
background-color:yellow;
}
.box1{
width:500px;
height:500px;
background:green;
margin:100px;
position:relative; /* 如果父元素開啓定位，就按照父元素定位 */
top:200px;
}
.box2{
width:200px;
height:100px;
background:red;
position: absolute;
left:120px;
top:200px;
}
</style>
</head>
<body>
<div class="box1"> <!-- 現在父元素開啓了定位，按照box1定位 -->
<div class="box2"></div>
</div>
</body>
</html>
運行結果(紅塊相對於父元素綠塊絕對定位)：
補充第34點：僞類和僞元素的例子講解參考如下
補充第45點，設置水平居中的方法，如果是行內元素中的文字，text-align必須設置在父級塊元素纔有效。比如行內元素<a>標籤中的文字，text-align: center設置在<a>中是無效的，如果沒有額外寫父級塊元素，那麼父級塊元素就是<body>，text-align: center寫在<body>纔會水平居中，如果本身就是塊元素,text-align: center直接設置在該元素即可，比如
<body>
<p style="text-align: center">文字111</p>
</body>
如果父級元素(不一定是塊元素)和子級塊元素都有text-align屬性，那就是就近原則，所以以子級塊元素的text-align屬性爲準，如果子級塊元素沒有text-align:center，父級行內元素有text-align:center，則子級塊元素的文字還是居中！綜上所述：如果文字是塊元素中的，會從自身開始往上找text-align屬性，找到就生效，就近生效，找不到就不生效。如果文字是行內元素中的，會找父級塊元素(塊！元！素)中的text-align，找到就生效，就近生效，找不到就不生效。（你必須是塊元素特性或者你父親是塊元素特性纔有或得text-align屬性的資格，然後就近原則）
繼續補充45點：行內塊級元素inline-block（inline-block擁有block的特性），可以利用text-align:center來設置水平居中效果的，比如下面的例子
button {
width: 100px;
height: 100px;
background-color: yellow;
}
<div style="text-align:center">
<button></button>
</div>
button是行內塊元素，也就是默認display:inline-block，上面的黃色區域就是水平居中的，這個也比較特殊，水平居中並不針對文字
還是補充第45點：寬度固定的時候，margin: 0 auto;可以水平居中，但是如果父元素高度固定了，怎麼同時設置垂直居中呢？比如父元素高度100px，而自身高度40px，那麼上下的空白就是60px,那麼我們設置margin: 30px auto;就可以同時水平垂直居中
次回----JavaScript
關注、留言，我們一起學習，您的收藏是我持續更新的動力！
===============Talk is cheap, show me the code================