CSS面试题总结，助（祝）2021成功拿到offer

深藏阁楼爱情的钟 2023-01-01 05:53 122阅读 0赞

> 今天是2020年的最后一天，希望2021年的我们会更好！

#### html、css基础 ####

**1，link和@import的区别？**

*  从属关系区别：  
    link属于html标签，而@import是css提供的。
 *  加载顺序区别：  
    页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。
 *  兼容性区别：  
    import只在IE5以上才能识别，而link是html标签，无兼容问题。
 *  dom可操作性区别：  
    可以通过JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式；
 *  权重区别：  
    如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link方式的样式权重高@import的权重这样的直观效果。  
    （aSuncat：简而言之，link和@import，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式。）

**2，calc, support, media各自的含义及用法？**  
@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。

calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “\*”, “/” 运算；

@media 查询，你可以针对不同的媒体类型定义不同的样式。

**3，如何理解标签语义，它有哪些好处？**  
1）语义元素清楚地向浏览器和开发者描述其意义。  
2）好处：  
（1）html结构清晰，代码可读性较好。  
（2）有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。  
（3）无障碍阅读，样式丢失的时候能让页面呈现清晰的结构。  
（4）方便其他设备解析，如盲人阅读器根据语义渲染网页  
（5）便于团队维护和开发，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

// 常用的语义化标签
    h1-h6 
    p
    ul
    ol
    dl
    thead
    tbody 
    
    // html5中新增的语义化标签
    header   section或page的页眉 
    nav   导航栏 
    footer   section或page的页脚 
    progress   进度条 
    video   视频

**4，css的选择符有哪些，优先级如何计算，哪些属性可以继承？**

1）css选择符类型

1、通用选择器：* 
    2、类别选择器：.class 
    3、id选择器：#id 
    4、标签选择器：p 
    5、后代选择器：div p 
    6、子选择器：div > p 
    7、群组选择器：div , p 
    8、相邻同胞选择器：div +p 
    9、伪类选择器：:link :visited :active :hover :focus :first-child 
    10、伪元素选择器：:first-letter :first-line:before :after :lang(language) 
    11、属性选择器：[attribute] [attribute=value] [attribute~=value] [attribute|=value]

2、优先级计算

!important > 内联样式 > id > class > tag

3、属性继承

（1）所有元素可继承：visibility、cursor  
（2）块级元素可继承： text-indent 、 text-align  
（3）内联元素可继承：  
①字体系列属性：font、 font-family 、 font-size 、font-style、font-variant、font-weight、font-stretch、font-size-adjust  
②除text-indent、text-align之外的文本系列属性：  
letter-spacing、word-spacing、 white-space 、 line-height 、 color 、text-transform、direction

扩展：  
**不可继承的样式属性：**

1、display
    2、文本属性：vertical-align、 text-decoration 、text-shadow、unicode-bidi
    3、盒子模型属性：border、padding、margin、width、height
    4、背景属性：background
    5、定位属性：float、clear、position
    6、生成内容属性：content
    7、轮廓样式属性：outlien-style
    8、页面样式属性：size
    9、声音样式属性：pause-before

**5，行内元素和块级元素举几个例子？**

行内元素：span,a,var ,em,input,img,img,textarea,em,strong,select,lable
    块级标签：div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr

**6，伪类和伪元素？**

伪类： :active :focus :hover :link :visited :first-child
    伪元素： :before :after :first-letter :first-line

**7，placeholder的实现？**  
3种方案：  
1）为input添加一个兄弟节点span，并为span设置绝对定位（父节点为position: relative;），使其位于input之上。

2）为添加一个属性phText=“手机号码/邮箱地址”。默认状态下，value值为提示文本并且颜色为灰色；  
获得焦点时，若value值等于phText属性值，则value值置空；失去焦点时，若value值为空，则value值为提示文本。

3）把placeholder值赋给并且颜色置为灰色，然后获得焦点时判断value值等于placeholder值的话，把光标移至最前面（this.createTextRange和this.setSelectionRange）。当发生输入操作时，先把value值置为空，然后再接收输入值。另外，对于 要为其新增一个 用来显示提示文本，当发生输入操作时，需要把 隐藏，然后把 显示出来并让其获得焦点。此方案也有一些小缺陷，那就是当用鼠标右键粘贴时会出现bug。

**8，写出ul、ol、dl三种列表的html结构？**

ul：unordered list, 无序列表

ol：ordered list, 有序列表

dl：definition list, 定义列表

<dl>
         <dt>计算机</dt> 
         <dd>用来计算的仪器...</dd> 
         <dt>显示器</dt>
         <dd>以视觉方式显示信息的装置...</dd> 
    </dl>

**9，svg和canvas的区别？**

1）canvas时h5提供的新的绘图方法 ；svg已经有了十多年的历史

2）canvas画图基于像素点，是位图，如果进行放大或缩小会失真 ；svg基于图形，用html标签描绘形状，放大缩小不会失真

3）canvas需要在js中绘制 ；svg在html绘制

4）canvas支持颜色比svg多 5、canvas无法对已经绘制的图像进行修改、操作 ；svg可以获取到标签进行操作

**10，flex实现原理？**  
1）容器上有主轴和纵轴的概念，默认主轴（main-axis）是横向，从左到右，纵轴是竖向，从上到下。

2）其中所有的孩子的布局都会受到这两个轴的影响。

3）有很多相关的css属性就是通过改变主轴和纵轴的方向来实现不同的布局效果的。

**11，src与href的区别？**  
1）href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超  
链接。  
2）src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

> 有需要的可以[点击这里][Link 1]免费领取面试题文档，包括**CSS面试题总结，JavaScript经典面试题，Vue面试题汇总等等**，都可以**免费领取**！！！

#### css盒模型 ####

1，css盒模型基本概念？  
2，标准模型和IE模型的区别：计算高度和宽度的不同，怎么不同，高度宽度是怎么计算的？  
3，css如何设置这两种模型？  
4，js如何设置获取盒模型对应的宽和高？  
5，实例题（根据盒模型解释边距重叠）  
6，\#sec的子元素是.child,说出下面的值？  
![3bdbf4acefc4fc6bae40d27592644cdd.png][]

#### BFC（边距重叠解决方案） ####

1，BFC的基本概念？  
2，BFC原理/ BFC渲染规则？  
3，如何创建BFC？  
4，BFC的使用场景？  
![fe0ae5464c02b7e78c6bb4a8218f9e07.png][]

#### css浮动 ####

1，css浮动原理？  
2，浮动元素引起的问题？  
3，css清除浮动的方法？

![663fceb392bae97918fd70d8bf3f88ca.png][]

#### css经典布局 ####

1，三栏布局：左右各300px,中间自适应？  
2，圣杯布局  
3，双飞翼布局  
4，css水平、垂直居中的写法，请至少写出4种？

![df0aee589426df70405ce38335867680.png][]

#### 自适应 ####

1，经常遇到的css兼容性的问题在哪些？如何解决的？

#### css兼容 ####

1，经常遇到的css兼容性的问题在哪些？如何解决的？  
![8aa8ddc921a447760c8a51973582202a.png][]

#### css hack ####

1，什么是CSS hack？  
2，CSS hack的原理？  
3，CSS hack分类？  
4，CSS hack书写顺序？

![fd738ff62397e6928f7779c0901199b1.png][]

> 结语：想要学习web前端或者正在学习前端的朋友，可以加入这边的学习裙：953352883，一起学习交流，还有前端学习资料，前端面试题PDF文档，免费领取!

[Link 1]: https://jq.qq.com/?_wv=1027&k=mnGd5q9j
[3bdbf4acefc4fc6bae40d27592644cdd.png]: /images/20221120/23c9205d39364f8f8bd6258853470701.png
[fe0ae5464c02b7e78c6bb4a8218f9e07.png]: /images/20221120/721407d6ff5444e7af251150f21ed64c.png
[663fceb392bae97918fd70d8bf3f88ca.png]: /images/20221120/845f155268434008a02d16a281f04573.png
[df0aee589426df70405ce38335867680.png]: /images/20221120/0d7a2a8cb98c423fabde6035873d5f63.png
[8aa8ddc921a447760c8a51973582202a.png]: /images/20221120/e9d54a5303ce4d27a76d2e0e5b3afd95.png
[fd738ff62397e6928f7779c0901199b1.png]: /images/20221120/d4de3cb05259499b88efa6c0ce3041c0.png