css屬性選擇器和盒模型的理解
一、屬性選擇器：
1、 標籤名選擇器
寫法： 標籤名 所有該標籤名的樣式有相同
2、 id選擇器：
寫法：先在相應標籤中設定乙個id的屬性 如id=「id名」
在樣式表中，通過 # + id名
注：id名不能重複，是唯一的，也就是說只能設定乙個標籤內容的樣式。
3、 class選擇器：
寫法：先在相應標籤中設定class 名 如class=「class名」
在樣式表中，通過.+ class名
注：class在div中設定後，所有在div中的標籤內容都包含class樣式（優先順序除外）。
例：#id1
web
web
4、關於三者優先順序：
標籤名選擇器 < class選擇器 ＜ id選擇器 < 行間樣式（style=」」）
例：web
結果和id1樣式符合。
二、盒模型
1、border：邊框
寫法（復合）：border：border-width border-style border-color；
border-width：邊框寬度
border-style：邊框樣式： solid 實線 dashed虛線 dotted點線
border-color： 邊框顏色
（注：四個框可以分別設定 border-color-top/right/bottom/left：上右下左 ）
例：div
注：border-radios：10px 則變成圓角
2、margin：外邊距
寫法：margin-top/right/bottom/left 分別是上右下左外邊距
例：margin:100px100px 100px 100px;
注：margin的小問題：
1、 margin-top會穿透父級
例：#box1
#box2
此時會觀察到父級和子級一起往下移動了100px；
2、 兄弟關係的margin-top 和 margin-bottom 會疊壓
例：#box1
#box2
#box3
注：計算是box1和box2相聚60px，則實際顯示只有30px；
解決方案：
1、 給父級加邊框border
2、 給父級加overflow:hidden
3、 父級使用padding-top;
3、padding：內邊距
復合寫法：padding:10px10px 10px 10px;
例：#box4
div id="box4">123456
盒模型總結：
1、 一切元素都是塊，有三種模式：相鄰巢狀 疊壓
2、 表示方法總結：margin/padding
10px; 上右下左都是10px；
10px 20px； 上下為10px 左右為20px
10px 30px 20px 上為10px 左右為30px 下為20px；
3、 空間大小的計算
寬：border-left x 2 + padding-left x 2 + width
高：border-top x 2+ padding-left x 2 + height
例：div
總width: 20 x 2 + 40 x 2 + 100
總height : 20 x 2+ 40 x 2 + 200
三、css定位：
1、float：
divspan
.span1
.span2
.span3
.span4 1
2 3
4 注：div裡面有相對於自己定位，而span裡有相對於父級div的決定定位。
Python ccs高階選擇器 盒模型
css高階選擇器與盒模型 脫離文件流 其中就是產生了bfc 1.組合選擇器 群組選擇器 每個選擇器位可以位三種基礎選擇器的任意乙個,用逗號隔開,控制多個 div,div,div 後代 子代 選擇器 sup sub sup sub 兄弟 相鄰 選擇器 up down up down 交集選擇器 sec...
CSS選擇器 樣式 盒模型
1.通配選擇器 html,body以及body下用於顯示的標籤 html和body顏色會被改變，但是div標籤不會發生改變，由於不同的選擇器具有優先順序 語法 2.標籤名 標籤選擇器 該標籤對應的所有該標籤 在實際開發中，盡量少用或不用標籤名來作為選擇器，標籤名如果作為選擇器的話一般在該標籤為最內層...
CSS選擇器 屬性選擇器
最近重新學習了css3，發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...