waterlin2011的博客

CSS Grid 布局是一种二维网格布局系统，与 Flexbox（一维布局模型）不同，Grid 能够同时处理行和列，使你可以更高效地设计复杂的网页布局。

flex-direction、justify-content、align-items、flex-wrap等属性的详细讲解

通过合理运用 position 属性及其值，你可以构建出既美观又实用的页面布局。关键是理解每种定位方式的特性，并根据实际需求灵活组合使用。

通过合理组合 calc()、max()、min() 和 clamp()，可实现高度灵活且健壮的响应式设计，减少媒体查询依赖，提升代码可维护性。

正常收缩”（所有项目按「flex-shrink值 × 基准尺寸」的比例分摊收缩量；适用于大多数需要内容自适应压缩的场景（如文本过长时自动截断）；对比（不收缩）或（收缩更快），是最均衡的收缩规则，因此称为 “正常”。

掌握flex、flex-basis、flex-grow、flex-shrink这四个核心属性，就能灵活控制弹性盒布局中元素的尺寸分配，实现从简单到复杂的各种响应式布局。

属性用于在元素的轮廓（outline）与边框（border）之间创建额外的间距。这个间距是透明的，意味着它不会被任何背景色填充，而是显示父元素或页面的背景。css/* 数值单位，如px、em、rem等 *//* 百分比值，相对于元素宽度 *//* 继承父元素的值 */支持负值：使轮廓向内偏移到元素内部透明性：偏移区域始终透明，不接受背景填充对所有轮廓有效：无论轮廓是通过 outline 属性设置，还是通过:focus 等伪类触发。

边框（Border）是元素盒模型的一部分，直接影响元素的尺寸计算由宽度、样式和颜色三个必要属性组成轮廓（Outline）是绘制于元素周围的一条线，不占据布局空间同样包含宽度、样式和颜色属性。

全称是。

掌握单位特性和转换方法可灵活实现从固定布局到响应式设计。

CSS 渐变是提升网页视觉效果的重要工具，掌握线性渐变和径向渐变的核心语法，配合颜色停止点和方向控制，就能创建出丰富的过渡效果。

掌握这些基础属性和实战技巧，即使是复杂的数据表格也能轻松驾驭。

掌握这些核心知识点，可以灵活地自定义列表样式，实现更丰富的布局效果。

通过系统学习这些边框技巧，你可以轻松实现从基础到高级的各种边框效果。

通过精心设计链接样式，可以显著提升用户体验和网站的视觉吸引力。

过系统掌握这些文字样式属性，你可以创建出既美观又易读的网页排版。建议在实际项目中建立一套统一的字体规范，并使用工具（如 Figma、Sketch）进行视觉设计验证。

CSS 背景属性用于定义HTML元素的背景。

将 CSS 代码保存为独立的。

CSS（Cascading Style Sheets）是一种用于描述网页文档（HTML 或 XML）呈现样式的语言。它负责控制网页元素的视觉表现，如颜色、字体、布局等，使内容与展示分离。