前端中全部盒子靠左对齐_前端之 CSS

HTML、JavaScript 和 CSS 是前端的3大基础技术（语言），分别侧重于 内容、逻辑和样式，大家常说的“关注点分离”，指的就是它们仨。其中 JavaScript 是编程语言，而 HTML 和 CSS 是 DSL，即“领域特定语言”。

学习 DSL 和学习编程语言有很大不同，编程语言基本上是冯·诺依曼计算机5大要素的具体实现，即 输入、输出、计算器、存储器和控制器，而 DSL 是特定领域中各种事物的描述，有很高的表达效率，但是灵活度不够。

在 CSS 中，主要有选择器、盒子模型、浮动、定位、动画等内容。

选择器

CSS 的作用是给 HTML 添加样式，因此，需要有一种方式选择到 HTML 的节点，这就是 CSS 选择器，常见的有 id、class、元素、属性等选择器，还有兄弟、后代、子元素选择器等。

CSS 全称是“层叠样式表”，可以给同一个元素设置多个同类样式，哪个会生效呢？它有一套比较复杂的计算规则，大概是 id 选择器的特殊性是 (0, 1, 0, 0)，属性、class、伪类选择器是 (0, 0, 1, 0)，元素、伪元素是 (0, 0, 0, 1)，另外内联规则是 (1, 0, 0, 0)，如此相加，特殊性高的优先级高；如果相同，则越往后优先级越高。

详细可参考：学习 CSS 的两大要点。

盒子模型

HTML 的每个元素可以理解为一个个小方盒，有外边距(margin)、边框(border)、内边距(padding)和宽高(width, height)，通过设置它们的尺寸，来决定元素的大小和相对其他元素位置，这也是最基础的布局方法。

这里注意 box-sizing，当取值为 content-box 时，宽高不包括内边距，当取值为 border-box 时，宽高则包括内边距和边框。

浮动

浮动是早期为了实现“文字围绕图片”效果引入的，现在广泛用于布局，比如场景按钮靠左，就可设置 float: left。

定位

定位 position 不仅给布局带来了很大的便利，而且引入 z-index，使元素能在第三个维度上排版。position 的取值有 fixed、absolute、relative 和 sticky，通过 top、right、bottom、left 控制元素位置，实现灵活的位置设定。

动画

CSS 动画主要通过 animation 和 transition 来实现，前者指定 @keyframes，实现比较复杂的动画，后者则主要指定初态到终态的时间。

整体上看 CSS 比较庞杂，实现一个效果往往也有多种方式，逻辑性一般，我初学时也是较长时间不能适应，但是弄清这些概念，并掌握常用的 CSS 属性和取值，还是能比较容易的实现常规布局效果。本文到此结束，下一篇将介绍 HTML。

感谢阅读。