31 css样式(选择器)的优先级
- 计算权重确定
- !important
- 内联样式
- 后写的优先级⾼
32 ⾃定义字体的使⽤场景
- 宣传/品牌/ banner 等固定⽂案
- 字体图标
33 如何美化CheckBox
- 隐藏原⽣的
- :checked +
34 伪类和伪元素的区别
- 伪类表状态
- 伪元素是真的有元素
- 前者单冒号,后者双冒号
35 base64 的使⽤
- ⽤于减少 HTTP 请求
- 适⽤于⼩图⽚
- base64 的体积约为原图的 4/3
36 ⾃适应布局
思路:文章来源:https://www.toymoban.com/news/detail-563767.html
- 左侧浮动或者绝对定位,然后右侧 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 /**<img>的容器设置如下**/
{
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 为⾃适应宽度文章来源地址https://www.toymoban.com/news/detail-563767.html
<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 的属性,可以缩放⼤⼩
到了这里,关于前端面试题-CSS(六)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!