前端面试题-CSS（六）

31 css样式（选择器）的优先级

• 计算权重确定
• !important
• 内联样式
• 后写的优先级⾼

32 ⾃定义字体的使⽤场景

• 宣传/品牌/ banner 等固定⽂案
• 字体图标

33 如何美化CheckBox

• 属性 for 和 id
• 隐藏原⽣的
• :checked +

34 伪类和伪元素的区别

• 伪类表状态
• 伪元素是真的有元素
• 前者单冒号，后者双冒号

35 base64 的使⽤

• ⽤于减少 HTTP 请求
• 适⽤于⼩图⽚
• base64 的体积约为原图的 4/3

36 ⾃适应布局

思路：

• 左侧浮动或者绝对定位，然后右侧 margin 撑开
• 使⽤
  包含，然后靠负 margin 形成 bfc
• 使⽤ flex

37 请⽤CSS写⼀个简单的幻灯⽚效果⻚⾯

• 知道是要⽤ CSS3 。使⽤ animation 动画实现⼀个简单的幻灯⽚效果

/**css**/
.ani{
width:480px;
height:320px;
margin:50px auto;
overflow: hidden;
box-shadow:0 0 5px rgba(0,0,0,1);
background-size: cover;
background-position: center;
-webkit-animation-name: "loops";
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
0% {
background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6
}
25% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1
}
50% {
background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937da
}
75% {
background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d375
}
100% {
background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb23
}
}

38 什么是外边距重叠？重叠的结果是什么？

• 外边距重叠就是margin-collapse
• 在CSS当中，相邻的两个盒⼦（可能是兄弟关系也可能是祖先关系）的外边距可以结合成⼀个单独的外边距。这种合并外边距的⽅式被称为折叠，并且因⽽所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较⼤的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较⼤值。
• 两个外边距⼀正⼀负时，折叠结果是两者的相加的和。

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

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

40 css中可以让⽂字在垂直和⽔平⽅向上重叠的两个属性是什么？

• 垂直⽅向： line-height
• ⽔平⽅向： letter-spacing

41 如何垂直居中⼀个浮动元素？

/**⽅法⼀：已知元素的⾼宽**/
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //⽗元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //⼆分之⼀的height，width
margin-left: -100px;
}
/**⽅法⼆:**/
#div1{
width: 200px;
height: 200px;
background-color: #6699FF;
margin:auto;
position: absolute; //⽗元素需要相对定位
left: 0;
top: 0;
right: 0;
bottom: 0;
}

如何垂直居中⼀个 ?（⽤更简便的⽅法。）

#container /**的容器设置如下**/
{
display:table-cell;
text-align:center;
vertical-align:middle;
}
css

42 px和em的区别

• px 和 em 都是⻓度单位，区别是， px 的值是固定的，指定是多少就是多少，计算⽐较容易。 em 得值不是固定的，并且 em 会继承⽗级元素的字体⼤⼩。
• 浏览器的默认字体⾼都是 16px 。所以未经调整的浏览器都符合: 1em=16px 。那么12px=0.75em , 10px=0.625em 。

43 Sass、LESS是什么？⼤家为什么要使⽤他们？

• 他们是 CSS 预处理器。他是 CSS 上的⼀种抽象层。他们是⼀种特殊的语法/语⾔编译成
  CSS 。
• 例如Less是⼀种动态样式语⾔. 将CSS赋予了动态语⾔的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运⾏ (⽀持 IE 6+ , Webkit , Firefox )，也可⼀在服务端运⾏ (借助 Node.js )
• 为什么要使⽤它们？
• 结构清晰，便于扩展。
• 可以⽅便地屏蔽浏览器私有语法差异。这个不⽤多说，封装对- 浏览器语法差异的重复处理，减少⽆意义的机械劳动。
• 可以轻松实现多重继承。
• 完全兼容 CSS 代码，可以⽅便地应⽤到⽼项⽬中。LESS 只- 是在 CSS 语法上做了扩展，所以⽼的 CSS 代码也可以与 LESS 代码⼀同编译

44 知道css有个content属性吗？有什么作⽤？有什么应⽤？

css的 content 属性专⻔应⽤在 before/after 伪元素上，⽤于来插⼊⽣成内容。最常⻅的应⽤是利⽤伪类清除浮动。

/**⼀种常⻅利⽤伪类清除浮动的代码**/
.clearfix:after {
content:"."; //这⾥利⽤到了content属性
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1;
}

45 ⽔平居中的⽅法

• 元素为⾏内元素，设置⽗元素 text-align:center
• 如果元素宽度固定，可以设置左右 margin 为 auto ;
• 如果元素为绝对定位，设置⽗元素 position 为 relative ，元素设left:0;right:0;margin:auto;
• 使⽤ flex-box 布局，指定 justify-content 属性为center
• display 设置为 tabel-ceil

46 垂直居中的⽅法

• 将显示⽅式设置为表格， display:table-cell ,同时设置 vertial-align：middle
• 使⽤ flex 布局，设置为 align-item：center
• 绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto
• 绝对定位中固定⾼度时设置 top:50%，margin-top 值为⾼度⼀半的负值
• ⽂本垂直居中设置 line-height 为 height 值

47 如何使⽤CSS实现硬件加速？

硬件加速是指通过创建独⽴的复合图层，让GPU来渲染这个图层，从⽽提⾼性能，

• ⼀般触发硬件加速的 CSS 属性有 transform 、 opacity 、 filter ，为了避免2D动画
  在 开始和结束的时候的 repaint 操作，⼀般使⽤ tranform:translateZ(0)

48 重绘和回流（重排）是什么，如何避免？

• DOM的变化影响到了元素的⼏何属性（宽⾼）,浏览器重新计算元素的⼏何属性，其他元素的⼏何
• 属性和位置也会受到影响，浏览器需要重新构造渲染树，这个过程称为重排，浏览器将受到影响的部分
• 重新绘制到屏幕上的过程称为重绘。引起重排的原因有
• 添加或者删除可⻅的DOM元素，
• 元素位置、尺⼨、内容改变，
• 浏览器⻚⾯初始化，
• 浏览器窗⼝尺⼨改变，重排⼀定重绘，重绘不⼀定重排，

减少重绘和重排的⽅法：

• 不在布局信息改变时做 DOM 查询
• 使⽤ cssText 或者 className ⼀次性改变属性
• 使⽤ fragment
• 对于多次重排的元素，如动画，使⽤绝对定位脱离⽂档流，让他的改变不影响到其他元素

49 说⼀说css3的animation

• css3的 animation 是css3新增的动画属性，这个css3动画的每⼀帧是通过 @keyframes来声明的， keyframes 声明了动画的名称，通过 from 、 to 或者是百分⽐来定义
• 每⼀帧动画元素的状态，通过 animation-name 来引⽤这个动画，同时css3动画也可以定义动画运⾏的时⻓、动画开始时间、动画播放⽅向、动画循环次数、动画播放的⽅式，这些相关的动画⼦属性有： animation-name 定义动画名、 animation-duration 定义动画播放的时⻓、 animation-delay 定义动画延迟播放的时间、 animation-direction 定义 动画的播放⽅向、 animation-iteration-count 定义播放次数、animation-fill-mode 定义动画播放之后的状态、 animation-play-state 定义播放状态，如暂停运⾏等、 animation-timing-function定义播放的⽅式，如恒速播放、艰涩播放等。

50 左边宽度固定，右边⾃适应

左侧固定宽度，右侧⾃适应宽度的两列布局实现

html结构
在外层 div （类名为 outer ）的 div 中，有两个⼦ div ，类名分别为
left 和 right ，其中 left 为固定宽度，⽽ right 为⾃适应宽度

<div class="outer">
<div class="left">固定宽度</div>
<div class="right">⾃适应宽度</div>
</div>

⽅法1：左侧div设置成浮动：float: left，右侧div宽度会⾃拉升适应

.outer {
width: 100%;
height: 500px;
background-color: yellow;
}
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.right {
height: 200px;
background-color: blue;
}

⽅法2：对右侧:div进⾏绝对定位，然后再设置right=0，即可以实现宽度⾃适应

绝对定位元素的第⼀个⾼级特性就是其具有⾃动伸缩的功能，当我们将  width 设置为 auto 的时候（或者不设置，默认为 auto ），
绝对定位元素会根据其 left 和 right ⾃动伸缩其⼤⼩

.outer {
width: 100%;
height: 500px;
background-color: yellow;
position: relative;
}
.left {
width: 200px;
height: 200px;
background-color: red;
}
.right {
height: 200px;
background-color: blue;
position: absolute;
left: 200px;
top:0;
right: 0;
}

⽅法3：将左侧div进⾏绝对定位，然后右侧div设置margin-left: 200px

.outer {
width: 100%;
height: 500px;
background-color: yellow;
position: relative;
}
.left {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
.right {
height: 200px;
background-color: blue;
margin-left: 200px;
}

⽅法4：使⽤flex布局

.outer {
width: 100%;
height: 500px;
background-color: yellow;
display: flex;
flex-direction: row;
}
.left {
width: 200px;
height: 200px;
background-color: red;
}
.right {
height: 200px;
background-color: blue;
flex: 1;
}
css

51 两种以上⽅式实现已知或者未知宽度的垂直⽔平居中

/** 1 **/
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
}
/** 2 **/
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/** 3 **/
.wraper {
.box {
display: flex;
justify-content:center;
align-items: center;
height: 100px;
}
}
/** 4 **/
.wraper {
display: table;
.box {
display: table-cell;
vertical-align: middle;
}
}
css

52 如何实现⼩于12px的字体效果

transform:scale() 这个属性只可以缩放可以定义宽⾼的元素，⽽⾏内元素是没有宽⾼的，
我们可以加上⼀个 display:inline-block ;
transform: scale(0.7);
css 的属性，可以缩放⼤⼩