《CSS权威指南》学习笔记之框与边框

框与边框

css框模型：

立体图：

width

允许值 <长度>|<百分比>|auto

初始值 auto

可否继承 否

适用于 块级元素和替换元素

注意：百分比是相对于父元素。

height

允许值 <长度>|auto

初始值 auto

可否继承 否

适用于：块级元素和替换元素。

边界（margin）

margin

允许值 [<长度>|<百分比>|auto]{1,4}  //{1,4}指可以有1~4个值

初始值 未定义

可否继承 否

适用于 所有元素

注意：百分比是指相对于父元素的宽度。

margin：top right bottom left 顺时针方向

可混合使用长度类型 h2{margin:14px 5em 0.1in 3ex;}

margin的复制值：

• 如果没有left值，则使用right值代替。
• 如果没有bottom值，则使用top值代替。
• 如果没有right值，则使用top值代替。

单侧边界属性

margin-top, margin-right, margin-bottom, margin-left

允许值  <长度>|<百分比>|auto

初始值 0

可否继承 否

适用于 所有元素

注意：百分比是指相对于父元素的高度。

压缩（重叠）边界

沿纵轴方向，相邻边界会被压缩，即两个边界中较小的那个被淘汰。且压缩只应用于边界，补白及边框不会被压缩。

边框（border）

border-style

允许值 none|dutted|dashed|solid|double|groove|ridge|inset|outset

初始值 none

可否继承 否

适用于 所有元素

注意：对CSS1来说，只有支持solid是必需的。

border-width

允许值 [thin|medium|thick|<长度>]{1,4}

初始值 未定义缩略属性

可否继承 否

适用于 所有元素

border-top-width，border-right-width，border-bottom-width，border-left-width

允许值 [thin|medium|thick|<长度>]{1,4}

初始值 medium

可否继承 否

适用于 所有元素

注：p{margin: 5px; border-width: 20px;} 由于border-style的缺省值是none，声明边框失败等同于声明border-style为none。因此，若想一个边框出现，必须挑选一个样式并声明它。

border-color

允许值 <颜色>{1,4}

初始值 元素的颜色

可否继承 否

适用于 所有元素

border-top，border-right，border-bottom，border-left

允许值 <边框宽度>||<边框样式>||<颜色> （值的排列顺序并不重要，也可以空缺一些值且使用其缺省值，但是如果空缺了边框样式，那么其缺省值none将会使边框无法显示）

初始值 参考各个属性

可否继承 否

适用于 所有元素

border

允许值 <边框宽度>||<边框样式>||<颜色>

初始值 参考各个属性

可否继承 否

适用于 所有元素

注意：使用border的缺点是赋给border的值会应用于所有四条边上。但 H1 {border: thick silver solid;  border-left-width: 20px;} 20px会代替thick。