css 基礎1

css 基礎1

20161128

前面的兩篇內容中已經涉及到了簡單scc基礎，這裡就不再贅述，今天從元素間的距離說起！

一，元素的距離計算

　　1，兩個水平方向的容器s1,s2之間的距離計算為s:

 　　　　 s = s1的margin-right + s2的margin-left（+預設值）

 

 

 

 

　　2，兩個垂直方向的容器s1,s2之間的距離計算為s:

　　　　s1的margin-bottom和s2的margin-top之間的較大者

 

 

 

　　3，兩個包含關係的容器s1,s2之間的距離計算為s, 假設s1為父元素

  　　　　 s1的padding和s2的margin的和

 

二，浮動:（float）

　　一個元素浮動向左浮動之後:

　　1，該元素向左浮動的位置由父元素的padding和本身的margin 決定,同時本身變短(padding,內容,寬高決定)

　　2，下面的元素會把它原來的位置佔據

　　3，float：right（右）   left（左）    none（  　　4，clear：（

清除浮動

） 　　left  right  both（

全部

）

 

 

 

 

三，定位

（position） 　　1，絕對定位 

（

absolute） 　　2，相對定位: （

relative

）

　　相對元素原來的位置 進行定位

　　　　   * 如果一個元素有定位， 先找出父元素是否有定位

　　　　　　1，如果沒有，以body為基準定位

　　　　　　2，如果有，就以父元素為基準定位

 

 

 

 

 

 

四，層級（z-index） 

　　* 需要配合定位才起作用，數字越大，越排在上面。

　　預設值為0，可為負值。