css如何固定table第⼀⾏_CSS⾯试知识点总结三
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⽀持数值属性，根据数值的不同，相对于基线往上或往下偏移，如果
是负值，往下偏移，如果是正值，往上偏移。
(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;
css固定定位
}/*多⾏⽂本溢出*/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: '';

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。