CSS面试题总结

最新推荐文章于 2023-10-19 12:30:30 发布

这个杀手有点热

最新推荐文章于 2023-10-19 12:30:30 发布

阅读量301

点赞数 1

分类专栏：笔记文章标签： css css3 前端

本文链接：https://blog.csdn.net/likexiziname/article/details/125252729

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS面试题总结

1. CSS3新特性有哪些？

答：1. 颜色：新增 RGBA，HSLA 模式
2.文字阴影（text-shadow）
3.边框：圆角（border-radius）边框阴影： box-shadow
4.盒子模型：box-sizing
5.背景：
background-size 设置背景图片的尺寸
background-origin 设置背景图片的原点
background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6.渐变：linear-gradient、radial-gradient
7 过渡：transition，可实现动画
8. 自定义动画
9. 在 CSS3 中唯一引入的伪元素是：selection.
10. 媒体查询，多栏布局
11. border-image
12.2D 转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
13. 3D 转换

2. 描述一下CSS中的渐进增强，优雅降级之间的区别？

答、优雅降级和渐进增强印象中是随着 css3 流出来的一个概念。由于低级浏览器不支持css3，但 css3 的效果又太优秀不忍放弃，所以在高级浏览中使用 css3 而低级浏览器只保证最基本的功能。咋一看两个概念差不多，都是在关注不同浏览器下的不同体验，关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。举个例子： 优雅降级
a{
display：block；
width：200px；
height： 100px；
background：aquamarine； /我就是要用这个新 css 属性/
transition：all 1s ease 0s； /可是发现了一些低版本浏览器不支持怎么吧/
/往下兼容/
-webkit-transition：all 1s ease 0s；
-moz-transition：all 1s ease 0s；
-o-transition： all 1s ease 0s；
/那么通常这样考虑的和这样的侧重点出发的 css 就是优雅降级/ }
渐进增强
/ 那如果我们的产品要求我们要重低版本的浏览器兼容开始/
a{
/优先考虑低版本的/
-webkit-transition：all 1s ease 0s；
-moz-transition：all 1s ease 0s；
-o-transition： all 1s ease 0s；
/高版本的就肯定是渐进渐强/
transition：all 1s ease 0s； }
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。
“渐进增强”观点则认为应关注于内容本身。

3. 对BFC规范的理解有哪些？

答、 1）定义：
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
2）布局规则：
A. 内部的 Box 会在垂直方向，一个接一个地放置。
B. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
C. 每个元素的 margin box 的左边，与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
D. BFC 的区域不会与 float box 重叠。
E. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
F. 计算 BFC 的高度时，浮动元素也参与计算。
3）哪些元素会生成 BFC：
A. 根元素
B. float 属性不为 none
C. position 为 absolute 或 fixed
D. display 为 inline-block， table-cell， table-caption， flex， inline-flex
E. overflow 不为 visible

4.css reset是什么？normalize.css是什么？

答： reset是：
Reset 重置浏览器的 css 默认属性，浏览器的品种不同，样式不同，然后重置，让他们（暴力的，强制的）统一。
normalize.css是
• Normalize.css 是 css reset 的替代方案，保护有用的浏览器默认样式而不是完全去掉它们（温和的，根据浏览器特性的）
• 一般化的样式：为大部分 HTML 元素提供
• 修复浏览器自身的 bug 并保证各浏览器的一致性
• 优化 CSS 可用性：用一些小技巧
• 解释代码：用注释和详细的文档来。

5. 你遇到过的兼容问题有哪些?如何解决的？

答：1、png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8
2、浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的{margin： 0;padding：0;}来统一。
3、IE6 双边距 bug：块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示margin 比设置的大。浮动 ie 产生的双倍距离 #itcast{ float：left; width：10px;
margin：0 0 0 100px;} 这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入 display：inline;将其转化为行内属性。( “” 这个符号只有 ie6 会识别)
4 ，IE 下,可以使用获取常规属性的方法来获取自定义属性,也可以使getAttribute()获取自定义属性;
Firefox 下,只能使用 getAttribute()获取自定义属性。
解决方法：统一通过 getAttribute()获取自定义属性。
5、 IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性;
Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性。
解决方法：（条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。
6、 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust：none; 解决。
7、超链接访问过后 hover 样式就不出现了被点击访问过的超链接样式不在具有 hover 和active 了。
解决方法是：改变 CSS 属性的排列顺序：L-V-H-A 、 a：link {} a：visited {}
a：hover {} a：active {}

6. 清除浮动有几种方式？

答：1、父级 div 定义 height
原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。简单、代码少、容易掌握，但只适合高度固定的布局.
2、结尾处加空 div 标签 clear：both
原理：在浮动元素的后面添加一个空 div 兄弟元素，利用 css 提高的 clear：both 清除浮动，让父级 div 能自动获取到高度，如果页面浮动布局多，就要增加很多空 div，让人感觉很不好 .
3、父级 div 定义伪类：after 和 zoom
/清除浮动代码/

.clearfix:after{
content:"";
display:block;
visibility:hidden;
height:0;
line-height:0;
clear:both; }
.clearfix{zoom:1;}

原理：IE8以上和非IE 浏览器才支持：after，原理与方法 2 有点类似，zoom(IE专有属性)可解决 ie6，ie7 浮动问题 ，推荐使用，建议定义公共类，以减少 CSS 代码。
4、父级 div 定义 overflow：hidden
超出盒子部分会被隐藏，不推荐使用.
5. 双伪元素法：盒子前后都加伪元素

.clearfix：before，.clearfix：after {
content:"";
display:block;
clear：both; }
.clearfix {zoom： 1;}

7. 要你写出一台使用不同分辨率，不同终端的前端实现方案你有什么思路？

答、流式布局：
使用百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充，可以适配移动端不同的分辨率设备，是移动 web 开发常用的布局方式。
响应式开发：
Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端。越来越多的设计师也采用了这种设计。
CSS3 中的 Media Query（媒介查询），通过查询 screen 的宽度来指定某个宽度区间的网页布局。
超小屏幕（移动设备） 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上
由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如 bootstrap 来完成一部分工作，也可以自己写响应式框架。

8. 移动WEB和响应式有什么分别？

在这里插入图片描述

9. px em rem 取用选择依据？

答、 1）px 像素（Pixel）：绝对长度单位
像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
2）em ：相对长度单位：
相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
3）rem 是 CSS3 新增的一个相对长度单位：
使用rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML根元素。
4）区别：
1、IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放。
2、rem 相对的只是 HTML 根元素，这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。

10.css权重如何计算？

答：页面显示样式的优先级取决于其“特殊性”’，特殊性越高，就显示最高的，当特殊性相等时，显示后者；
特殊性表述为 4 个部分：0,0,0,0，一个选择器的特殊性如下:
• 对于选择器是#id 的属性值,特殊性值为：0,1,0,0
• 对于属性选择器，class 或伪类，特殊性值为：0,0,1,0
• 对于标签选择器或伪元素，特殊性值为：0,0,0,1
• 通配符‘*’特殊性值为：0,0,0,0
• 内联样式特殊性值为：1,0,0,0

11、水平垂直居中的方式有几种？

答：1、absolute + transform：绝对定位加+转换

<style>  
parent { position:relative; } //父相子绝
child {  position:absolute; 
left： 50%;
top：50%
transform：translate(-50%, -50%); 
 }
</style>
<div class="parent">
<div class="child">Demo</div> 
</div>

2.inline-block + text-align + table-cell + vertical-align（单元格方式）

<style>
 .parent {
 text-align:center;
 display:table-cell;
 vertical-align：middle;
 }
 .child {
 display:inline-block;
 }
</style>
<div class="parent">
 <div class="child">Demo</div>
</div>

3.flex + justify-content + align-items（弹性模型）

<style>
 .parent {
 display:flex;
 justify-content:center; /* 水平居中 */
 align-items:center; /*垂直居中*/
 } 
 <style>
<div class="parent">
<div class="child">Demo</div>
</div>