margin :
順序:順時針,上右下左
值 | 描述 |
---|---|
auto | 瀏覽器計算外邊距。 |
length | 規定以具體單位計的外邊距值,比如像素、厘米等。默認值是 0px。 |
% | 規定基于父元素的寬度的百分比的外邊距。 |
inherit | 規定應該從父元素繼承外邊距。 |
padding :
順序:順時針,上右下左。內邊距,在寬度和高度之外繪制元素的內邊距和邊框。
值 | 描述 |
---|---|
auto | 瀏覽器計算內邊距。 |
length | 規定以具體單位計的外邊距值,比如像素、厘米等。默認值是 0px。 |
% | 規定基于父元素的寬度的百分比的外邊距。 |
inherit | 規定應該從父元素繼承內邊距。 |
box-sizing :
需要設置border: solid blue 10px;來設置
值 | 描述 |
---|---|
content-box | 類似padding,在寬度和高度之外繪制元素的內邊距和邊框。 |
border-box | 通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。 |
inherit | 規定應從父元素繼承 box-sizing 屬性的值。 |
position :
定位的方式
值 | 描述 |
---|---|
static | 默認值,不會被特殊的定位. |
relative | 表現的和 static 一樣,除非你添加了一些額外的屬性。設置 top 、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其他的元素則不會調整位置來彌補它偏離后剩下的空隙。 |
fixed | 相對于視窗來定位,這意味著即便頁面滾動,它還是會停留在相同的位置。 |
absolute | 相對于祖先元素來定位 |
float :
定義元素在哪個方向浮動
值 | 描述 |
---|---|
left | 元素向左浮動。 |
right | 元素向右浮動。 |
none | 默認值。元素不浮動,并會顯示在其在文本中出現的位置。 |
inherit | 規定應該從父元素繼承 float 屬性的值。 |
clear :
定義了元素的哪邊上不允許出現浮動元素。
值 | 描述 |
---|---|
left | 在左側不允許浮動元素。 |
right | 在右側不允許浮動元素。 |
both | 在左右兩側均不允許浮動元素。 |
none | 默認值。允許浮動元素出現在兩側。 |
inherit | 規定應該從父元素繼承 clear 屬性的值。 |
overflow :
規定當內容溢出元素框時發生的事情。
值 | 描述 |
---|---|
visible | 默認值。內容不會被修剪,會呈現在元素框之外。 |
hidden | 內容會被修剪,并且其余內容是不可見的。 |
scroll | 內容會被修剪,但是瀏覽器會顯示滾動條以便查看其余的內容。 |
auto | 如果內容被修剪,則瀏覽器會顯示滾動條以便查看其余的內容。 |
inherit | 規定應該從父元素繼承 overflow 屬性的值。 |