CSS3box是CSS3規(guī)范中新增的一組參數(shù),用來控制HTML元素的盒子模型屬性,包括外邊距、內(nèi)邊距、邊框、寬度、高度等。CSS3 box共有6個參數(shù),分別是margin、padding、border、width、height和box-sizing。
/* margin參數(shù) */ div { margin: 10px 20px 30px 40px; /* 順序為上、右、下、左 */ } /* padding參數(shù) */ div { padding: 10px; /* 四周內(nèi)邊距都為10像素 */ } /* border參數(shù) */ div { border: 2px solid #ccc; /* 2像素寬,實線,灰色邊框 */ } /* width參數(shù) */ div { width: 200px; /* 寬度為200像素 */ } /* height參數(shù) */ div { height: 100px; /* 高度為100像素 */ } /* box-sizing參數(shù) */ div { box-sizing: border-box; /* 盒子寬度等于border+padding+content,可以避免盒子過大,導致頁面布局錯亂 */ }
以上是常用的CSS3box參數(shù),可以通過這些參數(shù)控制HTML元素的盒子模型屬性,實現(xiàn)更加靈活的頁面布局效果。
上一篇css3calc用法
下一篇css3div居中