基本元素框
宽度和高度
- 一个元素的width被定义为从左内边界到右内边界的距离，同样height也是。该属性不能用于行内非替换元素
width：<length>|<percentage>|auto|inherit
百分数是相对于包含块的width
height：<length>|auto|inherit
百分数是相对于包含块的height计算
外边距和内边距
外边距会在元素周围创建额外的空白，“空白”通常指不能放其他元素的区域，而且这个区域可以看到父元素的背景
margin：<length>|<percentage>|auto{1,4}|inherit
百分数相对于包含块的width
长度值和外边距
margin设置长度时按照上右下左的顺序（即顺时针方向）
百分数和外边距
百分数是相对于父元素的width计算的，所以如果父元素的width以某种方式改变，百分数也会发生改变
*** 注意： 百分数值的定义相对于父元素的width，不仅用于左右外边距还用于上下外边距***
这样设计是因为正常情况下大多数元素会足够高以包含其后代元素（包括其外边距）如果一个元素的上下外边距是其父元素height的一个百分数，就可能导致一个无限循环（父元素的height增加，以适应后代元素的外边距增加，而相应的上下外边距又必须增加，因为父元素的height增加了）
- 可以混合的使用百分数和长度值，比如
margin:10px 5% 10px 5%
值复制
- 如果缺少左外边距的值，则使用右外边距的值
- 如果却上下外边距的值，则使用上外边距的值
- 如果缺少右外边距的值，则使用上外边距的值
简单来说就是如果指定了三个值，那么第四个值即左外边距的值会从第二个值，也就是右外边距的值复制；如果指定了两个值，那么第四个值会从第二个复制，第三个值会从第一个复制；如果指定了一个值，那么其他三个值会复制这个值
比如：
h1{margin：0.25em 0 0.5em}等于0.25 0 0.5em 0
h1{margin:5px 10px } 等于 5px 10px 5px 10px
h1{margin：15px} 等于15px 15px 15px 15px
单外边距属性
margin-top|margin-bottom|margin-left|margin-right
负外边距和合并外边距
正常流中垂直相邻外边距会合并
外边距和行内元素
向一个行内非替换元素应用外边距，它对行高没有影响。但对于左右外边距是生效的。
- 左外边距应用到元素的开始位置，右外边距应用到元素的结束位置，而不是行的两侧，特别是在元素跨行的情况下。外边距只是通过改变元素内容在行中起点的位置来影响换行。
- 对于负外边距会导致元素与左右两边元素重叠
- 对于替换元素，设置外边距会影响行高，左右外边距的情况与非替换元素的情况一致
边框border
- 边框宽度的默认值是medium，通常是2px
- 边框默认的样式是none 所以默认看不到边框
- 边框颜色是元素本身的前景色，如果没有声明边框颜色，它与文字颜色相同如果一个元素没有任何文本，那边框与父元素文本颜色相同，因为color可以继承
- 元素的背景会延伸到边框边界之外，边框绘制在元素背景之上，因此对于虚线等样式的边框，可以看到透明部分的背景颜色。
有样式的边框
border-style：none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|{1,4}inherit
- 样式hidden等价于none，不过应用于表格除外，对于表，hidden用于解决边框冲突
- 对于double 其定义为两条线加直接的空隙宽度等于定义的border-width宽度
将边框设置为outside使元素看起开像一个凸起按钮 - 边框样式依然按照顺时针顺序设置，可以设置为
border-style:solid dashed dotted solid - 简写方法同外边距
- 可以单独设置某一边的样式，比如border-top-style
边框宽度
- border-width：thin|medium|thick|length
- 同样具有单边属性，border-top-width
- border-width同样具有值复制
网友评论