CSS前端面试题整合

!! 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，单选框或复选框被选中。

!! CSS中link和@import的区别是：

• Link属于html标签
• @import是CSS中提供的

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

!! BFC是什么?

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

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

!! 清除浮动方法

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

!! 为什么要清除浮动

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

• 父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素（内联元素）会跟随其后若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

!! 水平垂直居中方法

/* 公共代码 */
<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; /* 修正文字 */
}

!! 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中类（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

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。

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等

请简要描述margin重合问题，及解决方式

1. 同向margin的重叠：

• 1图片的margin-top与3图片的margin-top发生重叠，
• 2图片的margin-bottom与3图片的margin-bottom发生重叠。这时候重叠之后的margin值由发生重叠两片的最大值决定；如果其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。

解决同向重叠的方法：
（1）在最外层的div中加入overflow:hidden;zoom:1
（2）在最外层加入padding:1px;属性
（3）在最外层加入：border:1px solid #cacbcc;

2. 异向重叠问题：
   1图片的margin-bottom与2图片的margin-top发生重叠，这时候重叠之后的margin值由发生重叠两图片的最大值的决定的。
   解决异向重叠问题：
   float:left（只能解决IE6浏览器中的异向重叠问题，可以解决IE8以上、chorme、firefox、opera下的同向重叠问题）

!! 如何水平居中一个浮动元素？

#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>