css挺有趣的一门学问,但是好些个自认为“ 逻辑清晰,能言善辩 ”的后端程序员,他就是学不会~
hhh……狂笑
web前端面试 —— CSS部分
1. css sprite 是什么,有什么优缺点
概念:将多个⼩图⽚拼接到⼀个图⽚中。通过 background-position 和 元素尺⼨ 调节需要显示的背景图案。
优点:
a- 减少 HTTP 请求数,极⼤地提⾼⻚⾯加载速度
b- 增加图⽚信息重复度,提⾼压缩⽐,减少图⽚⼤⼩
c- 更换⻛格⽅便,只需在⼀张或⼏张图⽚上修改颜⾊或样式即可实现
缺点:
a- 图⽚合并麻烦
b- 维护麻烦,修改⼀个图⽚可能需要从新布局整个图⽚,样式
2. display: none; 与 visibility: hidden; 的区别
联系:它们都能让元素不可⻅
区别:
display:none ;会让元素完全从渲染树中消失,渲染的时候不占据任何空间
visibility: hidden ;不会让元素从渲染树消失,渲染时元素继续占据空间,只是内容不可⻅
display: none;是⾮继承属性,⼦孙节点消失是由于元素从渲染树消失造成,通过修改⼦孙节点属性⽆法显示;
visibility: hidden; 是继承属性,⼦孙节点消失是由于继承了 hidden ,通过设置 visibility: visible; 可以让⼦孙节点显式
修改常规流中元素的 display 通常会造成⽂档重排。
修改 visibility 属性只会造成本元素的重绘。
读屏器不会读取 display: none ;元素内容;会读取 visibility: hidden; 元素内容
3. link 与 @import 的区别
① link 是 HTML ⽅式, @import 是CSS⽅式
② link 最⼤限度⽀持并⾏下载, @import 过多嵌套导致串⾏下载,出现 FOUC (⽂档样式短暂失效)
③ link 可以通过 rel="alternate stylesheet" 指定候选样式
④ 浏览器对 link ⽀持早于 @import ,可以使⽤ @import 对⽼浏览器隐藏样式
⑤ @import 必须在样式规则之前,可以在css⽂件中引⽤其他⽂件
⑥ 总体来说:link 优于 @import
4. 什么是FOUC?如何避免
a- Flash Of Unstyled Content :⽤户定义样式表加载之前浏览器使⽤默认样式显示⽂档,⽤户样式加载渲染之后再从新显示⽂档,造成⻚⾯闪烁。
b- 解决⽅法:把样式表放到⽂档的 <head>
5. 如何创建块级格式化上下⽂(block formatting context),BFC有什么用?
创建规则:
根元素
浮动元素( float 不取值为 none )
绝对定位元素( position 取值为 absolute 或 fixed )
display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之⼀的元素
overflow 不取值为 visible 的元素
作⽤:
可以包含浮动元素不被浮动元素覆盖
阻⽌⽗⼦元素的 margin 折叠
6. display、float、position的关系
a- 如果 display 取值为 none ,那么 position 和 float 都不起作⽤,这种情况下元素不产⽣框
b- 如果 position 取值为 absolute 或者 fixed ,框就是绝对定位的, float 的计算值为 none , display 根据下⾯的表格进⾏调整
c- 如果 float 不是 none ,框是浮动的, display 根据下表进⾏调整否则,
d- 如果元素是根元素, display 根据下表进⾏调整
e- 其他情况下 display 的值为指定值
f- 总结起来:绝对定位、浮动、根元素都需要调整 display
7. 清除浮动的⼏种⽅式,各⾃的优缺点
① ⽗级 div 定义 height
② 结尾处加空 div 标签 clear:both
③ ⽗级 div 定义伪类 :after 和 zoom
④ ⽗级 div 定义 overflow:hidden
⑤ ⽗级 div 也浮动,需要定义宽度结尾处加 br 标签 clear:both
⽐较好的是第3种⽅式,好多⽹站都这么⽤
8. 为什么要初始化CSS样式?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的⻚⾯显示差异。
当然,初始化样式会对 SEO 有⼀定的影响,但⻥和熊掌不可兼得,但⼒求影响最⼩的情况下初始化
9 css3有哪些新特性
新增各种 css 选择器圆⻆ border-radius 多列布局
阴影和反射
⽂字特效 text-shadow
线性渐变
旋 转 transform
CSS3新增伪类有那些?
p:first-of-type 选择属于其⽗元素的⾸个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其⽗元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其⽗元素唯⼀的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其⽗元素的唯⼀⼦元素的每个 <p> 元素。
p:nth-child(2) 选择属于其⽗元素的第⼆个⼦元素的每个 <p> 元素。
:after 在元素之前添加内容,也可以⽤来做清除浮动。
:before 在元素之后添加内容。
:enabled 已启⽤的表单元素。
:disabled 已禁⽤的表单元素。
:checked 单选框或复选框被选中。
10 display有哪些值?说明他们的作⽤
block 转换成块状元素。
inline 转换成⾏内元素。
none 设置元素不可⻅。
inline-block 象⾏内元素⼀样显示,但其内容象块类型元素⼀样显示。
list-item 象块类型元素⼀样显示,并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从⽗元素继承 display 属性的值
11. 介绍⼀下标准的CSS的盒⼦模型?低版本IE的盒⼦模型有什么不同的?
有两种, IE 盒⼦模型、 W3C 盒⼦模型;
盒模型:内容(content)、填充( padding )、边界( margin )、 边框( border );
区 别:IE 的c ontent 部分把 border 和 padding 计算了进去;
12. CSS优先级算法如何计算?
优先级就近原则,同权重情况下样式定义最近者为准载⼊样式以最后载⼊的定位为准
优先级为: !important > id > class > tag ;
!important ⽐ 内联优先级⾼
13. 对BFC规范的理解?(配合本篇第5题)
它决定了元素如何对其内容进⾏定位,以及与其他元素的关系和相互作⽤
14. 谈谈浮动和清除浮动
浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另⼀个浮动框的边框为⽌。
由于浮动框不在⽂档的普通流中,所以⽂档的普通流的块框表现得就像浮动框不存在⼀样。
浮动的块框会漂浮在⽂档普通流的块框上。
15. position的值, relative和absolute定位原点是
absolute :⽣成绝对定位的元素,相对于 static 定位以外的第⼀个⽗元素进⾏定位
fixed :⽣成绝对定位的元素,相对于浏览器窗⼝进⾏定位
relative :⽣成相对定位的元素,相对于其正常位置进⾏定位
static 默认值。没有定位,元素出现在正常的流中
inherit 规定从⽗元素继承 position 属性的值
16. display:inline-block 什么时候不会显示间隙?(携程)
移除空格
使⽤ margin 负值
使⽤ font-size:0
letter-spacing
word-spacing
17. PNG\GIF\JPG的区别及如何选
GIF
8 位像素, 256 ⾊
⽆损压缩
⽀持简单动画
⽀持 boolean 透明
适合简单动画
JPEG
颜⾊限于 256
有损压缩
可控制压缩质量
不⽀持透明
适合照⽚
PNG
有 PNG8 和 truecolor PNG
PNG8 类似 GIF 颜⾊上限为 256 ,⽂件⼩,⽀持 alpha 透明度,⽆动画
适合图标、背景、按钮
18. ⾏内元素 float:left 后是否变为块级元素?
⾏内元素设置成浮动之后变得更加像是 inline-block
既:⾏内块级元素,设置成这个属性的元素会同时拥有⾏内和块级的特性,最明显的不同是它的默认宽度不是 100% ,
这时候给⾏内元素设置 padding-top 和 padding-bottom 或者 width 、 height 都是有效果的
19. 在⽹⻚中的应该使⽤奇数还是偶数的字体?为什么呢?
偶数字号相对更容易和 web 设计的其他部分构成⽐例关系
20. ::before 和 :after中双冒号和单冒号有什么区别?解释⼀下这2个伪元素的作⽤。
单冒号( : )⽤于 CSS3 伪类
双冒号( :: )⽤于 CSS3 伪元素
⽤于区分伪类和伪元素
21. 如果需要⼿动写动画,你认为最⼩时间间隔是多久,为什么?(阿里)
多数显示器默认频率是 60Hz ,即 1 秒刷新 60 次,
所以理论上最⼩间隔为:
1/60*1000ms = 16.7ms
22. CSS合并⽅法
避免使⽤ @import 引⼊多个 css ⽂件,可以使⽤ CSS ⼯具将 CSS 合并为⼀个 CSS ⽂件,
例如使⽤ Sass\Compass 等
23. CSS不同选择器的权重(CSS层叠的规则)
!important 规则最重要,⼤于其它规则
⾏内样式规则,加 1000
对于选择器中给定的各个 ID 属性值,加 100
对于选择器中给定的各个类属性、属性选择器或者伪类选择器,加 10
对于选择其中给定的各个元素标签选择器,加1
如果权值⼀样,则按照样式规则的先后顺序来应⽤,顺序靠后的覆盖靠前的规则
24. 列出你所知道可以改变⻚⾯布局的属性
position 、
display 、
float 、
width 、
height 、
margin 、
padding 、
top 、
bottom、
left 、
right
25. CSS在性能优化⽅⾯的实践
css 压缩与合并、 Gzip 压缩
css ⽂件放在 head ⾥、不要⽤ @import
尽量⽤缩写、避免⽤滤镜、合理使⽤选择器
26. CSS3动画(简单动画的实现,如旋转等)
依 靠 CSS3 中提出的三 个 属 性 :transition 、 transform 、 animation
transition :定义了元素在变化过程中是怎么样的,包含 transition-property 、transition-duration 、transition-timing-function 、 transition-delay 。
transform :定义元素的变化结果,包含 rotate 、 scale 、 skew 、 translate 。
animation :动画定义了动作的每⼀帧( @keyframes )有什么效果,包括 animation-name ,animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction
27 base64的原理及优缺点
优点:可以加密,减少了 HTTTP 请求
缺点:需要消耗 CPU 进⾏编解码