Python ccs高階選擇器 盒模型

2022-06-23 18:45:08 字數 2217 閱讀 9003

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重疊取大值