几个属性的特殊性
CSS几个属性的特殊性CSS几个属性的特殊性CSS几个属性的特殊性
border 的特殊性
- border-width 却不支持百分比。
- border-style 的默认值是 none，有一部分人可能会误以为是 solid。这也是单纯设置 border-width 或 border-col or 没有边框显示的原因。
- border-style:double 的表现规则：双线宽度永远相等，中间间隔±1。
- border-color 默认颜色就是 color 色值。
- 默认 background 背景图片是相对于 paddingbox 定位的。
line-height 的特殊性
对于非替换元素的纯内联元素，其可视高度完全由 line-height 决定。对于文本这样的 纯内联元素，line-height 就是高 度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。
内联元素的高度由固定高度和不固定高度组成，这个不固定的部分就是这里的“行距”。 换句话说，line-height 之所以起作 用，就是通过改变“行距”来实现的。在 CSS 中，“行距”分散在当前文字的上方和下方，也就 是即使是第一行文字，其上方也是 有“行距”的，只不过这个“行距”的高度仅仅是完整“行距”高度的一半，因此，也被称为“半行 距”。
行距=line-height-font-size。
border 以及 line-height 等传统 CSS 属性并没有小数像素的概念。如果标注的是文字上 边距，则向下取整；如果是文字下 边距，则向上取整。
对于纯文本元素，line-height 直接决定了最终的高度。但是，如果同时有替换元素， 则 line-height 只能决定最小高度。
对于块级元素，line-height 对其本身是没有任何作用的，我们平时改变 line-height，块 级元素的高度跟着变化实际上是 通过改变块级元素里面内联级别元素占据的高度实现的。
line-height的默认值是normal，还支持数值、百分比值以及长度值。为数值类型时， 其最终的计算值是和当前font-size相乘后的值。为百分比值时，其最终的计算值是和当前 font-size 相乘后的值。为长度值 时原意不变。(推荐使用数字)如果使用数值作为 line-height 的属性值，那么所有的子元素继承的都是这个值；但是， 如果使用百分比值或者长度值作为 属性值，那么所有的子元素继承的是最终的计算值。
无论内联元素 line-height 如何设置，最终父级元素的高度都是由数值大的那个 line-height 决定的。
只要有“内联盒子”在，就一定会有“行框盒子”，就是每一行内联元素外面包裹的一层 看不见的盒子。然后，重点来了，在每个 “行框盒子”前面有一个宽度为 0 的具有该元素的字体和行高属性的看不见的“幽灵空白节点”。
vertical-align 的特殊性
vertical-align 起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以及 display 值为 table-cell 的元 素。
vertical-align 的默认值是 baseline，即基线对齐，而基线的定义是字母 x 的下边缘。因 此，内联元素默认都是沿着字 母 x 的下边缘对齐的。对于图片等替换元素，往往使用元素本身的下边缘作为基线。：一个 inline-block 元素，如果里面 没有内联元素，或者 overflow 不是 visible，则该元素的基线就是其 margin 底边缘；否则其 基线就是元素里面最后一行 内联元素的基线。
vertical-align:top 就是垂直上边缘对齐，如果是内联元素，则和这一行位置最高的内联 元素的顶部对齐；如果 display 计算值是 table-cell 的元素，我们不妨脑补成
元素，则和 元素上边缘对齐。 vertical-align:middle 是中间对齐，对于内联元素，元素的垂直中心点和行框盒子基线往 上 1/2x-height 处对齐。对 于 table-cell 元素，单元格填充盒子相对于外面的表格行居中对齐。
vertical-align 支持数值属性，根据数值的不同，相对于基线往上或往下偏移，如果是负 值，往下偏移，如果是正值，往上 偏移。
vertical-align 属性的百分比值则是相对于 line-height 的计算值计算的。
table-cell 元素设置 vertical-align 垂直对齐的是子元素，但是其作用的并不是子元素， 而是 table-cell 元素自身。
overflow 的特殊性
滚动条会占用容器的可用宽度或高度。
HTML中有两个标签是默认可以产生滚动条的，一个是根元素<html>，另一个是文本域<textarea>。元素设置了
overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚 动条不存在！一个设置了
overflow:hidden声明的元素，假设同时存在border属性和padding属性， 则当子元素内容超出容器宽度 高度限制的时候，剪裁的边界是borderbox的内边缘，而非paddingbox的内边缘。
absolute 与 overflow 的关系
如果
overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素， 则overflow无法对absolute元素进行剪裁。如果
overflow的属性值不是hidden而是auto或者scroll，即使绝对定位元素高宽比overflow元素高宽还要大，也 都不会出现滚动条。overflow元素自身transform的时候，Chrome和Opera浏览器下的overflow剪裁是无 效的。
relative 的特殊性
相对定位元素的
left/top/right/bottom的百分比值是相对于包含块计算的，而不是自身。 注意，虽然定位位移是相对自身，但是百分比值的计算值不是。top和bottom这两个垂直方向的百分比值计算跟height的百分比值是一样的，都是相 对高度计算的。同时，如果包含块的高度是 auto，那么计算值是 0，偏移无效，也就是说， 如果父元素没有设定高度或者不是“格式化高度”，那么relative类似top:20%的代码等同于top:0。- 当相对定位元素同时应用对立方向定位值的时候，也就是
top/bottom和left/right同时 使用的时候，只有一个方向的定位属性会起作用。而谁起作用则是与文档流的顺序有关的， 默认的文档流是自上而下、从左往右，因此top/bottom同时使用的时候，bottom 失效；left/right同时使用的时候，right 失效。
font-weight 的特殊性
如果使用数值作为 font-weight 属性值，必须是 100～900 的整百数(非 100 的整数倍的值将被四舍五入转换为 100 的整倍数，遇到 *50 时，将向上转换，如 150 将转换为 200 )。因为这里的数值仅仅是外表长得像数值，实际上是一个具有特定含义的关键字，并且这里的数值关键字和字母关键 字之间是有对应关系的。
text-indent 的特殊性
text-indent仅对第一行内联盒子内容有效。text-indent的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素。非替换元素以外的
display计算值为inline的内联元素设置text-indent值无效，如果计 算值inline-block/inline-table则会生效。<input>标签按钮 text-indent 值无效。<button>标签按钮 text-indent 值有效。
letter-spacing 与字符间距
letter-spacing 可以用来控制字符之间的间距，这里说的“字符”包括英文字母、汉字以及空格 等。
letter-spacing 具有以下一些特性。
继承性。
暂不支持百分比值。
支持小数值，即使 0.1px 也是支持的。
支持负值，且值足够大的时候，会让字符形成重叠，甚至反向排列。
和 text-indent 属性一样，无论值多大或多小，第一行一定会保留至少一个字符。
默认值是 normal 而不是 0。虽然说正常情况下，normal 的计算值就是 0，但两者还是 有差别的，在有些场景下，letter-spacing 会调整 normal 的计算值以实现更好的版面布局。
letter-spacing 作用于所有字符，但
word-spacing仅作用于空格字符。换句话说，word-spacing的作用就是增加空格的间隙 宽度。
white-space属性是用来设置如何处理元素中的空白。