目录
2,visibility、display、opacity的区别?
6,transition、transform、translate的区别?
1,css和js两种方式实现div右移1000px动画?
答案:
css方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
#box{
width: 100px;
height: 100px;
background-color: brown;
position: relative;
animation: mytest 3s linear 1s;
-webkit-animation: mytest 3s linear 1s;
}
@keyframes mytest {
1%{left: 0px;}
20%{left: 200px;}
50%{left: 500px;}
70%{left: 700px;}
100%{left: 1000px;}
}
@-webkit-keyframes mytest {
1%{left: 0px;}
20%{left: 200px;}
50%{left: 500px;}
70%{left: 700px;}
100%{left: 1000px;}
}
</style>
<body>
<div id="box"></div>
</body>
</html>
js原生方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
#box{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
<body>
<div id="box"></div>
</body>
</html>
<script>
var oBox = document.getElementById("box")
oBox.onclick = function(){
moveDiv(1000)
}
function moveDiv(data){
clearInterval(mytimer)
var mytimer = setInterval(function(){
let speed = 10;
if(oBox.offsetLeft != data){
oBox.style.left = oBox.offsetLeft + speed + 'px'
}else{
clearInterval(mytimer)
}
},50)
}
</script>
2,visibility、display、opacity的区别?
答案:
visibility:hidden;是控制元素的样式的显示隐藏,它不会消除dom元素,元素依旧存在;
display:none;是控制元素的display属性,让dom元素被清除,元素不存在了;
opacit:0;是控制元素的透明度的样式,0的时候是透明度100%,元素依旧存在。
3,单行截断css?
答案:
.box{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
4,flex布局?
答案:弹性布局。
5,flex:1?
答案:flex是flex-grow、flex-shrink、flex-basis三个属性的缩写。flex:1;表示flex-grow:1;
表示元素将自动放大填充父元素;
6,transition、transform、translate的区别?
答案:
transform是css3的一个属性,控制元素的变换;
translate是transform的一个属性值,表示进行2D变换;transform:translte(X,Y);X,Y是控制元素变换的值的大小。
transition 在一定时间之内,一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果,css3的属性。语法 transition:需要变换的属性 变换需要的时间 控制动画速度变化 延期多少时间后开始执行。
7,如何画一条0.5px的边框?
答案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
#box1{
width: 300px;
height: 300px;
border: 1px solid #000;
}
#box2{
width: 300px;
height: 300px;
position: relative;
}
#box2::after{
content: " ";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
z-index: -1;
border: 1px solid #000;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
</style>
</head>
<body>
<p>边框为1px</p>
<div id="box1"></div>
<p>边框为0.5px</p>
<div id="box2"></div>
</body>
</html>
8,说一下BFC?
答案: bfc,即块级格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。具有bfc的元素可以看做是隔离了的独立容器,容器里的元素不会布局上影响容器外的元素。
形成条件:浮动元素,除了float:none以外都可以;
绝对定位元素,position:absolute;position:fixed;
display为inline-block、table-cells、flex;
overflow除visible以外的值:hidden、auto、scroll;
常见作用:阻止外边距折叠;
包含浮动元素后解决浮动脱离文本流的问题;
阻止浮动元素覆盖
9,CSS垂直居中的方案?
答案:
使用绝对定位和transform
<style>
*{
padding: 0;
margin: 0;
}
#father{
width: 500px;
height: 500px;
background-color: darkseagreen;
margin: 0 auto;
position: relative;
}
#child{
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
</body>
绝对定位结合margin:auto;
<style>
*{
padding: 0;
margin: 0;
}
/* 绝对定位结合margin; */
#father{
width: 500px;
height: 500px;
background-color: darkseagreen;
margin: 0 auto;
position: relative;
}
#child{
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
</body>
flex布局
<style>
*{
padding: 0;
margin: 0;
}
/* flex布局 */
#father{
width: 500px;
height: 500px;
background-color: darkseagreen;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
#child{
width: 100px;
height: 100px;
background-color: black;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
</body>
10,伪元素和伪类的区别?
答案:
从根本上来说:伪元素创建了新元素,伪类没有创建新元素;
从表现上来说:伪元素是(E::before/after等等),伪类是(E:hover/focus等等);
从使用上来说:一个选择器只能使用一个伪元素,可以使用多个伪类;
11,position的几个属性和含义?
答案:
static:默认值,表示没有定位;
relative:相对定位,表示元素根据自己正常位置进行定位;
absolute:绝对定位,表示元素根据父级元素中第一个具有定位属性的元素进行定位;
fixed:固定定位,表示元素根据浏览器窗口进行定位;
12,说一下盒模型?
答案:所有的HTML元素都可以看做一个盒子。盒模型由四部分构成,由内到外分别是,content,padding,border,margin;盒模型有两种。一个是标准盒模型,另一种是IE盒模型(也叫怪异盒模型),它俩的区别是width指的数据含义,标准指content宽度,怪异指content+padding+border的宽度。
13,响应式布局方案?
答案:响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。
方案:1,媒体查询;2,百分比布局;3,rem布局;4,视口单位(vw/vh);5,依赖bootstrap框架的栅格系统;
14,响应式布局和自适应布局的区别?
答案:响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;自适应需要开发多套界面,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机,从而请求服务层,返回不同的页面。
15, 如何提高动画的渲染性能?
答案:transform:translateZ(0);或者will-change:transform;
16,css性能优化的方案,至少说出五个?
答案:1,图片异步加载;2,尽量使用雪碧图; 3,正确使用选择器;4,js和css文件压缩;
5,背景图采用分割后逐步加载显示;6,图片优先使用png格式;
17,css选择器有多少种?他们的优先级如何?
答案: ID选择器,class选择器,元素选择器,后代选择器,子选择器,伪类选择器,通配符,群组选择器,属性选择器等;
优先级:ID > class > 元素 > 通配符
18, 如何清除浮动的影响?
答案:
1,使用::after伪元素
E::after{
content:" ";
clear:both;
display:block;
}
2,在浮动元素后添加一个空元素,添加clear:both;
3,给父元素添加明确的宽高;
4,给父元素添加overflow:hidden;
19,为什么要初始化css样式?
答案:因为每种浏览器的兼容性不同,对于HTML标签的默认展示不同,初始css是排除差异的影响;