CSS简要发展历史

CSS1

解决网页排版布局和装饰问题，第一个有“层叠（casading）”概念的语言

CSS2

表现和内容分离

CSS2.1

对CSS2的修正、扩展，代替CSS2

CSS3

规范模块化发展，样式丰富、炫酷，提高网站的可维护性以及性能速度

层叠、优先级

基础选择器

＃id——ID选择器。Tagname——类型选择器或者标签选择器。

.class——类选择器。＊——通用选择器。该选择器匹配所有元素

组合器

子组合器（＞）——匹配的目标元素是其他元素的直接后代。如：.parent＞.child。相邻兄弟组合器（＋）——匹配的目标元素紧跟在其他元素后面。如：p＋h2。

通用兄弟组合器（～）——匹配所有跟随在指定元素之后的兄弟元素，如：li.active～li。复合选择器 多个基础选择器可以连起来使用，如：h1．page—header。

属性选择器

通过约束属性值，div［data-title＝＂aaa＂］

伪类选择器

选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。如：first—child，：hover

伪元素选择器

匹配在文档中没有直接对应HTML元素的特定部分，或插入内容。如h2：：first—letter，div：：before

逻辑选择器

较新的选择器：is（）：has（）：where（）：not（）

继承

• 大部分具有继承特性的属性跟文本相关：

color、font、font-family、font-size、font-weight、font-variant、font- style、line-height、letter-spacing、text-align、text-indent、text- transform、white-space以及word-spacing

还有少部分列表、表格的属性

• 可以使用inherit关键字显式指定一个属性值从其父元素继承

CSS的值和单位

单位

文字类：比如像initial这种关键字，颜色、位置等等

数值类：比如z—index：1这种数值，或者带有单位的数值、百分比等

函数生成：比如calc（），min（），max（）等

值

绝对长度：px，pt，cm， in...

相对长度: em, rem, ex, rex... vw, vh, vmin, vmax...

角度：deg, grad, turn, rad

时间：s， ms

分辨率： dpi， dpcm， dppx

盒模型

padding、border、margin中，只有margin可以设置负值

设置左边或顶部的负外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠

如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来