css常见面试题

Ccccccc
172 阅读7分钟

css和js两种方式实现div右移1000px动画

  1. css实现可以使用@kayframes+animaiton
html中
<div id="ddd">hello world</div>
css中
#ddd{
  background-color: red;
  height: 100px;
  width: 100px;
  position: relative;
  animation: test 3s linear 1s; 
  -webkit-animation: test 3s linear 1s; /* Safari 和 Chrome */
};

@keyframes test{
  1%{
    left: 0px;
  };
  20%{
    left:200px;
  }
  40%{
    left: 400px;
  }
  60%{
    left: 600px;
  }
  80%{
    left: 800px;
  }
  100%{
    left: 1000px;
  }
}
@-webkit-keyframes test{
  1%{
    left: 0px;
  };
  20%{
    left:200px;
  }
  40%{
    left: 400px;
  }
  60%{
    left: 600px;
  }
  80%{
    left: 800px;
  }
  100%{
    left: 1000px;
  }
}
  1. 使用transition
html中
<div id="ddd" onClick={this.move}>hello world</div>
css中
#ddd{
  background-color: red;
  height: 100px;
  width: 100px;
  position: absolute;
  left: 0px;
  transition: left 1s
};
js中
function move(){
  let dom = document.getElementById("ddd") 
  dom.style.left = 1000 + 'px'
}
  1. js实现可以用定时器，在规定时间内执行，达到1000px就停止不再执行。
html中
<div id="ddd" onClick={()=>{
this.move(1000)
}}>hello world</div>
js中
function move(data){
  //获取到需要移动的元素
  let dom = document.getElementById("ddd") 
  dom.style.position = 'absolute'
  let speed = 10
  let timer = setInterval(()=>{
    if(dom.offsetLeft !== data){
      dom.style.left = dom.offsetLeft + speed + 'px'
    }else{
      //进入这里说明已经移动了足够的距离，停止移动，清除定时器
      clearInterval(timer)
    }
  },50) //可以在这个地方控制时间
}
  1. requestAnimationFrame
html中
<div id="ddd" onClick={()=>{
this.move(1000)
}}>hello world</div>
js中
function move(data){
  //获取到需要移动的元素
  let dom = document.getElementById("ddd") 
  dom.style.position = 'absolute'
  let speed = 10
  let timer = requestAnimationFrame(function fn(){
  if(dom.offsetLeft !== data){
    dom.style.left = dom.offsetLeft + speed + 'px'
    timer = requestAnimationFrame(fn)
  }else{
    cancelAnimationFrame(timer)
  }
  })
}
  1. 这道题会紧接着问到定时器是否准时（宏任务，微任务）

visibility、display、opacity的区别

  1. visibility：hidden。是控制显示隐藏，即使是隐藏状态，节点还是存在的状态。
  2. display:none. 当为none的状态的时候，dom元素被清除，不存在了。
  3. opacity:0. 为0的时候，只是透明度是0，节点依旧存在。

单行截断css（超出的文本不显示）

.box{
  white-space:nowrap; 
  overflow:hidden;
  text-overflow:ellipsis;
}

flex布局

垂直居中会引出这道题吧。

  1. 弹性布局。
  2. display设置为flex之后，子元素的float，clear和vertical-align属性将失效。
  3. 下面是容器的属性
- flex-direction:主轴的方向。
   1. row（行）
   2. row-reverse
   3. column（列）
   4. column-reverse
- flex-wrap:如何换行。
   1. nowrap
   2. wrap
   3. wrap-reverse
- flex-flow:是flex-direction和flex-wrap的简写形式，默认值是row，nowrap。
- justify-content:定义了项目在主轴（横向）上的对齐方式。
   1. flex-start：左对齐
   2. flex-end：右对齐
   3. center：居中
   4. space-between：两端对齐，项目之间的间隔都相等。
   5. space-around：每个项目两侧的间隔相等。
- align-items：定义了项目在交叉轴上面如何对齐。
   1. flex-start：交叉轴的起点对齐
   2. flex-end：交叉轴的终点对齐
   3. center：交叉轴的中点对齐
   4. baseline：项目的第一行文字的基线对齐。
   5. stretch（默认值）：如果项目未设置高度/auto，将沾满整个容器的高度。
- align-content：定义多根轴线的对齐方式，只有一根的时候不生效。
   1. flex-start
   2. flex-end
   3. center
   4. space-between
   5. space-around
   6. stretch（默认值）

4.下面是项目的属性

- order：定义项目的排列顺序，修改排列布局。
- flex是flex-grow，flex-shrink，flex-basis的简写，默认0，1，auto。
-  flex-grow，定义项目的放大比例，默认是0，不放大（即使存在剩余空间也不放大）。为1的时候则会放大。
-  flex-shrink：缩小比例。
-  flex-basis: 分配多余空间之前，项目占据的主轴空间。
-  align-self： 允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items属性。

- flex：1

实现的效果是所有元素等分。flex-basis的单位 像素/百分比。父盒子需要设置flex，否则子盒子设置的flex不生效。

父盒子设置成flex之后，子盒子设置flex:1的可以均分剩余空间。

flex:1 相当与  flex: 1 1 0% 
#app {
  height: 500px;
  width: 1000px;
  background-color: aqua;
  display: flex;
}


.left{
  background-color: red;
  height: 100%;
  width: 200px;
}
.center{
  background-color: aliceblue;
  height: 100%;
  flex:1;
}
.right{
  background-color: blue;
  height: 100%;
  flex:1;

}

transition、transform、translate的区别

  • transform 属性规定元素应用 2D 或 3D 转换。该属性允许我们对标签进行旋转、缩放、移动或倾斜。
  • translate()是transform中的一个方法，定义2D旋转，控制元素按照x轴，y轴平移。
  • transition是在一定时间内，一组css属性转换成另一组css属性的动画展示过程。可以看w3c这个，说的很清楚。www.w3school.com.cn/cssref/pr_t…
transition: property duration timing-function delay;

说一下BFC

juejin.cn/post/712236…

CSS垂直居中的方案

我只写了几种方案 juejin.cn/post/710833…

伪元素和伪类的区别

伪元素是创建了一个新元素，伪类的元素是本身就存在。常见的伪元素和伪类。

//伪类
:link。元素被定义了超链接但并未被访问过
:visited。元素被定义了超链接并已被访问过
:active。元素被激活
:hover。鼠标悬停
:focus。元素获取焦点
:fisrt-child。父元素的第一个子元素
:last-child。父元素的最后一个子元素的元素
......
//伪元素
:before --- 在此元素的前面添加内容。
:after --- 在此元素后面添加内容
.....

可以看一下下面这篇文章 blog.csdn.net/weixin_4619…

position的几个属性和含义

  • fixed：生成固定定位的元素，相对于浏览器窗口进行定位。
  • static: position的默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
  • relative：生成相对定位的元素，相对于其正常位置（自身）进行定位。
  • absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。（通常的使用就是子绝父相）
  • sticky: 粘性定位，该定位基于用户滚动的位置（没有超出目标区域）。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意在使用的时候，最少要设置（top, bottom, left, right）其中任意一个，否则并不生效。

盒模型

标准盒模型。IE（替换）盒模型

  • 相同：由content，padding，border，margin构成
  • 不同：width/height计算的盒模型范围不同。标砖盒模型只包含content，ie盒模型是content+padding+border
  • 可以通过box-sizing来改变元素的盒模型。
box-sizing：content-box //标准盒模型
box-sizing：border-box //ie盒模型

标准.jpg

ie.jpg

响应式布局方案

响应式布局就是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕。

  • 百分比：利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素； 能够设置的属性有 width、height、padding、margin，其他属性比如 border、font-size 不能用百分比设置的
  • 弹性布局：flex
  • vm/vh：css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。
  • 使用媒体查询 (CSS3 @media 查询)：可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局。（如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。）
  • rem:相对于根节点html元素的字体大小。rem是一个相对单位（相对于根元素）。

三栏式布局方案

三栏式布局就是两侧宽度保持不变，中间的宽度随着整体的宽度变化。可以看一下下面这篇文章。 blog.csdn.net/qq_44647809…

avatar
文章
阅读
粉丝