第8章 内边距 边框和外边距
外边距
- 对外边距设置百分数，该值是相对于父元素的width计算的（不仅应用于左右外边距是这样，也应用于上下外边距）
- margin: top right bottom left
- 规则
如果缺少左边距的值，则使用右外边距的值如果缺少下边距的值，则使用上外边距的值如果缺少右外边距的值，则使用上外边距的值 - 正常流中垂直相邻的外边距会合并
- 行内非替换元素的外边距不会改变一个元素的行高
- 对于只包含文本的行，能改变行间距的属性只有
line-height、font-size和vertical-align
边框
- 边框默认和前景色一致，即color属性值
- border-style的默认值是none，当设置
border-style:none,不仅边框的样式没有，宽度也会变为0，故只有当边框样式存在才能设置边框的宽度 border-color: transparent创建一个不可见的边框- 不论行内元素的边框指定怎样的宽度，元素的行高不会改变
内边距
- 默认，元素没有内边距
- 像外边距一样，百分数值要相对于父元素的width值计算
- 区别于外边距，内边距不合并
- 行内非替换元素的内边距不会改变一个元素的行高
- 区别于外边距，对行内非替换元素设置左右内边距，将是可见的
颜色和背景
颜色
前景色
设置一个元素的前景色，主要利用属性color
- 对于表单元素，设置前景色
input { color: gray }只会影响文本输入框样式，这是由css1无法区分不同类型的input元素导致的，可以通过以下属性选择器来设置复选框和单选按钮的样式input[type="radio"] { color: #333 }input[type="checkbox"] { color: #666 } - color属性是可以继承的
背景色
- background-color 默认是transparent且不能继承
背景图片
- 设置背景图像的同时最好再指定一个背景色，防止因为某种原因无法加载图片，用户代理会使用指定的背景色取代图片
background-repeat: repeat-x | repeat-y分别设置在水平，垂直方向上的重复no-repeat不重复background-position: x y设置背景图位置
x,y等价的位置关键字
| 单个关键字 | 等价关键字 |
|---|---|
| center | center center |
| top | top center |
| bottom | bottom center |
| right | center right or right center |
| left | center left or left center |
