css面试题
1、元素定位有哪些?
position是在css中用的比较多的定位方法,其中定位方式包括4种,分别是:fixed、absolute、relative、static。
2、css样式导入的方式以及区别?
- link
-
import
使用方式:
<link href="index.css" rel="stylesheet">
//import
<style type="text/css">
@import "index.css";
</style>
区别:
- link除了能引用样式外,还可以引用图片等资源文件,import只可以引用样式文件
- 兼容性:link不存在兼容性问题,import在IE5以上支持
- 在样式表文件中,import可以引用其他样式表,而link不行
- link是与页面载入时同时加载,@import是在页面加载完后进行加载
- link支持js去控制样式更改,@import不支持
推荐使用 @import url(imdex.css)
3、css样式的优先级?
优先级:!important > style > id > class > 标签
权重规则:
- 标签的权重为1
- class的权重为10
- id的权重为100
权重举例:
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
4、css3的新特性?
1.CSS3的选择器
1)E:last-child 匹配父元素的最后一个子元素E。
2)E:nth-child(n)匹配父元素的第n个子元素E。
3)E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
4)E:last-of-type 匹配父元素的最后一个元素E。
5)E:nth-of-type(n)匹配父元素的第n个子元素E。
6)E:nth-last-of-type(n) CSS3 匹配父元素的倒数第n个子元素E。
2.@Font-face 特性
Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。
@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot);
}
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
3.圆角
border-radius: 15px
4.阴影
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
5.渐变
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
这里 linear 表示线性渐变,从左到右,由蓝色(#2A8BBE)到红色(#FE280E)的渐变。效果图如下:
6.盒子模型
dispaly:flex
6.过渡
-
Transition 对象变换时的过渡效果
transition-property 对象参与过渡的属性
transition-duration 过渡的持续时间
transition-timing-function 过渡的类型
transition-delay 延迟过渡的时间
缩写方式
transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s
拆分方式
transition-property:border-color, background-color, color;
transition-duration:.5s, .5s, .5s;
transition-timing-function:ease-in, ease-in, ease-in;
transition-delay:.1s, .1s, .1s;
示例:
<style type="text/css">
.main{
position: relative;
margin: 0 auto;
height:45px;
width: 300px;
background-color:lightgray;
transition:background-color .6s ease-in 0s;
}
.main:hover{
background-color: dimgray;
}
</style>
<div class="main"></div>
7.2D转换效果
主要有:
- translate(水平移动)
- rotate(旋转)
- scale(伸缩)
- skew(倾斜)
<style type="text/css">
.main{
position: relative;
top:200px;
margin: 0 auto;
height:45px;
width: 300px;
background-color:dimgray;
transition:transform .6s ease 0s;
transform: rotate(0deg);
}
.main:hover{
transform: rotate(180deg);
}
</style>
<div class="main"></div>
8.Animation动画特效
<style type="text/css">
.main{
position: absolute;
left: 10px;
top:200px;
height:45px;
width: 300px;
background-color:cadetblue;
}
.main:hover{
animation: animations 2s ease 0s;
}
@keyframes animations {
0%{
left: 10px;
opacity: 1;
}
50%,70%{
left: 50%;
opacity: .7;
margin-left:-150px;
}
100%{
left: 100%;
opacity: 0;
margin-left:-300px;
}
}
</style>
<div class="main"></div>