盒子模型(margin、border、padding)
- margin(外边距)
常用样式写法:margin:10px 10px 0 0; 依次设定上、右、下、左外边距
其他相关样式:
- padding-top/right/bottom/left:1px - 单独设置上下左右外边距
注意:
嵌套元素塌陷问题 - 对子元素使用margin没办法将子元素与父元素隔开
解决:
1.为父元素定义上边框
2.为父元素定义上内边框
3.为父元素添加overflow:hidden
- border(边框) :会撑开盒子
常用样式写法:border:1px solid #ccc; 依次表示边框宽度、边框样式(solid(实线)\dotted(点线)\dashed(虚线))、边框颜色
其他相关样式:
- border-top/right/bottom/left:1px - 单独设置上下左右边框
- border-style:solid - 单独设置边框样式
- border-color:#ccc - 单独设置边框颜色
- border-width:1px - 单独设置边框宽度
-border-collapse:collapse - 设置相邻边框合并
CSS3新增样式:
- border-radius:10px 10px 0 0; 设置边框的角半径,有效利用可获得圆形、椭圆等
- padding(内边距):会撑开盒子
常用样式写法:padding:10px 10px 0 0; 依次设定上、右、下、左内边距
其他相关样式:
- padding-top/right/bottom/left:1px - 单独设置上下左右内边距
注意:盒子本身没有width/height时,不会撑开盒子
margin、border、padding区别:
margin - 盒子与父盒子之间的距离
border - 盒子边框,如一个60*60px的盒子,其border为2px,则其实为62*62px的盒子
padding - 盒子中内容与盒子内边框的距离,可用来控制盒子中文本居中或某一位置显示