第八章 padding border margin

第八章 padding border margin

1.基本元素框
width和height 这两个属性不能应用于行内非替换元素，CSS兼容浏览器会忽略这些声明。

a.width
值：<length> <percentage> auto inherit
初始值：auto
应用于：块级元素和替换元素
继承性：无
百分数：相对于包含块的width

b.height
值：<length> auto inherit
初始值：auto
应用于：块级元素和替换元素
说明：height一般由元素内容决定，在正常流中，一般不设置高度

c.历史问题
在IE/win<6中：width和height为可见尺寸，而非内容尺寸。
行内非替换元素也能使用这些属性，如a元素。
IE6标准模式修正了这一缺点，IE6混乱模式还是会出现。

2.外边距 VS 内边距
外边距不会使用元素背景色，而内边距会。

3.外边距 margin
值：<length> <percentage> auto{1,4} inherit
初始值：未定以
继承性：无
应用于：所有元素
百分数：相对于包含块的width
说明：
a.设置为auto时见第七章
b.外边距和行内非替换元素：margin-top和margin-bottom（上下方向）允许，
但由于外边距实际上是透明的，而且不对行高产生影响，所以没有任何视觉效果。
margin-left和margin-right（左右方向），正常使用，挤开元素内容。
c.外边距和行内替换元素：外边距会影响行高。


4.边框 border
说明：每个边框都有3个属性：粗细 颜色 样式
其中，粗细，默认值为medium，一般为2px。
样式，默认值为none，此时即使有边框粗细和颜色，边框也相当于不存在。
颜色，如果未声明，则与元素文本颜色相同。如果元素无文本，则与其父元素颜色相同（继承所得）

border-color border-style border-width 都可以像margin一样有四边写法(border-left-color等）
也可以如margin多值声明和缩写。

CSS2：元素背景只是延伸到边框，不包含边框，因此不会利用到边框间隙。
CSS2.1：边框绘制在元素背景上，即边框间隙（如dotted）会利用背景颜色。


a.边框颜色 border-color
值：<color> transparent inherit
初始值：元素color颜色
继承性：无
说明：
1.默认为元素color
2.transparent：有样式，有宽度，但不可见，效果类似于内边距。不过，IE/win<7不支持边框颜色transparent属性。

b.边框样式 border-style
值：none hidden dotted dashed solid double groove
    ridge inset outset inherit
应用于：所有元素
继承性：无
说明：
1.在CSS1和CSS2中，用户代理只需支持solid和none，其余值（除hidden外），可能被解释为solid，
不过这些限制在CSS2.1中被废除。
2.使用double时，根据浏览器不同，边框尺寸可能存在差异，建议不使用。


c.边框宽度 border-width
值：thin medium thick <length> inherit
初始值：medium
应用于：所有元素
计算值：绝对长度。
说明：
1.使用thin medium thick时，这些关键字在不同浏览器中实现不同，一般为2px 3px 5px，1px 2px 3px。
2.如果border-style为none（默认值）或hidden，则为0

d.简写边框属性
border-top border-right border-bottom border-left

e.全局边框 border
宽度 样式 颜色：如果缺少其中一项，就会被设置为默认值。
这时要小心不要让border-style被设置为默认值none，如果这样就会使整个边框不存在。

f.边框和行内元素
上下边框：可显示，但不会影响行高
左右边框：可显示，而且还会把文字往两边“挤”


5.内边距 padding
值：<length> <percentage> {1,4} inherit
初始值：0
继承性：无
应用于：所有元素
百分数：相对于包含块的width
说明：
a.内边距绝对不能为负数
b.百分数值和内边距：相对于元素的width(而非height)，如果父元的width改变，内边距也会随之改变。
c.行内元素和内边距：上下左右方向都可见。
上下：不会影响行高，如果元素有背景色，背景色可能发生重叠。
左右：会将元素内容往两边“挤”
d.内边距和替换元素：对于img可见且可改变行高，当对于input形式的替换元素，如复选框，浏览器可能实现不同，可能忽略内边距。