一、盒子模型内容范围包括:margin、border、padding、content
主要属性包括:width、height、padding、border、margin
1. width: 内容的宽度
2. height:内容的高度
3. padding:内边距
4. margin: 外边距
二、属性使用
2.1 margin
示例:
margin: 10px;
- 四个外边距都是10px
margin: 10px 5px;
- 上下外边距:10px
- 左右外边距:5px
margin: 20px 10px 5px;
- 上外边距:20px
- 右外边距:10px
- 下外边距:5px
- 左外边距与右外边距相同:10px
margin: 20px 15px 10px 5px;
- 上外边距: 20px
- 右外边距:15px
- 下外边距: 10px
- 左外边距: 5px
- margin-top: 设置上外边距
- margin-right: 设置右外边距
- margin-buttom: 设置下外边距
- margin-left: 设置左外边距
注意: 当两个垂直的外边距相遇时,将会合并为一个外边距,合并后的高度为这两个外边距中的较大者。
2.2 border
示例
border: 1px solid red;
分别设置了: border-width、 border-style、 border-color
- border-width: 设置边框宽度,默认值为medium, 可选项,thin、medium、thick、length(自定义长度)、
- border-style:设置边框样式
- border-color:设置边框颜色
同时css3还新增了边框样式,如下
- border-radius:圆角边框
- border-shadow:边框背景
- border-image:边框图片
2.3 padding: 内边距
padding: 10px;
- 四个内边距都是10px
padding: 20px 10px;
- 上下内边距20px,左右内边距10px
padding: 20px 15px 10px;
- 上内边距20px,右内边距15px,下内边距10px,左因为缺省与右相等,则为10px
padding: 20px 15px 10px 5px;
- 上20px 右15px 下10px 左5px
设置单个方向的值:
+ padding-left 设置内容距离左内边框距离
+ padding-right 设置内容距离右内边框距离
+ padding-top 设置内容距离上内边框距离
+ padding-bottom 设置内容距离下内边框距离
注意: 根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的, 但IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。