web前端盒子模型box model屬性

2016年11月11日23:32:44 發表評論

阿里云服務器

內容區域設定:width:寬度的設定,height:高度的設定。寬度和高度的設定可以是個體的數值(帶單位),也可以是百分比設置。

內邊距(padding)的設定:

.盒子的內邊距為上右下左四個方向

.內邊距的設定用來控制盒子中裝載的內容到盒子邊緣(邊框)之間的距離。

.盒子的內邊距占據的是盒子里面的空間,最小為0,不允許出現負值。

內邊距(padding)復合屬性:

.padding-top:上內邊距

.padding-right:右內邊距

.padding-bottom:下內邊距

.padding-left:左內邊距

外邊距(margin)的設定:

.盒子的外邊距分為上右下左四個方向

.外邊距的設定用來控制盒子外圍四周的距離,不屬于本身范疇

.外邊距的主要用途是控制盒子的位置(如用的比較多的margin:0 auto,表示盒子居中,即上下為0,左右自動),所以可以出現負值。

web前端盒子模型box model屬性

外邊距(margin)復合屬性:

.margin-top:上外邊距

.margin-right:右外邊距

.margin-bottom:下外邊距

.margin-left:左外邊距

邊框(border)的設定:

.大部分的元素對象在默認情況下是沒有邊框的

.要設定邊框,必須同時設定3個要素:寬度、樣式、和色彩。(如border:1px solid red)

 邊框(border)復合屬性

1、邊框按方向分類的擴展屬性

.border-top:上邊框

.border-right:右邊框

.border-bottom:下邊框

.border-left:左邊框

2、邊框按屬性要素分類的擴展屬性

.border-width:邊框寬度

.border-style:邊框樣式

.border-color:邊框色彩

3、邊框樣式的設定

none: 無輪廓。border-color將被忽略,border-width計算值為0,除非邊框輪廓為圖像,即border-image。

hidden: 隱藏邊框。IE7及以下尚不支持

dotted: 點狀輪廓。IE6下顯示為dashed效果

dashed: 虛線輪廓。

solid: 實線輪廓

double: 雙線輪廓。兩條單線與其間隔的和等于指定的border-width值

groove: 3D凹槽輪廓。

ridge: 3D凸槽輪廓。

inset: 3D凹邊輪廓。

outset: 3D凸邊輪廓。

方向性復合屬性值的縮寫方法

說明 例子 例子注釋
1個值 4個方向 margin:10px; /*所有4個外邊距都是10px*/
2個值 上下/左右 border-width:5px?10px; /*上下邊框寬度為5px,左右邊框寬度為10px*/
3個值 上/左右/下 padding:30px?20px?10px; /*上內邊距為30px,左右內邊距為20px,下內邊距為10px*/
4個值 上/右/下/左 padding:5px?10px?15px?20xp; /*上內邊距為5px,右內邊距為10px,下內邊距為15px,左內邊距為20px*/

具有方向性的復合屬性可以在一個聲明中設置所有方向的定義,該屬性可以具有1-4個值。

web前端開發盒子模型的計算

標準盒子的尺寸計算

盒子自身的尺寸:內容的寬高+兩側內邊距+兩側邊框

盒子在頁面中占位的尺寸:內容的寬高+兩側內邊距+兩側邊框+兩側外邊距

div{width:200px;height:200px;border:5px solid red;padding:20px;}

如上:盒子自身寬度為:200px+5px*2+20*2px=250px;

盒子自身高度為:200px+5px*2+20*2px=250px;

那么盒子自身的尺寸:250px*250px

框架盒子(怪異盒子)類型

直接將寬/高屬性設定為盒子自身的整體尺寸,如果帶有內邊距或邊框,則通過縮小內容區域來實現。

實現盒子類型的互換:box-sizing盒子類型設置

取值:

content-box:padding和border不被包含在定義的width和height之內。對象的實際寬度/高度等于設置的width值和border、padding之和,即 (盒子尺寸: width/height = width /height+ border + padding ) 此屬性表現為標準模式下的盒模型。

border-box:padding和border被包含在定義的width和height之內。對象的實際寬度/高度就等于設置的width值,即使定義有border和padding也不會改變對象的實際寬度,即 ( 盒子尺寸:width/height = width/height ) 此屬性表現為怪異模式下的盒模型。

box-sizing的實際應用

要求1:實現一個兩欄并列的網頁布局(通過float屬性實現并列)

要求2:其中左列為30%寬,右列為70%寬。

要求3:兩列盒子中的內容距離盒子邊緣有一定的空白距離。

maolai

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: