css高階選擇器與盒模型脫離文件流 ,其中就是產生了bfc
1.組合選擇器
- 群組選擇器
/* 每個選擇器位可以位三種基礎選擇器的任意乙個, 用逗號隔開, 控制多個 */
div, #div, .div
- 後代(子代)選擇器
.sup .sub
.sup > .sub
- 兄弟(相鄰) 選擇器
.up ~ .down
.up + .down
- 交集選擇器
section.ss#s
2.複雜選擇器的優先順序
1.與修飾符位置無關
2.屬性選擇器與類選擇器權重相同
3.id 無限大於 類[屬性] 無效大於 標籤
4.權重只與個數相關,個數(型別)均相同時,最後由位置決定
3.偽類選擇器
a鏈結標籤四大偽類
:link 初始狀態
:hover(滑鼠懸浮!!!!!!)
:active(滑鼠點選中)
:visited
位置相關
:nth-child() | :last-child |:first-child先確定位置再匹配型別
:nth-of-type() 先匹配型別再確定位置
取反選擇器:not(修飾詞) | div:not(:nth-child(2))
:before (盒子渲染前)
:after (盒子渲染後)
:focus (表單標籤獲取焦點)
:blur
4 精靈圖:
5.盒模型
盒子的四個組成部分:
margin + border + padding + content(width x height)
display:inline,block,inline-block
都具有自身區域:
content 提供給內容(文字,,子標籤整個盒子)的顯示區域
padding 介於border與content之間的區域
可以撐開border與content之間的距離,沒有自身顏色(透出背景顏色),只有區域
注意:padding-top可以將自身與自身第乙個子級分離
border 邊框,寬度 顏色自身定義,padding和content顏色有背景色填充
margin 控制盒子位置==>盒模型布局,不參與盒子顯示,其他都參與盒子顯示
# 整體設定 padding: 上 右 下 左 (無值邊取對邊)
# 分開設定
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
# 整體設定 border: 10px solid black;
# 分開設定
border-top: 10px solid black;
border-right: 10px solid black;
border-bottom: 10px solid black;
border-left: 10px solid black;
如何要保證顯示區域大小不變,增加了padding和border,可以相應減小content的區域
邊界圓角:
border-radius:20px;(最大只能到盒子的一半)
border-radius:50%;
border-radius:10px 20px 30px ;順序:左上 右上 右下 左下(沒有的值取對邊)
border-radius:10px / 20px; 橫向都取10px,縱向都取20px
6.盒模型margin布局
完成自身布局: 上移|左移margin-left | margin-top
影響兄弟布局:下移|右移: margin-top取正值|margin-left取正值
(上移|左移: top取負值|left取負值)
作為兄弟,上盒子的垂直布局會影響下盒子垂直方位, 上盒子的結束位置為下盒子的開始位置
坑1:父子聯動;
解決方案1:子級裡放個浮動 ,後再margin布局
float:left;
margin-top:30px;
解決方案2:position:relative;
top:30px;
坑2:上兄弟下margin和下兄弟上margin重疊取大值
高階選擇器
高階選擇器 並集選擇器 p,ul 交集選擇器 p.odd 交集選擇器中間不能有空格等其他符號 後不能是標籤選擇器 多個類樣式的引用 多個類樣式的優先順序只與編寫有關，與引用順序無關 層次選擇器 後代選擇器 body p 子選擇器 body p 相鄰兄弟選擇器 active p 通用兄弟選擇器 act...
03 高階選擇器,屬性選擇器,偽類選擇器
使用空格表示後代選擇器。顧名思義，父元素的後代 包括兒子，孫子，重孫子 container p container item p view code 使用 表示子代選擇器。比如div p,僅僅表示的是當前div元素選中的子代 不包含孫子.元素p。container pview code 多個選擇器之...
CSS高階選擇器
css高階選擇器 例子 並集選擇器 p,h1 p和h1 標籤文字變紅色 交集選擇器 標籤選擇器 id 選擇器或者標籤選擇器 類選擇器 p.class1 類名為 class1 的p 標籤樣式中文字為黃色，當不同標籤使用相同類名時 後代選擇器 巢狀標籤 p span 注意兩者標籤中有空格的 this i...