Web前端技術：CSS部分深刻---盒子模式，overflow屬性,border屬性,內外邊距,水平居中問題，塊\行內元素,浮動，層定位

一、盒子模式：頁面中的全部元素均可以當作一個盒子，佔據着必定的頁面空間

二、overflow屬性

hidden:超出部分不可見，默認值

scroll:顯示滾動條

auto:若是有超出部分，顯示滾動條

 

三、border屬性

border-width:px \ thin \ medium \ thick

border-style:dashed \ dotted \ solid \ double

border-color:顏色

border：width  style color

案例

水平分割線：

 

.line { height:1px; width:500px; border-top:1px solid #e5e5e5; }

四、內外邊距   取值：px , %(外層盒子的寬度和高度)

內邊距：

padding：5px;          上右下左的內邊距

padding：4px  3px  2px 1px ;    上爲4px, 右爲3px, 下爲2px, 左爲1px

padding-top:10%;     上內邊距

外邊距：

 

margin:   5px;             上右下左的外邊距

margin-top：10%;      上外邊距

margin的合併：兩個div的margin分別爲15px,20px ,那麼兩個div的間距不是35px,而是20px

 

五、水平居中問題

圖片、文字水平居中： text-align:center;

div的水平居中：margin：0 auto;

 

六、塊、行內元素

塊（block）元素：

獨佔一行

元素的height、width、margin、padding均可設置

常見的block元素：div、p 、h1~h六、ol、ul、table、form

顯示爲block元素：display：block；

 

行內（inline）元素：

不單獨佔用一行

width、height不可設置

常見的inline元素：span、a

顯示爲inline元素：displap:inline;

 

行內塊（inline-block）元素：同時具有inline元素、block元素的特色

不單獨佔用一行

 

元素的height、width、margin、padding均可設置

常見的inline-block元素：img

 

 

行內元素之間有個間距問題

解決：font-size:0;

 

行內元素\塊元素\行內塊元素的相互轉換

display：none;

display：block;

display：inline;

display：inline-block;

 

eg:  

inline元素a轉換爲block元素，從而使a元素具備塊元素特色。

a{ display:block;}

 

七、浮動float與clear

float

float:left;     左浮動

float:right;   右浮動

float:none;   不浮動

clear

clear:both;               清除左右兩邊的浮動

clear:right \ right;    只能清除一個方向的浮動

clear:none;               默認值，只在須要移動已指定的清除值時用到

 

eg:

八、層定位

 層定位具備的屬性

position：fixed \ relative \ absolute ;(分別表明固定、相對、絕對定位)

left:px;（左）

right:px;（右）

top:px;（上）

bottom:px;（下）

z-index:n;（n值大的在上面）

 

static

默認值，沒有定位，元素出如今正常的流中 top, bottom, left, right ， z-index無效

fixed

相對於瀏覽器窗口進行定位 top, bottom, left, right ， z-index 有效

relative

相對於其直接父元素進行定位 top,bottom,left,right，z-index有效,其在文檔流中的原位置依然存在

absolute

相對於 static 定位之外的第一個父元素 進行定位 top, bottom, left, right ， z-index 有效,其在正常流中的原位置再也不存在,相對於relative/absolute/body定位 .