前端面试题-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 的属性，可以缩放⼤⼩