html>

框模型

.box?{

/*設(shè)置寬和高*/

width:500px;

height:400px;

background-color:yellow;/*背景顏色*/

/*display:?block;*/

text-align:?center;/*水平居中*/

display:?table-cell;/*將塊顯示方式轉(zhuǎn)化單元格方式*/

vertical-align:?middle;/*垂直居中*/

/*設(shè)置頂邊框*/

border-top-width:?10px;

border-top-style:?dotted;/*虛線*/

border-top-color:?coral;

/*右邊框?*/

border-right-width:?10px;

border-right-style:?solid;/*實線*/

border-right-color:?green;

/*border-right:10px?solid?red;簡寫*/

/*下邊框*/

border-bottom-width:?10px;

border-bottom-style:?solid;/*實線*/

border-bottom-color:?blue;

/*下左框*/

border-left-width:?10px;

border-left-style:?solid;/*實線*/

border-left-color:?blue;

/*設(shè)置內(nèi)邊柜*/

display:?block;/*重新把塊顯示為塊樣式*/

padding-top:?30px;

padding-right:?50px;

padding-left:?30px;

padding-bottom:?60px;

/*padding:30px?簡寫*/

/*padding:30px?50px?60px當(dāng)左右相等時可以簡寫*/

/*padding:30px?50px?當(dāng)上下左右相等時簡寫*/

/*設(shè)置外邊柜*/

margin-top:?30px;

margin-right:?50px;

margin-left:?30px;

margin-bottom:?60px;

/*margin:30px?50px?60px?30px?上?右?下?左*/

/*margin:30px?簡寫*/

/*margin:30px?50px?60px當(dāng)左右相等時可以簡寫*/

/*margin:30px?50px?當(dāng)上下左右相等時簡寫*/

}

????

總結(jié)

以上是生活随笔為你收集整理的html框模型,4-2css中的框模型简介的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。