前端学习总结——CSS（一）
参考书籍《HTML5 & CSS3编程入门经典》（By Rob Larsen）
Chapter 7 层叠样式表
纪念已跪的面试
-
继承：CSS的一项强大特性，当一个属性被应用于某一元素后，该属性经常会被子元素（规则声明所在的元素中包含的元素）所“继承”（inherited）。如果另一条规则更具体地指明所应用的元素，它会覆盖
<body>元素或任何包含元素中的任何相关联的属性。 -
可以添加CSS规则的位置：
- 外部样式表（external style sheet）：将CSS规则放在一个独立文件中
- 内部样式表（internal style sheet）：位于一个
<style>元素内，该元素位于文档的<head>元素中 - 内联样式规则（inline style rule）：位于一个可以带有style特性的元素中，作为style特性的值
-
<link>元素：用于在网页中描述两个文档之间的关系。这种链接类型与<a>元素不同，因为两个文档是自动关联的——用户不必通过单击任何东西以激活链接。<link>元素永远是空元素，且当与样式表一同使用时，它必须带有两个特性：rel和href。- rel特性：必须属性。用于指定包含该链接的文档与链接指向文档间的关系。用于链接样式表时的键值是“stylesheet”
- href特性：用于指定链接指向文档的URL
- media特性：用于指定应该用于该文档的输出设备
-
<style>元素：使用时，尽管并非强制，但应该永远带有type属性 -
外部样式表的优势
-
CSS属性：CSS规则包含了两个部分：一个选择器，用于指定规则应用的元素；以及一个或多个属性，用于控制这些元素的呈现。属性有如下分组：
- 字体
- 文本
- 背景
- 边框
- 外边距
- 内边距
- 尺寸
- 定位
- 轮廓
- 表格
- 列表与标记
- 生成内容
- 分类
除此之外：还有一个新的CSS版本，即关注于“模块”（module）的CSS3
-
控制文本
- font-family属性：指定应用CSS规则的元素中所有文本所应使用的字型
- font-size属性：为字体设置尺寸
- 长度：px em ex pt in cm pc mm rem vm vh
- 绝对尺寸：xx-small x-small small medium large x-large xx-large
- 相对尺寸：smaller larger
- 百分比：2% 10% 25% 50% 100%
- font-weight：基于浏览器算法，可能取值为：normal bold bolder lighter 100 200 300 400 500 600 700 800 900
- font-style属性：指定字体为normal、italic（斜体）、oblique（伪斜体）
- font-variant属性：可能去职：normal和small-caps（小型大写字体）
-
文本格式化
- color：指定文本颜色
- text-align:指定文本在包含元素中的水平对齐
- vertical-align：指定文本你在包含元素中的垂直对齐
- text-decoration：指定文本是否应具有下划线、上划线或中划线
- text-indent：指定从左侧边框起文本的锁紧
- text-transform：指定元素内容应全部为大写、小写，或首字母大写
- text-shadow：指定文本应具有投影
- text-spacing：控制字符间宽度
- word-spacing：控制单词间的距离
- white-spacing：指定空格是否应该被压缩、保留或阻止换行
- direction：指定文本行文方向（类似于dir特性）
-
文本伪类
- first-letter
- first-line
-
选择器
- 通用选择器：由一个“星号”（*）表示
- 类型选择器：匹配所有在由逗号分隔的列表中指定的元素
- 类选择器
- id选择器：#
- 子选择器：大于号>连接符
- 后代选择器：连接符是空格
- 相邻兄弟选择器：连接符加号+
- 一般兄弟选择器：连接符~
- 特性选择器
-
长度
-
相对单位：
- px：一个像素即是屏幕分辨率中最小的单位
- em：1单位em与当前字体的高度等价。em单位是最常用于测量包含文本的元素以及控制文本间距的长度单位。通常认为该值是从小写字母m的宽度得出
- ex：应为小写字母x的高度
- rem：与根元素的字体尺寸等价——即一个“根em”
- vh：等价于百分之一的视野高度
- vw：
-
绝对单位
- pt：磅
- pc：pica
- in：英寸
- cm：厘米
- mm：毫米
-
百分比：
-
-
盒子模型
-
三个重要属性：border、margin、padding
-
对于外边距而言，当一个盒子的下外边距与另一个盒子的上外边距相遇时，只有其中盒子尺寸较大的一个会显示出来（如果两个盒子尺寸相同，则外边距为两个外边距中较大的一个）
-
border属性：
-
border-color属性：进一步设置border-bottom-color、border-right-color、border-top-color、border-left-color
-
border-style属性：指定边框为实现、虚线还是双股线，或者其他可能取值。具体如下：
- none：不存在边框（等价于border-width：0）
- solid：实心线
- dotted：一系列的点
- dashed：一系列短线
- double：两条实心线
- groove：边框具有切入效果
- ridge：与groove效果相反
- inset：使盒子看起来内嵌于页面中
- outset：使盒子看起来突出于画布之外
- hidden：与none相同，但作为表格元素的边框冲突解决方案
同理设置border-bottom-style、border-right-style、border-top-style、border-left-style
-
border-width属性：通常以像素为单位。同样可设置border-bottom-width、border-right-width、border-top-width、border-left-width
-
缩略形式表达边框属性，如p {border: 4px solid red;}值与值之间除空格外不能有任何内容。同理可设置border-bottom、border-right、border-top、border-left
-
-
padding属性：多数使用像素指定，可以使用任何之前介绍过的长度单位、百分比或关键字inherit。元素的内边距默认不会继承，除非使用关键字inherit。可指定每一边的不同内边距大小：padding-bottom、padding-top、padding-left、padding-right
-
marging属性：取值与padding属性完全相同
-
内容盒子的尺寸
- height：盒子高度
- width：盒子宽度
- line-height：文本行的高度（即行距）
- max-height：盒子最大高度
- min-height：盒子最小高度
- max-width：盒子最大宽度
- min-width：盒子最小宽度
-
overflow：用于处理当盒子内容比所允许空间更大时：
- hidden：溢出内容被隐藏
- visible：溢出内容在盒子外可见
- scroll：盒子将添加滚动条以允许用户滚动查看其内容
- auto：盒子在必要时添加滚动条
- inherit：盒子从父元素继承overflow属性
-
W3C盒子模型和IE盒子模型
-
