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-sifont-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支持数值属性，根据数值的不同，相对于基线往上或往下偏移，如果
是负值，往下偏移，如果是正值，往上偏移。
(5)vertical-align属性的百分比值则是相对于line-height的计算值计算的。(6)vertical-align起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以
及display值为table-cell的元
素。
(7)table-cell元素设置vertical-align垂直对齐的是子元素，但是其作用的并不是子
元素，而是table-cell元素自身。
6、overflow 的特殊性？
(1)一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度
高度限制的时候，剪裁的边界是border box的内边缘，而非padding box的内边缘。(2)HTML中有两个标签是默认可以产生滚动条的，一个是根元素，另一个是文本域
。
(3)滚动条会占用容器的可用宽度或高度。(4)元素设置了overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，
仅仅滚动条不存在！
7、无依赖绝对定位是什么？
没有设置left/top/right/bottom属性值的绝对定位称为“无依赖绝对定位”。
无依赖绝对定位其定位的位置和没有设置position:absolute时候的位置相关。
8、absolute 与 overflow 的关系？
(1)如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow无法对absolute
元素进行剪裁。
(2)如果overflow的属性值不是hidden而是auto或者scroll，即使绝对定位元素高宽比
overflow元素高宽还要大，也都不会出现滚动条。
(3)overflow元素自身transform的时候，Chrome和Opera浏览器下的overflow剪裁是无效的。
9、clip 裁剪是什么？
所谓“可访问性隐藏”，指的是虽然内容肉眼看不见，但是其他辅助设备却能够进行识别和访问
的隐藏。
clip剪裁被我称为“最佳可访问性隐藏”的另外一个原因就是，它具有更强的普遍适应性，
任何元素、任何场景都可以无障碍使用
10、relative 的特殊性？
(1)相对定位元素的left/top/right/bottom的百分比值是相对于包含块计算的，
而不是自身。注意，虽然定位位移是相对自身，但是百分比值的计算值不是。
(2)top和bottom这两个垂直方向的百分比值计算跟height的百分比值是一样的，都是相对高度计算的。同时，如果包含块的高度是auto，那么计算值是0，偏移无效，也就是说，如果父元素没有设定高度或者不是“格式化高度”，那么relative类似top:20%的代码等同于top:0。
(3)当相对定位元素同时应用对立方向定位值的时候，也就是top/bottom和left/right同时使用的时候，只有一个方向的定位属性会起作用。而谁起作用则是与文档流的顺序有关的，默认的文档流是自上而下、从左往右，因此top/bottom同时使用的时候，bottom失效；left/right同时使用的时候，right失效。11、什么是层叠上下文？
层叠上下文，英文称作stacking context，是HTML中的一个三维的概念。如果一个元素含
有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。
层叠上下文元素有如下特性：
(1)层叠上下文的层叠水平要比普通元素高(原因后面会说明)。
(2)层叠上下文可以阻断元素的混合模式。
(3)层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。(4)每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑
后代元素。
(5)每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下
文的层叠顺序中。
层叠上下文的创建：(1)页面根元素天生具有层叠上下文，称为根层叠上下文。根层叠上下文指的是页面根元素，
可以看成是元素。因此，页面中所有的元素一定处于至少一个“层叠结界”中。
(2)对于position值为relative/absolute以及Firefox/IE浏览器(不包括Chrome浏
览器)下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会创建
层叠上下文。Chrome等WebKit内核浏览器下，position:fixed元素天然层叠上下文元素
，无须z-index为数值。根据我的测试，目前IE和Firefox仍是老套路。
(3)其他一些CSS3属性，比如元素的opacity值不是1。
12、什么是层叠水平？
层叠水平，英文称作stacking level，决定了同一个层叠上下文中元素在z轴上的显示顺序。
显而易见，所有的元素都有层叠水平，包括层叠上下文元素，也包括普通元素。然而，对普通
元素的层叠水平探讨只局限在当前层叠上下文元素中。
13、元素的层叠顺序？
层叠顺序，英文称作 stacking order，表示元素发生层叠时有着特定的垂直显示顺序。
14、层叠准则？
(1)谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠
上下文领域，层叠水平值大的那一个覆盖小的那一个。
(2)后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素
会覆盖前面的元素。
15、.text-indent 的特殊性？
(1)text-indent仅对第一行内联盒子内容有效。
(2)非替换元素以外的display计算值为inline的内联元素设置text-indent值无效，如果计算值inline-block/inline-table则会生效。
(3)标签按钮text-indent值无效。
(4)标签按钮text-indent值有效。
(5)text-indent的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素。
16、隐藏元素的 background-image 到底加不加载？
根据测试，一个元素如果display计算值为none，在IE浏览器下(IE8～IE11，更高版本不确定)依然会发送图片请求，Firefox浏览器不会，至于Chrome和Safari浏览器则似乎更加智能一点：如果隐藏元素同时又设置了background-image，则图片依然会去加载；如果是父元素的display计算值为none，则背景图不会请求，此时浏览器或许放心地认为这个背景图暂时是不会使用的。
如果不是background-image，而是元素，则设置display:none在所有浏览器下依旧都会请求图片资源。
还需要注意的是如果设置的样式没有对应的元素，则background-image也不会加载。hover情况下的background-image，在触
发时加载。
17、如何实现单行／多行文本溢出的省略
/*单行文本溢出*/p {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}/*多行文本溢出*/p {position: relative;line-height: 1.5em;/*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/height: 3em;overflow: hidden;
}p:after {content: '...';position: absolute;bottom: 0;right: 0;background-color: #fff;
}18、常见的元素隐藏方式？
(1)使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
(2)使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件。
(3)使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
(4)通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
(5)通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。
(6)通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
(7)通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
19、实现一个宽高自适应的正方形
/*1.第一种方式是利用vw来实现*/
.square {
width: 10%;
height: 10vw;
background: tomato;
}
/*2.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/
.square {
width: 20%;
height: 0;
padding-top: 20%;
background: orange;
}
/*3.第三种方式是利用子元素的margin-top的值来实现的*/
.square {
width: 30%;
overflow: hidden;
background: yellow;
}
.square::after {
content: '';
display: block;
margin-top: 100%;
}
20、你知道 CSS 中不同属性设置为百分比%时对应的计算基准？
公式：当前元素某CSS属性值 = 基准 * 对应的百分比
元素的 position 为 relative 和 absolute 时，top和bottom、left和right基准分别为包含块的 height、width
元素的 position 为 fixed 时，top和bottom、left和right基准分别为初始包含块(也就是视口)的 height、width，移动设备较为复杂，基准为 Layout viewport 的 height、width
元素的 height 和 width 设置为百分比时，基准分别为包含块的 height 和 width
元素的 margin 和 padding 设置为百分比时，基准为包含块的 width(易错)
元素的 border-width，不支持百分比
元素的 text-indent，基准为包含块的 width
元素的 border-radius，基准为分别为自身的height、width
元素的 background-size，基准为分别为自身的height、width
元素的 translateX、translateY，基准为分别为自身的height、width
元素的 line-height，基准为自身的 font-size
元素的 font-size，基准为父元素字体
4510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
