5-基础-CSS

高灯GFE

于 2023-03-13 15:03:21 发布

阅读量222

点赞数

分类专栏：高级前端成长之路文章标签： css 前端 ui

本文链接：https://blog.csdn.net/gaojinbo0531/article/details/129494568

版权

高级前端成长之路专栏收录该内容

9 篇文章 0 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文深入探讨了CSS布局技术，包括Flex布局的原理与使用，CSS3渐变、GPU加速的优化技巧，高级选择器的运用，以及尺寸单位rem、em、px、vw、vh等。此外，还介绍了CSS预处理器如Sass、Less，CSS模块化方案如BEM、OOCSS，以及CSS-in-JS库styled-components的应用。通过对这些概念和技术的理解，有助于提升前端页面的精美度和实用性。

摘要由CSDN通过智能技术生成

实现精美页面是前端工程师的核心能力之一，CSS布局技术是实现精美页面的核心技术，但CSS布局好入门，难精通。随着用户审美标准越来越高，前端页面对精美度、实用性要求越来越高，深度掌握CSS布局，可更快提升竞争力。

flex

Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持 Flex 布局。flex布局也经常被称之为flexbox，使用flex布局之后，它会给子元素提供强大空间分配和对齐能力。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size࿰