https://pothos.dpdns.org/tags/%E5%B8%83%E5%B1%80/Recent content in 布局 on Ralph's BlogHugo -- 0.147.7zh-cnSun, 04 Jan 2026 00:00:00 +0000https://pothos.dpdns.org/posts/56.css%E6%8A%80%E6%9C%AF%E6%8C%87%E5%8D%97/Sun, 04 Jan 2026 00:00:00 +0000https://pothos.dpdns.org/posts/56.css%E6%8A%80%E6%9C%AF%E6%8C%87%E5%8D%97/<h1 id="css-技术指南">CSS 技术指南</h1> <h2 id="目录">目录</h2> <details> <summary>点击展开目录</summary> <ul> <li><a href="#css-%E6%8A%80%E6%9C%AF%E6%8C%87%E5%8D%97">CSS 技术指南</a> <ul> <li><a href="#%E7%9B%AE%E5%BD%95">目录</a></li> <li><a href="#css%E6%A6%82%E8%BF%B0">CSS概述</a> <ul> <li><a href="#%E4%BB%80%E4%B9%88%E6%98%AFcss">什么是CSS</a></li> <li><a href="#css%E5%8F%91%E5%B1%95%E5%8E%86%E5%8F%B2">CSS发展历史</a></li> <li><a href="#css%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F">CSS引入方式</a></li> <li><a href="#css%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86">CSS工作原理</a></li> </ul> </li> <li><a href="#%E9%80%89%E6%8B%A9%E5%99%A8">选择器</a> <ul> <li><a href="#%E5%9F%BA%E7%A1%80%E9%80%89%E6%8B%A9%E5%99%A8">基础选择器</a></li> <li><a href="#%E7%BB%84%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8">组合选择器</a></li> <li><a href="#%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8">伪类选择器</a></li> <li><a href="#%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8">伪元素选择器</a></li> <li><a href="#%E9%80%89%E6%8B%A9%E5%99%A8%E4%BC%98%E5%85%88%E7%BA%A7">选择器优先级</a></li> </ul> </li> <li><a href="#%E7%9B%92%E6%A8%A1%E5%9E%8B">盒模型</a> <ul> <li><a href="#%E6%A0%87%E5%87%86%E7%9B%92%E6%A8%A1%E5%9E%8B">标准盒模型</a></li> <li><a href="#ie%E7%9B%92%E6%A8%A1%E5%9E%8B">IE盒模型</a></li> <li><a href="#margin%E4%B8%8Epadding">margin与padding</a></li> <li><a href="#%E8%BE%B9%E6%A1%86%E4%B8%8E%E5%9C%86%E8%A7%92">边框与圆角</a></li> <li><a href="#%E7%9B%92%E5%AD%90%E9%98%B4%E5%BD%B1">盒子阴影</a></li> </ul> </li> <li><a href="#%E5%B8%83%E5%B1%80%E6%96%B9%E5%BC%8F">布局方式</a> <ul> <li><a href="#%E6%96%87%E6%A1%A3%E6%B5%81%E4%B8%8E%E5%AE%9A%E4%BD%8D">文档流与定位</a></li> <li><a href="#flexbox%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80">Flexbox弹性布局</a></li> <li><a href="#grid%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80">Grid网格布局</a></li> <li><a href="#%E5%A4%9A%E5%88%97%E5%B8%83%E5%B1%80">多列布局</a></li> <li><a href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80">响应式布局</a></li> </ul> </li> <li><a href="#%E6%96%87%E6%9C%AC%E4%B8%8E%E5%AD%97%E4%BD%93">文本与字体</a> <ul> <li><a href="#%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7">字体属性</a></li> <li><a href="#%E6%96%87%E6%9C%AC%E5%B1%9E%E6%80%A7">文本属性</a></li> <li><a href="#web%E5%AD%97%E4%BD%93">Web字体</a></li> </ul> </li> <li><a href="#%E9%A2%9C%E8%89%B2%E4%B8%8E%E8%83%8C%E6%99%AF">颜色与背景</a> <ul> <li><a href="#%E9%A2%9C%E8%89%B2%E8%A1%A8%E7%A4%BA%E6%96%B9%E6%B3%95">颜色表示方法</a></li> <li><a href="#%E8%83%8C%E6%99%AF%E5%B1%9E%E6%80%A7">背景属性</a></li> <li><a href="#%E6%B8%90%E5%8F%98%E6%95%88%E6%9E%9C">渐变效果</a></li> </ul> </li> <li><a href="#%E8%BF%87%E6%B8%A1%E4%B8%8E%E5%8A%A8%E7%94%BB">过渡与动画</a> <ul> <li><a href="#css%E8%BF%87%E6%B8%A1">CSS过渡</a></li> <li><a href="#css%E5%8A%A8%E7%94%BB">CSS动画</a></li> <li><a href="#%E5%8F%98%E6%8D%A2transform">变换Transform</a></li> </ul> </li> <li><a href="#css%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8">CSS预处理器</a> <ul> <li><a href="#sassscss">Sass/SCSS</a></li> <li><a href="#less">Less</a></li> <li><a href="#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8%E5%AF%B9%E6%AF%94">预处理器对比</a></li> </ul> </li> <li><a href="#css%E6%9E%B6%E6%9E%84%E4%B8%8E%E8%A7%84%E8%8C%83">CSS架构与规范</a> <ul> <li><a href="#bem%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83">BEM命名规范</a></li> <li><a href="#css%E6%A8%A1%E5%9D%97%E5%8C%96">CSS模块化</a></li> <li><a href="#css-in-js">CSS-in-JS</a></li> </ul> </li> <li><a href="#%E5%AE%9E%E6%88%98%E6%8A%80%E5%B7%A7">实战技巧</a> <ul> <li><a href="#%E5%B8%B8%E8%A7%81%E5%B8%83%E5%B1%80%E5%AE%9E%E7%8E%B0">常见布局实现</a></li> <li><a href="#css%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96">CSS性能优化</a></li> <li><a href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7">浏览器兼容性</a></li> </ul> </li> </ul> </li> </ul> </details> <hr> <h2 id="css概述">CSS概述</h2> <h3 id="什么是css">什么是CSS</h3> <p><strong>CSS</strong>（Cascading Style Sheets，层叠样式表）是用于描述 HTML 文档<strong>外观和格式</strong>的样式表语言。</p> <p><strong>CSS 的作用：</strong></p> <ul> <li><strong>分离内容与表现</strong>：HTML 负责结构，CSS 负责样式</li> <li><strong>统一样式管理</strong>：一处修改，全站生效</li> <li><strong>丰富的视觉效果</strong>：布局、颜色、动画等</li> <li><strong>响应式设计</strong>：适配不同设备</li> </ul> <p><strong>CSS 基本语法：</strong></p>