前端 盒子模型

盒模型分為兩種:標準模型和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

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

/*

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

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;
*/

按照方向劃分

border-top-width :10px

border-top-color:red
border-top-style:solid
border-right-width:10px
border-right-color:red
border-right-style:solid
border-bottom-width:10px
border-bottom-color:red
border-bottom-style:solid
border-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;

使用border來製作小三角

/*

小三角 箭頭指向下方
*/div

margin(外邊距)

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

/*

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

css盒子模型 前端系列 css盒子模型

1 盒子模型 下圖中可以看到，在設定width的時候，標準的盒子模型是不包括border和padding的，而在ie瀏覽器中是包括這兩項的。盒模型是有兩種標準的，乙個是標準模型，乙個是ie模型。標準模型中，盒模型的寬高只是內容 content 的寬高，預設正是w3c標準盒模型。而在ie模型中盒模型的...

前端入門 CSS盒子模型

屬性描述 padding 設定所有內邊距 padding left 設定左內邊距 padding right 設定右內邊距 padding top 設定上內邊距 padding bottom 設定底部內邊距 描述屬性 邊框樣式 border style 單邊框樣式 上 border top styl...

WEB前端 盒子模型初識

border border width border style border color 複製 邊框屬性 設定邊框樣式 border style 邊框樣式用於定義頁面中邊框的風格，常用屬性值如下 none 沒有邊框即忽略所有邊框的寬度 預設值 solid 邊框為單實線 最為常用的 dashed 邊...