1、margin 无效的情形
(1)display计算值inline的非替换元素的垂直margin是无效的。对于内联替换元素,垂直margin有效,并且没有margin合并的问题。
(2)表格中的和元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。
(3)绝对定位元素非定位方位的margin值“无效”。
(4)定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。
2、border 的特殊性?
(1)border-width却不支持百分比。
(2)border-style的默认值是none,有一部分人可能会误以为是solid。这也是单纯设置border-width或border-color没有边框显示的原因。
(3)border-style:double的表现规则:双线宽度永远相等,中间间隔±1。
(4)border-color默认颜色就是color色值。
(5)默认background背景图片是相对于padding box定位的。
3、什么是基线和 x-height?
字母x的下边缘(线)就是我们的基线。
x-height指的就是小写字母x的高度,术语描述就是基线和等分线(meanline)(也称作中线,midline)之间的距离。在CSS世界中,middle指的是基线往上1/2x-height高度。我们可以近似理解为字母x交叉点那个位置。
ex是CSS中的一个相对单位,指的是小写字母x的高度,没错,就是指x-height。ex的价值就在其副业上不受字体和字号影响的内联元素的垂直居中对齐效果。内联元素默认是基线对齐的,而基线就是x的底部,而1ex就是一个x的高度。
4、line-height 的特殊性?
(1
度计算的基石,用专业说法就是指定了用来计算行框盒子高度的基础高度。
用,就是通过改变“行距”来实现的。在CSS中,“行距”分散在当前文字的上方和下方,也就是即使是第一行文字,其上方也是(7)line-height的默认值是normal,还支持数值、百分比值以及长度值。为数值类型时,
其最终的计算值是和当前font-si
font-size相乘后的值。为长度值时原意不变。
(8)如果使用数值作为line-height的属性值,那么所有的子元素继承的都是这个值;但是,
如果使用百分比值或者长度值作为
(9)无论内联元素line-height如何设置,最终父级元素的高度都是由数值大的那个
line-height决定的。
(10)只要有“内联盒子”在,就一定会有“行框盒子”,就是每一行内联元素外面包裹的一层看不见的盒子。然后,重点来了,在每个“行框盒子”前面有一个宽度为0的具有该元素的字体和行高属性的看不见的“幽灵空白节点”。
5、vertical-align 的特殊性?
(1)vertical-align的默认值是baseline,即基线对齐,而基线的定义是字母x的下边缘。因此,内联元素默认都是沿着字
母x的下边缘对齐的。对于图片等替换元素,往往使用元素本身的下边缘作为基线。:
一个inline-block元素,如果里面没有内联元素,或者overflow不是visible,则该元素的
基线就是其margin底边缘;否则其基线就是元素里面最后一行内联元素的基线。
(2)vertical-align:top就是垂直上边缘对齐,如果是内联元素,则和这一行位置最高的内联元素的顶部对齐;如果display
计算值是table-cell的元素,我们不妨脑补成元素,则和元素上边缘对齐。
(3)vertical-align:middle是中间对齐,对于内联元素,元素的垂直中心点和行框盒子基线往上1/2x-height处对齐。对
于table-cell元素,单元格填充盒子相对于外面的表格行居中对齐。
(4)vertical-align支持数值属性,根据数值的不同&#x