朱安邦的 CSS 学习笔记

前沿

本书不讲 CSS 基本属性的语法，你需要有一点 CSS 基础和 HTML 基础；如果没有基础，推荐查看阿西河的 HTML 教程和 CSS 教程；

本书主要从真实项目出发，引入原理和应用，让你解决真实项目种的问题同时，又学到知识。

每一种布局和效果，都会给出多种解决方案；

如果你是学习阶段，切记不要感觉只需要学会一种方法就可以了，其它的就不学了！

如果你是学习阶段，切记不要感觉只需要学会一种方法就可以了，其它的就不学了！

如果你是学习阶段，切记不要感觉只需要学会一种方法就可以了，其它的就不学了！

这种念头，一定不要有！因为本书的内容，不单单是告诉你结果，还会尽量简明扼要的讲对应的原理！

我的想法是让小伙伴们，以结果为导向的学习，这样学的会更有目的性，可以更容易开展知识点的讲解；

如果你是带着寻找结果的想法来看书，而不是抱着研究技术的心态来学习，那么你可能发挥不出这本书的真正价值。

https://pic4.zhimg.com/v2-37baacfe103e3adeedb610daacfb815b_r.jpg

• 布局
• 自适应（兼容多平台）
• 常见效果
• 组件封装

布局

所有 css 布局的根本都是 3 个基本概念：定位、浮动、外边距操纵

• 水平居中
• 垂直居中
• 水平垂直都居中
• CSS 图片布局
• 一行一列（多个元素）

• 一行两列
• 一行三列
  • 一列固定宽度
  • 一列宽度自适应
  • 一列固定宽度居中

• 单列布局
• 两行一列

• 两行两列
• 两行三列
  • 二列宽度自适应
  • 二列右宽度自适应
  • 二列固定宽度居中
• 三行一列
• 三行两列
• 三行两列
  • 三列浮动中间列度自适应
  • 高度自适应

• 多栏布局
• 双飞翼布局
• 圣杯布局