DIV+CSS基本知識筆記

 

DIV+CSS學習筆記

1、 複合選擇器

①交集選擇器：div.special{.....}   注意：中間不能有空格

    div#special{.....}

②並集選擇器：div, h1.special,p.first{.....}

③後代選擇器：div h1.first span.firstLetter{......}   

              這裡指的是：div 下的 h1 下樣式類為 first 的 span 樣式為 firstLetter 的標籤樣式

2、 樣式層疊

層疊樣式公式： 行內樣式>ID 樣式 > 類別樣式 > 標記樣式

3、 盒子模型

①Padding 、  Margin 、 Border

②屬性值個數：一個—> 上下左右值相同

  兩個—> 前：上下，后：左右

  三個—> 前：上，中：左右，后：下

  四個—> 上右下左（順時針順序值）

③ 行級元素與塊級元素：DIV — > 塊級元素， SPAN — > 行級元素

      行級元素：不佔有空間， 每個SPAN 左右一行排列

  塊級元素：佔有空間， 每個DIV 上下一次排列   

④ 盒子模型中標準流定位原則：

  ⑴行級元素：水平margin — > 疊加，不存在豎直 margin

  ⑵塊級元素：豎直margin — > 合併，取二者之間較大者的值，不存在水平 margin

4、 盒子模型的浮動與定位

① 盒子的浮動：

⑴塊級元素寬度不再自動延伸，而是縮小為容納下內容的最小寬度值，其他的標籤元素會圍繞著浮   動的元素排列( 文字元素尤為明顯 )

⑵清除浮動的影響：clear   如： {clear ： left} 清除左邊浮動的影響   {clear ： both} 清除左右兩邊浮動   框的影響

② 盒子的定位：

position— > 屬性： static ， relative ， absolute ， fixed

偏移—> 屬性： top,right,bottom,left （只有在跟著 position 時才有用）

⑴ static：默認定位方式，標準流中的定位方式

⑵ relative：以原位置為基準偏移的定位方式，也是在標準流中的定位方式，相對定位方式

⑶absolute ：以他的祖先包含框設置了定位屬性的那個祖先盒子的位置為基準偏移，如果沒有任何     一個祖先包含框設置了定位position 屬性，那麼就以瀏覽器窗口的位置為基準，絕對定位方式

⑷fixed ：以瀏覽器窗口為基準偏移

⑸ display： block （強制轉換成塊級元素）， inline （強制轉換成行級元素）

5、 超級鏈接樣式

屬性 —>  a:hover  鼠標指針經過鏈接時的樣式，   a:active 點擊鏈接時的樣式

      a:link 普通鏈接的樣式，               a:visited  被點擊過的鏈接樣式