css学习阶段一

CSS基础入门到实战：3个核心技巧让样式编写更高效

作为前端开发的基石，CSS的学习门槛看似较低，但想要写出简洁、可维护的样式却需要掌握一定的技巧。本文针对CSS初学者，从基础语法梳理到实战技巧总结，帮你快速搭建CSS知识框架，提升样式编写效率。

一、CSS选择器优先级：告别样式冲突的核心

很多初学者在编写CSS时都会遇到“样式不生效”的问题，核心原因就是没搞懂选择器的优先级规则。CSS选择器优先级从高到低依次为：内联样式（style属性）> ID选择器（#id）> 类选择器（.class）、伪类选择器（:hover）、属性选择器（[type="text"]）> 元素选择器（div、p）、伪元素选择器（::before）> 通配符选择器（*）。

这里有一个简单的计算口诀：内联样式记1000，ID选择器记100，类/伪类/属性选择器记10，元素/伪元素选择器记1，通配符记0。将选择器对应的数值相加，数值越大优先级越高；数值相同时，后面定义的样式会覆盖前面的。

实战建议：尽量避免使用内联样式和ID选择器，优先使用类选择器，这样能让样式更具复用性，减少冲突。

二、Flex布局：快速实现页面响应式排版

在Flex布局出现之前，页面排版大多依赖浮动（float）和定位（position），不仅代码繁琐，还容易出现兼容性问题。Flex布局（弹性布局）通过定义容器和项目的属性，能轻松实现元素的居中、均匀分布、自适应等效果。

核心用法：给父容器添加display: flex，即可开启Flex布局。常用属性包括：

• justify-content：定义项目在主轴（默认水平方向）上的对齐方式，可选值有flex-start（默认，左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐，项目间距相等）、space-around（项目两侧间距相等）。

• align-items：定义项目在交叉轴（默认垂直方向）上的对齐方式，可选值有flex-start（上对齐）、flex-end（下对齐）、center（居中）、stretch（默认，拉伸填充容器）。

• flex-direction：定义主轴方向，可选值有row（默认，水平从左到右）、column（垂直从上到下）。

实战案例：实现一个水平居中的导航栏，只需给导航容器添加display: flex; justify-content: center; align-items: center;，无需复杂的浮动和定位，代码简洁且兼容性良好。