HTML & CSS - 视觉、过渡、动画与布局 | 王富杰的博客

一、浏览器兼容问题

html和css标准是由W3C组织制定的。但是早期W3C标准制定很慢，但是浏览器厂商为了抢占市场就会自己制定一些标准。这样就出现了一些问题，有些属性这个浏览器支持，但是换别的浏览器就不支持了。目前W3C标准的制定速度上来了，但是历史遗留的一些问题依然存在。比如chrome浏览器早期版本在使用 box-sizing 这个属性时就要求书写为 -webkit-box-sizing。-webkit就是厂商前缀。

因此在开发过程中，对于一些CSS3的属性，如果要考虑兼容性就可以加上厂商前缀。这样就可以兼容一些低版本浏览器。在开发过程在可以使用vscode提供的Autoprefixer插件，这个插件只对CSS文件有效，对HTML文件是无效的。在写完CSS代码后，运行这个插件，它就会把有兼容问题的新属性自动加上厂商前缀。

二、视觉

视觉指的是对元素进行视觉效果的变化，它不会影响盒子的布局。在视觉里主要有四种变化：

圆角: border-radius
背景渐变：linear-gradient
阴影：box-shadow 盒子阴影 text-shadow 文字阴影
变形：translate 平移 scale 缩放 rotate 旋转 skew 倾斜

以上都是CSS3 的一些属性，这里我们不提供示例代码，都比较简单，可以自行写case进行测试。

三、过渡

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。使用的属性如下：

transition: 过渡属性 持续时间 过渡函数 过渡延迟;

接下来我们来看一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 200px;
            transition: 1s ease;
        }

        .box:hover {
            transform: scale(2, 1.2);
            background-color: #f80;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

如上所示：我们一个盒子，在鼠标悬停时进行缩放和改变背景颜色。但是设置了改变时进行过渡。ease就是过渡函数，它定义了过渡的快慢，如线性变化，或者先快后慢等等，都有对应的过渡函数。还可以加一个过渡延迟，比如过渡触发的时候，延迟1秒再开始过渡。

四、动画

动画的本质是定义一组关键帧，给每个关键帧设置不同的样式。然后给这一组关键帧取一个名字。

@keyframes name {
    0% {
        /*动画开始时的样式*/
    }
    5% {
        /*动画中途时的样式*/
    }
    100% {
        /*动画结束时的样式*/
    }
}

动画定义好后，只要给指定元素添加 animation 属性。

animation: 动画名 持续时间;
animation: 动画名 持续时间 重复次数 时间函数 动画方向 延迟时间;   （指定更多属性）

过渡和动画只能影响数值类属性，比如变形、位置、颜色、宽高、字体大小等等。

五、布局

原来我们页面的布局方案，基本都是普通流、浮动和定位。如果让元素水平排列，一种是用浮动，但是浮动本身不是做布局的，最初它是用来做文字环绕的，并且有高度坍塌问题。第二种是行块盒也可以水平排列，这种方式有空白折叠问题。基于此，CSS3推出了全新的布局方案，弹性盒和网格。弹性盒主要用于单行单列布局。网格主要用于多行多列的布局。

5.1、弹性盒

在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以弹性伸缩尺寸。默认弹性项目沿着主轴(从右向左)依次排列，侧轴(从上到下)拉伸。只要把一个元素的 display 属性设置为 flex，它就变成了弹性盒。它里面所有的子元素(不是后代元素)会变成弹性项目。

通过flex-direction可更改主轴朝向4个方向，侧轴只有向下或向右两个方向。jusity-content属性，可以修改主轴的排列方式，如居左，居右，两边对齐，中间间隙平分。align-items可以改变侧轴的排列方式。

5.2、网格布局

在处理多行多列时，建议使用网格布局。将一个元素的display属性设置为grid时，就是网格元素。它的所有子元素都是网格项目。当然我们还需要其他属性指定行列宽度数量等。这里我们就不具体逐个说明了。

六、布局总结

常用的布局可以根据传统方案和现代方案来分类。以下是目前最主流和实用的布局方式：

传统布局（基础但依然常用）文档流/普通流、浮动布局（Float）定位布局（Position）
弹性盒布局（Flexbox）：一维布局系统，解决容器内元素的对齐、方向、顺序、伸缩问题。适用场景：导航栏、列表项分布、卡片布局、水平/垂直居中、等高列、组件内部布局。
网格布局（CSS Grid）：二维布局系统，可同时控制行和列。适用场景：整体页面框架、复杂网格型相册、仪表盘、排版要求规整的界面。
响应式布局（Responsive）：使用媒体查询，根据屏幕宽度（如手机、平板、桌面）改变布局样式。常结合 Flexbox、Grid 使用。
自适应布局（Adaptive）：预先设计好几套固定宽度的布局（如 320px、768px、1200px），通过检测设备加载对应的布局。实现上更简单，但中间尺寸体验可能不佳。
框架级布局（组件库常见）栅格系统（Grid System）：Bootstrap、Ant Design、Element UI 等主流框架的核心。基于 row 和 col 概念，内部用 Flexbox 实现，提供响应式断点。

其中框架级布局有些会需要依赖第三方库等。使用 Bootstrap、Ant Design 等框架的好处是内置响应式断点、浏览器兼容性已处理、组件丰富等。

「真诚赞赏，手留余香」

HTML & CSS - 视觉、过渡、动画与布局

视觉、过渡、动画与布局