CSS3 面试题 超基础 一

 一： css3增加了哪些特性

1. 圆角 border-radius
2. 阴影 box-shadow 和 text-shadow
3. 渐变色 linear-gradient 和 radial-gradient
4. 动画 @keyframes 和 animation
5. 自适应屏幕 @media
6. Flex Grid布局

二：什么是box-sizing

盒模型计算方式的数据

context-box:默认值 宽度，高度不包括内边距，边框

border-box:   高度，高度包括内边距，边框

三：弹性盒子 display : flex

适合动态，复杂的布局

• display: flex：将容器设置为 flex 容器。
• flex-direction：定义主轴方向（row、column 等）。
• justify-content：定义主轴上的对齐方式（如居中、两端对齐等）。
• align-items：定义交叉轴上的对齐方式（如居中、顶部对齐等）。
• flex-grow、flex-shrink 和 flex-basis：控制项目的伸缩性。

四：二维布局 dispaly：grid

运行在水平，垂直方向同时布局

• grid-template-columns 和 grid-template-rows：定义网格的列和行。
• grid-gap：设置网格行和列之间的间隔。
• grid-column 和 grid-row：控制子元素在网格中的位置和跨越的行或列数。

五：@keyframes 是什么

创建动画状态，指定一个动画到另一个动画的过度

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

.element {
  animation: slide 2s ease-in-out infinite;
}