掌握 CSS3：面试中的关键考点总结(二)

引言

书接上回 掌握 CSS3：面试中的关键考点总结(一）今天我们继续深入学习了 CSS3 的多个重要考点，包括元素的居中对齐、常用 CSS 属性、CSS 画图技巧、Flexbox 布局、三栏布局方法以及 CSS3 的新增特性。

元素水平垂直居中的方法

在html中我们添加一个父元素，一个子元素，用一个公共样式来设置他们的大小以及背景颜色：

    <div class="container">
        <div class="child"></div>
    </div>

实现以下效果：

1. 已知父子容器的宽高

如果已知父子容器的宽和高之后，我们直接使用margin便可以实现子元素的水平垂直居中，通过父容器宽度(高度)-子容器宽度(高度)的差除以二，但需要注意的是，在使用margin时，会造成margin重叠，我们需要将其变为BFC容器，消除重叠。举个例子：

.container {
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.child {
  width: 100px;
  height: 100px;
  margin-left: 100px;
  margin-top: 100px;
}

2. 未知父容器宽高，已知子容器宽高

• margin: calc(50% - 子容器宽高 / 2)

.container {
     background: orange;
     overflow: hidden;
}

.child {
     width: 100px;
     height: 100px;
     margin: calc(50% - 50px);
     background: skyblue;
}

• 定位 + margin

.container {
  position: relative;
  background: orange;
}
.child {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px; /* 宽度的一半 */
  margin-top: -50px;  /* 高度的一半 */
  background: skyblue;
}

3. 未知父与子容器宽高

• 定位 + transform

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: orange;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%); /* 垂直和水平居中 */
  background: skyblue;
}

这里将父容器宽高设为视图宽高，也算是未知的，而我们为了方便观察，这里将子容器的宽高都设为了100px，可以看出，无需知道父子元素宽高，通过 定位+transform 来实现水平垂直居中。、

• Flex

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;
  background: orange;
}
.child {
  width: 100px;
  height: 100px;
  background: skyblue;
}

• Grid

.container {
    display: grid;
    place-items: center;
    /* 或者 justify-content:center; align-items: center;*/
    /* 水平和垂直居中 */
    height: 100vh;
    background: orange;
}

.child {
    width: 100px;
    height: 100px;
    background: skyblue;
}

• Table-cell

.container {
  display: table;
  width: 100%;
  height: 100vh;
}
.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

• Vertical-align:

.container {
  display: inline-block;
  vertical-align: middle;
  height: 100vh;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

• text-align: center

.container {
  text-align: center;
  height: 100vh;
  line-height: 100vh; /* 垂直居中 */
}
.child {
  display: inline-block;
  line-height: normal; /* 重置行高 */
}

聊一聊 Flexbox

是什么

弹性布局是CSS中一种简便高效的布局方式，弹性容器中有主轴（默认为X轴）和交叉轴（默认为Y轴）的概念，主轴方向也可以修改，子容器默认在主轴上排列。

属性

• display: flex;: 激活 Flexbox 布局。

• flex-direction: 定义主轴方向（row、column）。

• justify-content: 定义主轴上的对齐方式（center、space-between、flex-start、flex-end）。

• align-items: 定义交叉轴上的对齐方式（center、flex-start、flex-end、stretch）。

• align-self: 定义单个子元素在交叉轴上的对齐方式。

• flex 属性是 Flexbox 布局中用于控制弹性容器子项的关键属性之一。它主要包括三个属性：flex-grow、flex-shrink 和 flex-basis。

  • flex-grow: 控制子项如何在容器中增长。 默认值为0，表示不增长。
  • flex-shrink: 控制子项如何在容器中缩小。 默认值为1，表示可以缩小。
  • flex-basis: 设置子项在分配剩余空间之前的基准大小。 默认值为auto，表示由子项内容决定。

应用场景

• 三栏布局 : 通过 flex 的 flex-direction 和 flex 属性。
• 垂直水平居中 : 使用 justify-content 和 align-items。

具体关于 flex 可以在 带你了解flex弹性布局 中详细学习了解。

如何实现三栏布局

Flexbox:

.container {
  display: flex;
}
.left, .center, .right {
  flex: 1;
  padding: 10px;
}

Float

.container {
  overflow: hidden; /* 清除浮动 */
}
.left, .center, .right {
  float: left;
  width: 33.33%;
  padding: 10px;
}

Table

.container {
  display: table;
  width: 100%;
}
.left, .center, .right {
  display: table-cell;
  width: 33%;
  padding: 10px;
}

css3新增了哪些属性

• flexbox: 提供了一种新的布局方式，通过简单的属性设置可以实现复杂的布局，如居中对齐、等分布局等。

• grid 布局: 提供了二维布局的能力，可以更精确地控制元素的位置和大小。

• transform : 包括 translate, rotate, scale, skew 等功能，用于在 2D 或 3D 空间中变换元素。

• transition: 使属性的变化更平滑，通过设定过渡时间和方式来实现。

• animation: 允许对元素进行复杂的动画定义，包括关键帧动画和动画持续时间等。

transform 属性

transform 属性允许你在 2D 或 3D 空间中变换元素，包括平移、旋转、缩放和倾斜等功能。

函数	描述	示例
translate()	平移元素	transform: translate(50px, 100px); 元素向右移动 50px，向下移动 100px
rotate()	旋转元素	transform: rotate(45deg); 元素顺时针旋转 45 度
scale()	缩放元素	transform: scale(1.5, 0.5); 元素在 X 轴方向放大 1.5 倍，在 Y 轴方向缩小 0.5 倍
skew()	倾斜元素	transform: skew(20deg, 10deg); 元素沿 X 轴倾斜 20 度，沿 Y 轴倾斜 10 度
perspective()	设置元素的透视效果	perspective: 500px; 透视距离为 500px
matrix()	使用矩阵变换元素	transform: matrix(1, 0, 0, 1, 50, 100); 变换矩阵进行平移

transition 属性

transition 属性用于在属性值变化时，创建平滑的过渡效果。它指定了哪些属性应当进行过渡、过渡的持续时间、过渡的时效函数以及延迟时间。

属性	描述	示例
transition-property	需要进行过渡的属性	transition-property: width, background-color; 指定哪些属性应进行过渡
transition-duration	过渡的持续时间	transition-duration: 0.5s; 过渡持续时间 0.5 秒
transition-timing-function	过渡的时效函数	transition-timing-function: ease-in-out; 描述过渡的加速或减速方式
transition-delay	过渡的延迟时间	transition-delay: 0s; 过渡的延迟时间 0 秒

过渡的时效函数

函数	描述	示例
linear	匀速变化	transition-timing-function: linear;
ease	先慢后快再慢	transition-timing-function: ease;
ease-in	由慢到快	transition-timing-function: ease-in;
ease-out	由快到慢	transition-timing-function: ease-out;
ease-in-out	先慢后快再慢	transition-timing-function: ease-in-out;

画一条 0.5px 的线

.line {
  border-top: 0.5px solid black; /* 细线的实现 */
}

为了确保在不同的设备和屏幕分辨率上均能清晰显示，您可能需要使用 transform 来调整线条的粗细：

.line {
  border-top: 1px solid transparent; /* 1px 透明边框 */
  transform: scaleY(0.5); /* 缩放到 0.5px */
}

总结

今天我们深入探讨了 CSS 的各种关键概念和技术，包括元素水平垂直居中的多种方法、常用 CSS 属性、绘制形状的技巧、Flexbox 布局模型、三栏布局的实现方式以及 CSS3 的新增特性。这些知识点涵盖了从基础的样式设置到复杂的布局实现，为前端开发者提供了强大的工具和方法，以提高网页的视觉效果和用户体验。掌握这些技能将帮助你在实际项目中更加高效和灵活地处理布局和样式问题。