面试必备 css面试知识点

最新推荐文章于 2022-07-31 17:41:42 发布

那是我呐

最新推荐文章于 2022-07-31 17:41:42 发布

阅读量495

点赞数

分类专栏： CSS 文章标签： css 面试

本文链接：https://blog.csdn.net/weixin_42402867/article/details/106771556

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS 并不是面试重点考察的领域，但如果能在 CSS 领域有自己的见解和经验，会使自己更加脱颖而出。

1 、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

2 、box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box

context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

3 、CSS选择器有哪些？哪些属性可以继承？

CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

4 、CSS优先级算法如何计算？

元素选择符：1
class选择符：10
id选择符：100
元素标签：1000

!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

5 、CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

6 、居中布局

水平居中
1. 行内元素: text-align:center
2. 块级元素: margin:0 auto
3. 绝对定位和移动: absolute + transform
4. 绝对定位和负边距: absolute + margin
5. flex布局: flex + justify-content:center
垂直居中
1. 子元素为单行文本: line-height:height
2. absolute + transform
3. flex + align-items:center
4. table: display:table-cell; vertical-align: middle
5. 利用position和top和负margin
水平垂直居中

（1）已知元素宽高:绝对定位+margin:auto:

.div {
  width: 200px;
  height: 200px;
  background: green;
  position:absolute;
  left:0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

（2） 已知元素宽高:  绝对定位+负margin

.div{
  width: 200px;
  height: 200px;
  background: green;
  position:absolute;
  left:0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

（3）absolute+transform

.div{
 width: 200px;
 height: 200px;
 background: green;
 position:absolute;
 left:50%;    /* 定位父级的50% */
 top:50%;
 transform: translate(-50%,-50%); /*自己的50% */
}

（4）flex + justify-content + align-items

.box{
   height:600px;
   display:flex;
   justify-content:center;  //子元素水平居中
   align-items:center;      //子元素垂直居中
     /* aa只要三句话就可以实现不定宽高水平垂直居中。*/
}

.box>div{
  background: green;
  width: 200px;
  height: 200px;
}

7、display有哪些值？说明他们的作用?

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block

8 、position的值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

9 、CSS3有哪些新特性？

RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不可分割单词换行）word-wrap：break-word
文字阴影：text-shadow：5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

10、请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

11、用纯CSS创建一个三角形的原理是什么？

（1）写一个我们最熟悉的 border应用

.box{
  width:100px;
  height:100px;
  border: 3px solid;
  border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

效果如下

（2）接下来,我们将border值增大

.box{
  width:100px;
  height:100px;
  border: 50px solid;
  border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

很容易发现, border渲染并不是正方形, 而是梯形的.

（3）在增大border的基础下, 此时我们将盒子宽高变成0,会产生什么效果呢!

.box{
  width:0px;
  height:0px;
  border: 50px solid;
  border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见;

（4）设置透明, 隐藏其中三个三角形

 .box{
  width:0px;
  height:0px;
  border: 50px solid;
  border-color:transparent transparent transparent #ef4848;
}

三角形这样就出来, 有木有很简单, 当然我们也可以采用逆向思维来写这个效果, 就是先将所有边框设为透明, 然后需要哪边再对其设置颜色, 效果是一样的

.box{
  width:0px;
  height:0px;
  border: 50px solid transparent;
  border-left:50px solid #ef4848;
}

这样给面试你的人讲,讲明白应该不是问题., 重点就是要理解border的应用

12、一个满屏品字布局如何设计?

第一种真正的品字：

三块高宽是确定的；
上面那块用margin: 0 auto;居中；
下面两块用float或者inline-block不换行；
用margin调整位置使他们居中。

第二种全屏的品字布局:

上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。

13、常见的兼容性问题？

不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
```
background-color:#f1ee18;/*所有识别*/

.background-color:#00deff\9; /*IE6、7、8识别*/

+background-color:#a200ff;/*IE6、7识别*/

_background-color:#1e0bd1;/*IE6识别*/
```
设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14、link 与 @import 的区别

link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css
当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载
@import需要 IE5 以上才能使用
link可以使用 js 动态引入，@import不行

15、CSS动画

transition: 过渡动画

transition-property: 属性
transition-duration: 间隔
transition-timing-function: 曲线
transition-delay: 延迟
常用钩子: transitionend

animation / keyframes

forwards: 停止时，保留最后一帧
backwards: 停止时，回到第一帧
both: 同时运用 forwards / backwards
alternate: 反向播放
infinite: 循环动画
animation-name: 动画名称，对应@keyframes
animation-duration: 间隔
animation-timing-function: 曲线
animation-delay: 延迟
animation-iteration-count: 次数
animation-direction: 方向
animation-fill-mode: 静止模式
常用钩子: animationend

动画属性: 尽量使用动画属性进行动画，能拥有较好的性能表现

translate
scale
rotate
skew
opacity
color

16.、实现三栏布局有哪些方法, 分别描述一下

三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示：

下面列出四种实现方式, 在开发中可以根据实际需求选择适合自己的方法进行编码:

Flex 布局

<style>
.container{
  display:flex;
  justify-content: center;
  height: 200px;
  background: #eee;
}
.left {
   width: 200px;
   background-color: red;
   height: 100%;
 }
.main {
    background-color: yellow;
    flex: 1;
}
.right {
    width: 200px;
    background-color: green;
}
</style>
<div class="container">
  <div class="left">1</div>
  <div class="main">2</div>
  <div class="right">3</div>
</div>

简单实用，现在比较流行的方案，但是需要考虑浏览器的兼容性。

绝对定位布局

<style>
.container {
  position: relative;
  background:#eee;
  height:200px;
  }
.main {
  height: 200px;
  margin: 0 120px;
  background-color: yellow;
  }
.left {
  position: absolute;
  width: 100px;
  height: 200px;
  left: 0;
  top: 0;
  background-color: red;
  }
.right {
  position: absolute;
  width: 100px;
  height: 200px;
  background-color: green;
  right: 0;
  top: 0;
}
</style>

<div class="container">
  <div class="left">1</div>
  <div class="main">2</div>
  <div class="right">3</div>
</div>

这种方案也简单实用, 并且可以将 <div class="main"></div>元素放到第一位,使得主要内容优先加载!

17.、CSS优化、提高性能的方法有哪些

尽量将样式写在单独的css文件里面，在head元素中引用将代码写成单独的css文件有几点好处：
1. 内容和样式分离，易于管理和维护
2. 减少页面体积
3. css文件可以被缓存、重用，维护成本降低
不使用@import
避免使用复杂的选择器，层级越少越好建议选择器的嵌套最好不要超过三层，比如：精简页面的样式文件，去掉不用的样式，利用CSS继承减少代码量，避免！important，可以选择其他选择器

那是我呐

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
面试必备 css面试知识点

CSS 并不是面试重点考察的领域，但如果能在 CSS 领域有自己的见解和经验，会使自己更加脱颖而出。1 、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin2 、box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-boxcontext-b..
复制链接

扫一扫