py 的 第 39 天
---恢復內容開始---
內容回顧：
1.高級選擇器
後代選擇器
選擇的是兒子、孫子，重孫子
div p{}
子代選擇器
選擇的是親兒子
div>p
組合選擇器
div.active{}
屬性選擇器
input[type=‘text‘]{}
偽類選擇器
愛恨準則
a:link{}
a:visited{}
a:hover{}
a:active
對a來設置字體顏色，一定要選中a
偽元素選擇器
p:first-letter{}
p:before{ content:‘ ‘ }
//與浮動有關系
p:after{ content:‘ ‘ }
2.css的繼承性和層疊行
在css中，color、text-xxx、font-xxx、 line-xxx這些屬性是可以被繼承下來
層疊性：權重==》誰的權重大就會顯示誰的屬性
權重大小的對比：
數選擇器的個數： id class 標簽
權重比較1:
行內 > id > class > 標簽
權重比較2:
繼承來的屬性，權重為0，與選中的標簽沒有可比性
權重比較3:
都是繼承來的，權重都是0，就近原則
權重比較4:
都是繼承來的，他們權重都為0，描述的一樣近，再去數權重
權重比較5:
權重一樣大，後面的大於前面的屬性
3.盒模型
標準盒模型
width:內容的寬度
height：內容的高度
padding：內邊距 內容到邊框的距離
border：邊框
margin：外邊距 一個盒子的邊到另一個盒子邊的距離
計算盒模型：
盒子的大小=width+2*padding+2*border
如果保證盒子大小不變，那麽加padding，就要減內容的width或height
4.浮動
浮動是實現元素並排，只要盒子浮動，就脫離標準文檔流（不在文檔流上占位置）
今日內容：
1.盒模型的屬性（重要）
padding
上下左右
padding：10px；
上下 左右
padding：10px 20px；
上 左右 下
padding 10px 20px 30px；
順時針 上右下左
border
三要素 ： 線性的寬度 線性的樣式 顏色
border ：1px solid red；
border-left：1px solid red；
margin
前提必須是標準文檔流下
margin的水平不會出現任何問題
垂直方向上 margin會出現‘塌陷問題’
2.display 顯示
前提必須是標準文檔流下
屬性：
block 塊級標簽
獨占一行
可以設置寬高，如果不設置寬，默認是父盒子寬度的100%
inline行內標簽
在一行內顯示
不可以設置寬高，根據內容來顯示寬高
inline-block 行內塊
在一行內顯示
可以設置寬高
none 不顯示 隱藏 不在文檔上占位置
visibility：hidden；隱藏 在文檔上占位置
3.浮動
float：none；
left；左浮動 right；又浮動
浮動：脫離了標準文檔流
作用好處：使元素實現並排（布局）
就在頁面上占位置
浮動帶來的問題：
子盒子浮動，不在頁面占位置，如果父盒子不設置高度，那麽撐不起父盒子的高度，頁面出現紊亂
清除浮動：
1.給父盒子設置固定高度（後期不好維護）
2.clear：both；
給浮動元素的最後面，加一個空的塊級標簽（標準文檔流的塊級標簽）
給當前這個標簽設置一個clearfix類名，設置該標簽屬性
cleart：both
問題：代碼冗余
3. .clearfix：after{
content：‘ 。’；
display：block；
height：0；
visibility：hidden；
clear；both
}
4.overflow：hidden；
要浮動一起浮動，有浮動，清除浮動
---恢復內容結束---
py 的 第 39 天