CSS基础概述

CSS是什么

层叠样式表（Cascading Style Sheets，简称：CSS），是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。

CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，必须在HTML文件内列出，有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的，用CSS语言写的文件中。HTML文件中只包含结构和内容的信息，CSS文件中只包含样式的信息。

CSS的历史

CSS1： 1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS。他们在1994年首次在芝加哥的一次会议上第一次展示了CSS的建议。
CSS2-2.1： 1998年5月，W3C发表了CSS2，其中包括新的内容如：绝对的、相对的和固定的定比特素、媒体型的概念、双向文件和一个新的字体。
CSS3： CSS3标准已部分公布，但仍未全部制订完毕，还会有其它新内容继续加入。W3C网站上有专页展示CSS3发展的进展。CSS3分成了不同类别，称为 modules 。而每一个 modules 都有于CSS2中额外增加的功能，以及向后兼容。

CSS的语法内容

CSS由多组规则组成。每个规则由 选择器（selector）、属性（property） 和 值（value） 组成：

选择器（Selector）： 多个选择器可以半角逗号 , 隔开。
属性（property）： CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。
值（value）： 指属性接受的设置值，多个关键字时大都以空格隔开。

属性和值之间用半角冒号 : 隔开，属性和值合称为特性。多个特性间用 ; 隔开，最后用 { } 括起来。

示例：

1
2
3
4


p/*选择器*/{
  font-size/*属性*/: 110%;/*值*/
  font-size: 110%;
}

CSS的层叠指的是什么？

样式层叠： 可以多次对同一选择器进行样式声明。
选择器层叠： 可以用不同选择器对同一个元素进行样式声明。
文件层叠： 可以用多个文件进行层叠。

文档流

Normal Flow，正常流动方向。文档流方向为从左到右，从上到下。

块级元素（block） 总是占据水平方向上所有的空间（能有多大就多大），多个块元素从上到下流动。
内联元素（inline） 仅占据自身大小（能有多小就多小），多个内联元素从左到右流动。

盒模型

编写 CSS 时你会发现，你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：

content： 即内容本身。
padding： 即内边距，围绕着内容（比如段落）的空间。
border： 即边框，紧接着内边距的线。
margin： 即外边距，围绕元素外部的空间。

两种盒模型

content-box： 内容盒，内容就是盒子的边界。
border-box： 边框盒，边框是盒子的边界。

两种盒子组成部分均为 margin + border + padding + content

content-box 的设置的宽度 = 内容宽度

border-box 的设置的宽度 = 内容宽度 + padding + border

CSS基本单位

长度单位： px像素、em相对于自身font-size的倍数、% 百分数、整数、rem、vw 和 vh、其他。
颜色： 十六进制 #FFFFFF 、RGBA颜色 rgba(255,255,255,1) 、hsl颜色 hsl(360,100%,100%)

资料来源：饥人谷、MDN、WikiPedia