学到这一天，CSS 已经开始真正参与页面布局了。
如果说前几天是“调样式”，那今天就是在搭页面骨架。
一、CSS3 新增样式
1、圆角边框（border-radius）
在 CSS3 中，新增了圆角边框样式，使盒子可以轻松变成圆角。
border-radius: 20px;
使用要点：
-
参数值可以是数值或百分比
-
正方形盒子想变成圆形：
border-radius: 50%; -
支持四个值，分别表示：
左上、右上、右下、左下 -
也可以拆开写：
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius -
IE9+ 支持，不影响页面布局，可以放心使用
2、盒子阴影（box-shadow）
CSS3 提供了 box-shadow 属性，为盒子添加阴影效果。
box-shadow: h-shadow v-shadow blur spread color inset;
参数说明：
- h-shadow：水平偏移
- v-shadow：垂直偏移
- blur：模糊半径
- spread：扩展距离
- color：阴影颜色
- inset：内阴影（可选）
常见写法：
box-shadow: 0 4px 10px rgba(0,0,0,.15);
3、文字阴影（text-shadow）
用于给文本添加阴影效果。
text-shadow: h-shadow v-shadow blur color;
常用于提升文字层次感和可读性。
二、CSS 三种传统布局方式
CSS 提供了三种传统布局方式：
- 标准流（普通流）
- 浮动
- 定位
在实际开发中，一个页面通常会同时使用多种布局方式。
三、标准流（文档流）
标准流是浏览器默认的布局方式。
块级元素特点：
- 独占一行
- 从上到下排列
- 常见元素：div、p、h1~h6、ul、li
行内元素特点：
- 从左到右排列
- 遇到父元素边界自动换行
- 常见元素：span、a、em
标准流是最基础、最核心的布局规则。
四、为什么需要浮动？
标准流无法完成一些复杂布局效果，比如多个块级元素横向排列。
浮动的典型应用场景：
- 让多个块级元素在一行内显示
网页布局第一准则：
多个块级元素纵向排列使用标准流
多个块级元素横向排列使用浮动
五、什么是浮动（float）？
float 属性用于创建浮动元素，使其向左或向右移动。
float: left | right;
浮动会一直移动，直到碰到父元素边缘或其他浮动元素。
六、浮动的特性
1、浮动元素会脱离标准流
- 不再占据原来的位置
- 父元素无法感知其高度
2、浮动元素会一行显示并顶部对齐
- 浮动元素会紧贴排列
- 父元素宽度不足时会自动换行
3、浮动元素具有行内块特性
- 可以设置宽高
- 宽高由内容决定
- 盒子之间没有缝隙
七、浮动元素与标准流父级的配合
常见布局策略：
父元素使用标准流控制上下结构
子元素使用浮动控制左右排列
这是最稳定、最常见的布局方式。
八、为什么需要清除浮动？
当子元素浮动后：
- 子元素脱离标准流
- 父元素高度塌陷
- 会影响下面的标准流元素布局
清除浮动的本质是：
消除浮动元素脱离标准流带来的影响
让父元素重新拥有高度
九、清除浮动的几种方式
1、额外标签法（隔墙法）
在浮动元素末尾添加一个空标签：
<div style="clear: both;"></div>
优点：简单直观
缺点：增加无意义标签，不推荐
2、父元素添加 overflow 属性
overflow: hidden;
优点：代码简洁
缺点：溢出内容会被隐藏
3、after 伪元素清除浮动
.clearfix:after {
content: "";
display: block;
clear: both;
}
实际开发中非常常见。
4、双伪元素清除浮动（推荐）
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
优点：
- 不增加额外标签
- 兼容性好
- 主流网站常用方案
十、清除浮动总结
什么时候需要清除浮动：
- 父盒子没有高度
- 子盒子浮动
- 影响后续布局
满足以上条件，就需要清除浮动。
十一、PS 切图方式简介
常见切图方式：
- 图层切图
- 切片工具切图
- 插件切图（如 Cutterman）
在实际项目中，插件切图效率最高。
结语
到这里，CSS 已经不只是“写样式”这么简单了：
- 理解了浮动的行为
- 明白了高度塌陷的原因
- 掌握了多种清除浮动方案
这是从“会写 CSS”走向“理解 CSS”的关键一步。
