一：頁面佈局
盒模型
邊界（border）和其他內容的距離是（margin）
文字內容和邊界的距離是（padding）
padding和margin屬性
單位em是當前文字的大小，2em是兩倍文字的距離
四個值按順時針方向代表top，right，bottom，left
h1{padding:1em 2em 3em 4em;}
h1{margin:1em 2em 3em 4em;}
兩個值依次代表top bottom，right left
h1{padding:1em 4em;}
h1{margin:1em 4em;}
二：浮動元素及多列布局
float可以讓圖片等塊元素浮動於上層
p{float:right;}浮動在右邊
clear規定元素的哪一側不允許浮動
h2{clear:left;} h2標題的左邊不允許浮動
overflow定義內容溢位元素框時
#main{overflow:hidden}溢位來的內容隱藏起來
多列屬性
#columns{
column-gap:40px;列之間間隔為40畫素
}
三：定位及元素可見性
position對頁面元素進行定位
1.相當定位
#menubar {選單欄
position:relative;當元素裡面還有一個元素，包含元素的元素是被包含元素的父元素。採取相對定位受父元素影響
left:0.5em;距離左邊父元素0.5個文字寬度
top:1em;距離頂部父元素1個文字寬度
}
2.絕對定位
#menubar {
position:absolute;離元素最近有設定了絕對或相對定位的父元素時，按照父元素定位；如果沒有則相對於根元素（HTML元素）定位。
top:40px;距離頂部40畫素
}
#menubar {
position:fixed;採取絕對定位，相對於視窗定位
top:40px;距離頂部視窗40畫素
}
四：Z-index和元素可見性
Z-index設定元素的層次
img.x{選擇所有具有x類的元素
position : absolute;採取絕對定位
left:0px;
z-index:1;z-index的預設值是0，z-index:1圖片在父元素上層
}
圖片會蓋過父元素
元素可見性
1.display設定元素應該生成的框的型別
p.secret{
display:none設定元素不可見，元素不佔用頁面空間
}
2.visibility設定元素是否可見
p.secret{
visibility:hidden設定元素可見，元素佔用空間
}
3.opacity設定元素透明度
#pic{opacity:0.7}設定透明度為0.7，1為不透明