CSS是谁发明的

Tim-Berners Lee李爵士的挪威同事Hakon Wium Lai首先提出CSS。

CSS标准制定者是谁

W3C

CSS: Cascading Style Sheets层叠样式表

1.层叠是指什么？

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

2.CSS的版本

版本	时间	重点
CSS1	1996	无
CSS2	1998	无
CSS2.1	2004~2011	使用最广泛的版本（IE支持）
CSS3	1999年开始起草	现代版本，分模块（IE8部分支持）

3. CSS的语法

• 语法一：样式语法

选择器{
     属性名: 属性值;
     /*注释*/
}

• 语法二：at语法

@charset "UTF-8";
@import url(2.css);
@media (min-width: 100px) and (max-width: 200px) {
  样式语法
}

4.文档流

1. 流动方向

• inline 元素从左到右，到达最右边才会换行（span元素）
• block 元素从上到下，每一个都另起一行（div元素）
• inline-block 也是从左到右（但是到达最右边时，不会把自己分成两块）

2. 宽度

• inline 宽度为内部 inline 元素的和，不能用 width 指定（没人会在inline元素里加block元素）
• block 默认自动计算宽度，可用 width 指定（永远不要在block元素里写width: 100%; 默认宽度为width: auto;）
• inline-block 结合前两者特点，可用 width（默认情况和inline元素一样，设置width时和block一样）

3. 高度

• inline 高度由 line-height 间接确定，跟 height 无关
• block 高度由内部文档流元素决定，可以设 height
• inline-block 跟 block 类似，可以设置 height

4. 有些元素会脱离文档流
   如：

• float
• position: absolute/fixed;

5.overflow溢出

• 当内容的宽度或高度大于容器的，会溢出
• 可用 overflow 来设置是否显示滚动条（如果有滚动条，inline元素默认只在第一屏内显示）

1. auto 是灵活设置
2. scroll 是永远显示
3. hidden 是直接隐藏溢出部分
4. visible 是直接显示溢出部分

• overflow 可以分为 overflow-x 和 overflow-y（不是很好用）

6.盒模型

盒模型

盒模型分为

• content-box内容盒
  内容就是盒子的边界
• border-box边框盒
  边框才是盒子的边界

宽度公式：

• content-box width=内容宽度
• border-box width=内容宽度+padding+border

7.margin合并

• 父子合并
• 兄弟合并

如何阻止合并呢：

1. 父子合并
   用padding/border挡住，或者用overflow: hidden挡住
2. 兄弟合并
   兄弟合并是符合预期的
   可以用inline-block消除

---

资料来源：饥人谷