欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS前端面试题整合

程序员文章站 2022-06-09 18:02:51
...
CSS3新特性
  • 支持rgba和透明度
  • 支持媒体查询
  • 支持自定义字体 对长的不可分割单词换行word-wrap：break-word;
  • 文字阴影text-shadow: 5px 5px 5px #ff0000;
  • 盒阴影box-shadow: 10px 10px 5px #888888
  • 支持圆角border-radius: 50%;
  • 边框图片border-image: url(border.png) 30 30 round
  • 新增伪类
  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> 元素。
    :enabled、:disabled 控制表单控件的禁用状态。
    :checked，单选框或复选框被选中。
水平垂直居中方法
/* 公共代码 */
<div class="wp">
    <div class="box size">123123</div>
</div>
/* 公共代码 */
.wp {border: 1px solid red;width: 300px;height: 300px;}
.box {background: green;}
.size{width: 100px;height: 100px;}

1）flex方法

<div class="wp">
    <div class="box">123123</div>
</div>
.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

2）absolute + 负margin

.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

5）absolute + margin auto

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

）absolute + calc
要求居中元素的宽高必须固定，css3带来了计算属性，既然top的百分比是基于元素的左上角，那么在减去宽度的一半就好了。

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

2）absolute + transform

<div class="wp">
    <div class="box">123123</div>
</div>
/* 绝对定位，但这个方法不需要子元素固定宽高，所以不再需要size类了 */
.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2）grid

<div class="wp">
    <div class="box">123123</div>
</div>
.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}
复制代码代码量也很少，但兼容性不如flex，不推荐使用

3）css-table

<div class="wp">
    <div class="box">123123</div>
</div>
下面通过css属性，可以让div显示的和table一样
.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}
复制代码这种方法和table一样的原理，但却没有那么多冗余代码，兼容性也还不错

4）

lineheight
利用行内元素居中属性也可以做到水平垂直居中

<div class="wp">
    <div class="box">123123</div>
</div>
/* 定位代码 */
.wp {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.box {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}
CSS中类（classes）和ID的区别
  1. 语法不同，#idname, .classname 。
  2. 影响元素不同，#idname作用单个元素，.classname作用所有元素。
  3. 选择器权重不同，#idname权值高于.classname。

优先级为:
!important > id > class > tag
important 比 内联优先级高

请解释*{ box-sizing: border-box }的作用，并且说明使用它有什么好处？

box-sizing的值有2种，一个是content-box，一个是border-box，
content-box仅仅包含content。
border-box的width会将content, padding和border包含在内，例如width:100%指的是包含了content，padding和border的宽度，布局时更好控制。

请问在确定样式的过程中优先级是如何决定的(请举例)？如何使用此系统？。

优先级由高到低
!important 不建议的实践
行内样式
ID选择器 #foo
类选择器.foo，属性选择器[type=“radio”]，伪类:hover
类型选择器p,span，伪元素::before

请问为何要使用translate()而非absolute position，或反之的理由？为什么？

translate()涉及到的是合成器线程，与主线程是相互独立的，所以会比较快。
而absolute positioning涉及到的是主线程，会导致主线程负责的布局重绘和js执行，所以会比较慢。使用CSS3动画代替JS动画的
好处是：

  1. 不占用JS主线程；
  2. 可以利用硬件加速；
  3. 浏览器可对动画做优化（元素不可见时不动画，减少对FPS的影响）。

坏处是：
　　浏览器对渲染的批量异步化处理让动画难以控制，此时可以用
cookie、session、sessionStorage、localStorage 之间的区别及应用场景
cookie 存储量小、安全性差、数据操作接口不友好，而 webStorage 存储量较大、安全性较高、数据接口友好。
若要持久的存储方式，推荐使用 localStorage
若要一次性会话的存储，推荐使用 sessionStorage

CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

最基本的：

  • 设置display属性为none，
  • 设置visibility属性为hidden

技巧性：

  • 设置宽高为0，
  • 设置透明度为0，
  • 设置z-index位置在-1000
什么是Css Hack？ie6,7,8的hack分别是什么？

针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

请用Css写一个简单的幻灯片效果页面

知道是要用css3。使用animation动画实现一个简单的幻灯片效果。

rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height
水平方向：letter-spacing
那么问题来了，关于letter-spacing的妙用知道有哪些么？
答案:可以用于消除inline-block元素间的换行符空格间隙问题。

px和em的区别。

px和em都是长度单位。

区别：

  • px的值是固定的，指定是多少就是多少，计算比较容易。
  • em得值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

Sass、LESS是什么？大家为什么要使用他们？

是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
为什么要使用它们？

  1. 结构清晰，便于扩展。
  2. 可以轻松实现多重继承。
  3. 完全兼容 CSS 代码，可以方便地应用到老项目中。
display:none与visibility:hidden的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。（回流+重绘）
visibility: 隐藏对应的元素并且挤占该元素原来的空间。（重绘）
即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

CSS中link和@import的区别是：
  • Link属于html标签
  • @import是CSS中提供的

在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS；
@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题
Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

为什么要初始化样式？

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异，但是初始化CSS会对搜索引擎优化造成小影响。

BFC是什么?

BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题
BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用。那些元素会生成BFC：

  • 根元素
  • float不为none的元素
  • position为fixed和absolute的元素
  • display为inline-block、table-cell、table-caption，flex，inline-flex的元素
  • overflow不为visible的元素
transition和animation的区别

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值。
主要区别：

  • transition需要触发一个事件才能改变属性
  • animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from …
    to，而animation可以一帧一帧的。
CSS 有哪些样式可以给子元素继承!

可继承的:font-size,font-weight,line-height,color,cursor等
不可继承的一般是会改变盒子模型的:display,margin、border、padding、height等

清除浮动方法
  1. 添加空div，使用clear: both; 缺点：进行清除浮动；会添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦；
  2. 父元素使用overflow: hidden; 缺点：不能配合position一起使用，超出的部分会被隐藏；
  3. 父元素使用overflow:auto;缺点：超出部分会出现滚动条；
  4. 父级定义高度
  5. 推荐使用的方法：父级div定义伪类:after和zoom
为什么要清除浮动

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：

  • 父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素（内联元素）会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
如何水平居中一个浮动元素？
#test {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  <!-- 三行代码缺一不可 -->
  margin: 0 auto;
  left: 0;
  right: 0;
}
利用CSS画三角形
#triangle {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid greenyellow;
  }
  <div id="triangle"><div>
相关标签： css3 前端 面试

上一篇： 前端面试题之CSS

下一篇： Openwrt ubox应用例子: 实现C/S网络通信

推荐阅读