CSS3面试题超基础一

一： css3增加了哪些特性 圆角 border-radius阴影 box-shadow 和 text-shadow渐变色 linear-gradient 和 radial-gradient动画 @keyframes 和 animation自适应屏幕 @mediaFlex 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; }