前言
最近这段时间是秋招提前批,这里整理出来了比较常考的css面试题分享给大家,后续也会更新js常考的面试题,欢迎大家关注点赞收藏。
高频前端面试题——css篇(一) - 掘金 (juejin.cn)
6. 元素水平垂直居中的方法有哪些?
水平垂直居中的方法可以分为三种情况:已知父子容器宽高;未知父容器,已知子容器;未知父子容器宽高,只要你分类去说明就不会遗漏方法,这题可以拿100分。
已知父子容器宽高:
margin (不优雅),就是算子容器要向右向下移动多少px,这个方法不推荐。
<style>
.parent {
width: 200px;
height: 200px;
border: 1px solid #000;
background-color: #c34444;
}
.child {
width: 50px;
height: 20px;
background-color: #78be5f;
margin-left: 75px;
margin-top: 90px;
}
</style>
未知父容器,已知子容器:
1. margin + calc(父容器 - 子容器)
margin-left: calc(50% - 子容器宽度/2)
2. position + margin负值
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
margin-left: -(子容器宽度/2)px;
margin-top: -(子容器高度/2)px;
}
未知父子容器宽高
1. position + transform
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2. flex + align-items + justify-content
/* 给父容器设置弹性布局 */
.parent{
display: flex;
justify-content: center;
align-items: center;
}
3. grid + align-items + justify-content
.parent{
display: grid;
justify-content: center;
align-items: center;
}
4. table-cell + vertical-align: middle; + text-align: center;
.parent{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child{
display: inline-block;
}
块级元素水平居中: margin: 0 auto;
非块级元素水平居中,子容器要为行内块:text-align: center;
7. 说说flexbox
是什么
弹性布局是css中一种简便高效的布局方式,弹性布局中有主轴(默认为x轴)和交叉轴(Y轴)的概念,主轴的方向也可以修改,子容器默认在主轴上排列。
属性
在CSS Flexbox布局模型中,容器(父元素)和项目(子元素)各自有一组特定的属性来控制布局行为。下面我将这些属性分为两部分来解释。
容器(父元素)的属性
容器上的Flexbox属性主要用来定义项目的排列方式、对齐方式等。
-
display: 将一个元素设置为Flex容器。可以使用
display: flex;
或display: inline-flex;
。 -
flex-direction: 决定主轴的方向(即项目的排列方向)。
-
flex-wrap: 规定项目是否允许换行。可能值有
nowrap
(默认,不允许换行)、wrap
(允许换行) 和wrap-reverse
(允许换行且反转顺序)。 -
justify-content: 在主轴上对齐项目。
-
align-items: 在交叉轴上对齐项目。
-
align-content: 当项目有多行时,在交叉轴上对齐行。
-
align-self: 该属性应用于单个项目,允许其覆盖容器的
align-items
属性。 -
flex-flow: 这是
flex-direction
和flex-wrap
的简写形式。
项目(子元素)的属性
项目上的Flexbox属性主要用于控制单个项目的大小和位置。
-
order: 定义项目的排序顺序。默认值为 0,数值越大则项目越靠后。
-
flex-grow: 指定项目如何分配剩余空间。默认值为 0,表示不分配额外空间。
-
flex-shrink: 指定项目如何缩小以适应可用空间。默认值为 1,表示可以按比例缩小。
-
flex-basis: 定义项目的初始大小。可以是一个长度值(如 200px)、百分比或关键字
auto
(默认) 或content
。 -
flex: 这是
flex-grow
、flex-shrink
和flex-basis
的简写形式。默认值为0 1 auto
。
应用场景
- 三栏布局
- 水平垂直居中
8. 如何实现三栏布局
- 弹性布局
- 浮动布局 (圣杯、双飞翼)
- grid
- table
- position
这个我在另一篇文章中有详细说明:(三栏布局:圣杯、双飞翼与Flex布局详解 - 掘金 (juejin.cn))
9. css 画三角形,梯形
- 用clip-path,使用 polygon() 函数来定义三角形的顶点坐标。
.box{
width: 100px;
height: 100px;
background-color: #333131;
clip-path: polygon(0 0, 100px 0, 0 100px);
}
- 通过设置三个边为透明而剩下的一个边为可见颜色来实现
.box {
width: 0;
height: 0;
border: 100px solid;
border-color: transparent transparent transparent #6faf1c;
}
- 画梯形也可以用边框透明来实现。
.box {
width: 100px;
height: 100px;
border: 100px solid;
border-color: transparent transparent #6faf1c transparent;
}
10. 画一条0.5px的线
在CSS中,要绘制一条非常细的线(例如0.5px),通常的方法可能无法直接实现,因为大多数浏览器渲染时会对小于1px的值进行舍入处理。可以用transform方法。
transform: scaleY(0.5);
transform: scaleY(0.5);
是一个CSS属性,用于改变元素在垂直方向上的尺寸。这里的 scaleY()
函数是一个缩放函数,它接受一个数值参数,表示垂直方向上的缩放比例。0.5
: 这个数值是缩放因子,意味着元素将在垂直方向上缩小至原来的一半大小。