盒模型分為兩種:標準模型和IE模型,主要了解標準模型

盒模型示意圖

?

盒子模型的屬性

width? :內容的寬度

height: 內容的高度

padding: 內邊距,邊框到內容的距離

border: 邊框,就是指盒子的寬度

margin :外邊距,盒子邊框到附近最近盒子的距離

盒模型的計算

盒子的真實寬度 = width +2*padding +2*border

盒子的真是高度 = height +2*padding+2*border

?

標準盒模型，width不等于盒子真實的寬度。

另外如果要保持盒子真實的寬度，那么加padding就一定要減width，減padding就一定要加width。真實高度一樣設置。

?

[border:none? 一般用這個干掉按鈕周邊的boder

boder 也可以把文字往中間擠,加border時也要減寬或者高,這樣就可以往里面擠了

]

?

padding(內邊距)

padding: 就是內邊距的意思,它是邊框到內容之間的距離.

而且,padding的區域是有背景顏色的,并且背景顏色和內容的顏色一樣,也就是說

background-color 這個屬性將填充所有的border以內的區域

1,寫小屬性,分別設置不同方向的padding

padding-top:30px padding-right:30px padding-bottom:30px padding-left:30px View Code

2,寫綜合屬性,用空格隔開

/* 上 右 下 左 */ padding :20px 30px 40px 50px/* 上 左右 下 */ padding: 20px 30px 40px/* 上下 左右 */ padding:20px 30px/*上右下左*/ padding :20px View Code

?

border(邊框)

border :邊框的意思, 描述盒子的邊框

邊框有三個要素:? ?粗細,? 線性樣式 , 顏色

如果顏色不寫,默認是黑色.如果粗細不寫,不顯示邊框.如果只寫線性樣式,默認的有上下左右

3px的寬度,實體樣式,并且黑色的邊框

?

border:none;

border:0;

表示border沒有設置樣式.

? 按照三要素來寫border

border-width:3px border-style:solid border-color:red/* border-width: 5px 10px; border-style: solid dotted double dashed; border-color: red green yellow; */ View Code

? 按照方向劃分

　

border-top-width :10px border-top-color:red border-top-style:solidborder-right-width:10px border-right-color:red border-right-style:solidborder-bottom-width:10px border-bottom-color:red border-bottom-style:solidborder-left-width:10px border-left-color:red border-left-style:solid上面12條語句,相當于 bordr: 10px solid red;還可以這樣寫:border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red; View Code

使用border來制作小三角

/*小三角 箭頭指向下方*/div{width: 0;height: 0;border-bottom: 20px solid red;border-left: 20px solid transparent;border-right: 20px solid transparent;} View Code

margin(外邊距)

margin:外邊距的意思,. 表示邊框到最近盒子的距離,

/*表示四個方向的外邊距離為20px*/ margin: 20px; /*表示盒子向下移動了30px*/ margin-top: 30px; /*表示盒子向右移動了50px*/ margin-left: 50px; /*表示盒子向上移動了100px*/ margin-bottom: 100px;

?

轉載于:https://www.cnblogs.com/liuafan/p/9449509.html

總結

以上是生活随笔為你收集整理的前端-----盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。