H5學習筆記 —— 一、響應式 和html5+css3初體驗

響應式 和html5+css3初體驗

1.響應式web設計：媒體查詢、柵格佈局和彈性圖片合併稱爲響應式web設計

2.在html中引入樣式表

1. 行內式：
   
2. 內嵌式
   
3. 外鏈式<link href="css文件路徑" type="text/css" rel="stylesheet"/>

瀏覽器私有前綴

html5語義化標籤

常用的css選擇器

總結：
僞選擇器比較特殊,分爲兩種僞元素和僞類兩種
空格表示後代，
逗號表示並列，*
子代選擇器：ul>li{}
兄弟選擇器：p+a{}
屬性選擇器：[href]{}*

盒子模型

css浮動

----css的浮動可以通過float屬性進行設置，默認值爲none(不浮動)

css定位

定位 position 語法：

position : static 、absolute 、relative、fixed 。

1、static (靜態定位)
在css的position中，設置static爲默認值，它表示塊保持在原本應該在的位置上，即該值沒有任何的移動效果，這裏就詳細說了。

2、relative (相對定位)
使用相對定位的盒子的位置常以標準流的排版方式爲基礎，然後使盒子相對於它在原本的標準位置偏移指定的距離。相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。position指定的偏移量可以使用left，right，top，bottom等屬性進行設置。

當子塊使用相對定位以後，它發生了偏移，即使移動到了父盒子的外面，父盒子也不會變大，就好像子盒子沒有變化一樣。

3、absolute (絕對定位)
通過上面介紹的例子可以瞭解到 position 屬性需要通過配合偏移一定的距離來實現定位，而其中核心的問題就是以什麼作爲偏移的基準。絕對定位，盒子的位置以它的包含框爲基準進行偏移（如果對象的父級沒有設置定位屬性，即還是遵循 HTML 定位規則的，則依據 body 對象左上角作爲參考進行定位）。

4、fixed （固定定位）
fixed定位與absolute定位有些類似，區別在於定位的基準不是祖先元素，而是瀏覽器窗口或者其他顯示設備的窗口。當訪問者拖動瀏覽器窗口的滾動條時，固定定位的元素將保持相對瀏覽器窗口不變的位置。這裏就不詳細介紹了。

position 指定的偏移量，水平方向通過left或者right屬性來指定；豎直方向通過top和bottom來指定。left，right，top，bottom這4個屬性只有當position屬性設置爲absolute、relative和fixed時纔有效。

5. z-index (空間位置)
　　z-index屬性用於調整定位時重疊的上下位置，頁面爲x-y軸，垂直於頁面的方向爲z軸，z-index值大的頁面位於其值小的上方。
　　z-index屬性的值爲整數，可以是正數也可以是負數。當塊被設置了position屬性時，該值便可以設置各塊之間的重疊高低關係。默認的z-index值爲0，當兩個塊的z-index值一樣時，將保持原有的高低覆蓋關係。