面试中可能会遇到的css的问题（4）

moyu84
144 阅读5分钟

9.说说flexbox

Flexbox是一种用于网页布局的CSS技术，可以简便完整地实现页面布局。它基于容器和其中的项目，容器默认存在两条轴：主轴和交叉轴。默认情况下，主轴是水平的（x轴），但可以使用flex-direction属性来修改主轴的方向。

特征包括：

  1. 控制子元素在主轴上的对齐方式。
  2. 控制子元素在交叉轴上的对齐方式。
  3. 控制子元素的缩放比例和排列顺序。

Flexbox的应用场景包括多栏布局和居中。下面结合代码详细解释如何在Flexbox中实现居中：

假设我们有一个容器<div class="container">，里面有一个子元素<div class="item">，我们希望将子元素在容器中水平垂直居中。

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px; /* 设置容器高度 */
  border: 1px solid black; /* 为了更好地展示效果添加边框 */
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

在上面的CSS中，我们将容器设置为display: flex;，这样子元素将按照Flexbox的规则进行布局。通过justify-content: center;和align-items: center;属性，我们实现了子元素在容器中的水平和垂直居中。

这样，使用Flexbox可以轻松实现居中布局，使得网页布局更加灵活和响应式。

10. css3新增了哪些属性？

  1. 属性选择器和伪类选择器：属性选择器允许根据元素的属性值选择元素，伪类选择器允许根据元素的状态或位置选择元素。
input[type="text"] {
  color: blue;
}

a:hover {
  text-decoration: underline;
}
  1. box-shadow：用于在元素周围添加阴影效果，可以控制阴影的颜色、模糊程度、偏移等属性。
.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  box-shadow: 5px 5px 5px grey;
}
  1. background-clip：用于控制背景图片或颜色的绘制区域，可以将背景限制在元素的内容框、填充框或边框框之内。
.box {
  background: linear-gradient(to right, red, yellow);
  background-clip: content-box;
  width: 200px;
  height: 200px;
}
  1. transition：用于在元素属性值发生变化时平滑过渡效果，可以控制属性值变化的持续时间、延迟时间、过渡函数等。
.button {
  background-color: blue;
  transition: background-color 0.5s ease;
}

.button:hover {
  background-color: red;
}
  1. transform：用于对元素进行旋转、缩放、倾斜或平移等变换，可以实现各种炫酷的效果。
.box {
  transform: rotate(45deg) scale(1.5);
}
  1. animation：用于创建动画效果，可以定义关键帧和动画属性，实现元素的复杂动画效果。
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

.slide {
  animation: slidein 3s infinite;
}
  1. 渐变色（Gradients）：CSS3引入了线性渐变和径向渐变，可以实现平滑的颜色过渡效果。线性渐变可以沿着一条直线定义颜色过渡，而径向渐变则是从一个中心点向外辐射的颜色过渡。
.gradient {
  background: linear-gradient(to right, red, yellow);
  width: 200px;
  height: 200px;
}

11. css3中常见的动画有哪些？怎么实现？

  1. transition：transition属性用于控制元素属性值的变化过渡效果，包括变化的时间和变化的曲线。通过指定需要过渡的属性、过渡时间、过渡延迟时间和过渡曲线，可以实现平滑的属性变化效果。
.element {
  transition: width 0.5s ease-in-out; /* 当宽度变化时，以0.5秒的时间以缓慢进入和退出的方式过渡 */
}
  1. transform：transform属性用于对元素进行旋转、平移、缩放、倾斜等变换操作，从而实现元素的动画效果。通过指定不同的变换函数和参数，可以创建各种视觉上的动态效果。
.element {
  transform: rotate(45deg) scale(1.5); /* 将元素旋转45度并放大1.5倍 */
}
  1. animation：animation属性允许创建复杂的动画效果，通过定义关键帧（keyframes）来控制动画的每一帧。关键帧包括动画开始、中间和结束时的样式，可以通过百分比或关键字来定义每一帧的样式。
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

.element {
  animation: slidein 3s infinite; /* 使用slidein关键帧动画，持续3秒，无限循环 */
}

12. 说说回流重绘 （重排重绘）

回流（reflow）和重绘（repaint）是浏览器渲染页面时的两个重要概念。回流是指浏览器在渲染页面之前需要重新计算元素的位置和大小，以确定它们在页面中的准确位置，而重绘则是指根据元素的新样式重新绘制元素的内容。回流必定会触发重绘，但重绘不一定会触发回流。

触发回流的情况包括：

  1. 页面上有容器的几何属性发生变更，比如改变元素的宽度、高度、位置等。
  2. 浏览器窗口大小改变，导致整个页面需要重新布局。

触发重绘的情况包括：

  1. 容器的非几何属性发生变更，比如改变元素的背景颜色、字体颜色等。
  2. 元素的可见性发生变化，比如通过display属性控制元素的显示与隐藏。

举个例子来详细解释回流必定重绘这句话：假设有一个页面上包含一个<div>元素，当我们通过JavaScript动态改变这个<div>元素的宽度时，这个操作会触发回流，因为浏览器需要重新计算这个元素在页面中的位置和大小。这个回流操作必定会导致这个<div>元素的重绘，因为它的显示样式发生了变化。因此，在这个例子中，回流操作必定引起了重绘操作。

在前端开发中，应尽量减少回流和重绘的次数，以提高页面性能和用户体验。可以通过合并多次样式改变、使用transform属性代替改变元素位置等方式来减少回流和重绘的频率。

avatar
文章
阅读
粉丝