学习笔记源自：绿叶
CSS，指的是“Cascading Style Sheet（层叠样式表）”
常用属性速览
引入方式
想要在一个页面引入CSS，共有以下3种方式：外部样式表，内部样式表，行内样式表。
当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用外部样式表，就可以通过更改一个CSS文件来改变整个网站的外观。 <link rel="stylesheet" type="text/css" href="文件路径" />
内部样式表，指的是把HTML代码和CSS代码放到同一个HTML文件中。其中，CSS代码放在style标签内，style标签是放在head标签内部的。
1 | <style type="text/css"> |
行内样式表的CSS是在“标签的style属性”中定义的。
@import方式与外部样式表很相似。@import方式是先加载HTML后加载CSS，而link是先加载CSS后加载HTML。如果HTML在CSS之前加载，页面用户体验就会非常差。
选择器
选择器的不同，在于它的选择方式不同，但是它们的最终目的是相同的，就是把你想要的元素选中，这样才可以定义该元素CSS样式。
1 | 选择器 { |
最实用的5种选择器：元素选择器，id选择器，class选择器，后代选择器，群组选择器。
id选择器，id名前面必须要加上前缀“#”
class名前面必须要加上前缀英文句号（.）可以为不同的元素设置相同的class来为他们定义相同的CSS样式
后代选择器，就是选择元素内部中某一种元素的所有元素：包括子元素和其他后代元素（如“孙元素”）。父元素和后代元素必须要用空格隔开，表示选中某个元素内部的后代元素
群组选择器，指的是同时对几个选择器进行相同的操作。对于群组选择器，两个选择器之间必须要用英文逗号（,）隔开
字体
除了字体颜色，其他字体属性都是以“font”前缀开头的。
对于font-family属性，如果字体类型只有一个英文单词，则不需要加上双引号；如果字体类型是多个英文单词或是中文的，则需要加上双引号。
font-size属性取值有多种：一种是“关键字”，如small、medium、large等；另外一种是“像素值”，如10px；还有em、百分比等
严格来说，px属于相对单位，因为屏幕分辨率的不同，1px的大小也是不同的。
字体粗细（font-weight）与字体大小（font-size）是不一样的。粗细指的是字体的“肥瘦”，而大小指的是字体的“宽高”。
font-weight属性取值有两种：一种是“100~900的数值”，另一种是“关键字”。
其中100相当于lighter，400相当于normal，700相当于bold，而900相当于bolder。
有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。
color属性取值有两种，一种是“关键字”，另一种是“十六进制RGB值”。除了这两种，其实还有RGBA、HSL等
文本
字体样式针对的是“文字本身”的形体效果，而文本样式针对的是“整个段落”的排版效果。
中文段落首行一般需要缩进两个字的空间。想要实现这个效果，那么textindent值应该是font-size值的2倍。
text-align属性不仅对文本有效，对图片（img元素）也有效。
在HTML学习中，我们使用s元素实现中划线，用u元素实现下划线。但是有了CSS之后，我们都是使用text-decoration属性来实现。
使用“text-decoration:none;”去除a元素的下划线，这个技巧我们在实际开发中会大量用到。
使用line-height属性来控制一行文本的高度。
使用letter-spacing属性来控制字与字之间的距离。每一个中文汉字都被当作一个“字”，而每一个英文字母也被当作一个“字”。
word-spacing只针对英文单词而言。
边框
几乎所有的元素都可以定义边框。例如，div元素可以定义边框，img元素可以定义边框，table元素可以定义边框，span元素同样也可以定义边框
简写形式： border:1px solid red;
还有hidden、dotted、double等取值。
局部边框
推荐使用上右下左的顺序
去除边框的三种写法：如“border-bottom:0px;”“border-bottom:0;”和“border-bottom:none;
列表
在HTML中，对于有序列表和无序列表的列表项符号，都是使用type属性来定义的。
在CSS中，不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号的。
list-style-type属性是针对ol或者ul元素的，而不是li元素。
由于列表项符号不太美观，因此在实际开发中，大多数情况下我们都需要使用“list-styletype:none;”将其去掉。
如果我们想自定义列表项符号，那该怎么实现呢？ 在CSS中，我们可以使用list-style-image属性来定义列表项图片，也就是使用图片来代替列表项符号。 list-style-image:url（图片路径）;
一般情况下我们都不会用liststyle-image属性来实现，而是使用更为高级的iconfont图标技术来实现
表格
使用caption-side属性来定义表格标题的位置。
在表格加入边框后的页面效果中，单元格之间是有一定空隙的。可以使用border-collapse属性来去除单元格之间的空隙。
可以使用border-spacing属性来定义表格边框间距。
以上几种属性都是在table元素中定义的。
- border-collapse只限用于表格，不能用于其他元素
- 如果要为表格添加边框，我们一般需要同时对table、th、td这几个元素进行设置
图片
借助width和height来改变其大小。
border:1px solid red; 边框
text-align:取值; 水平对齐，很多人以为图片的水平对齐是在img元素中定义的，其实这是错的。图片是在父元素中进行水平对齐
vertical-align:取值; 垂直对齐
“vertical-align属性定义周围的行内元素或文本相对于该元素的垂直方式”。因此并不能实现img元素在div中的垂直居中
float:取值; 文字环绕
背景
定义“背景颜色”使用的是background-color属性，而定义“背景图片”则比较复杂，往往涉及以下属性
color属性用于定义“文本颜色”，而background-color属性用于定义“背景颜色”，这两个要注意区分。
背景图片与图片是不一样的，背景图片是使用CSS来实现，而图片是使用HTML来实现。两者的使用场合也不一样，大多数情况下都是使用图片，不过在某些无法使用图片的场合中，我们就要考虑背景图片形式。
background-position属性常用取值有两种：一种是“像素值”，另外一种是“关键字”
background-position:水平距离 垂直距离;` 两个值是相对该元素的左上角来说的
关键字
在实际开发中，background-position一般用于实现CSS Spirit（精灵图片）。
使用background-attachment属性来定义背景图片是随元素一起滚动还是固定不动。
超链接
定义4个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式
在实际开发中，我们只会用到两种状态：未访问时状态和鼠标经过状态。
1 | a{…} |
事实上，“:hover”伪类可以定义任何一个元素在鼠标经过时的样式。
鼠标样式
对于鼠标样式的定义，我们有两种方式：浏览器鼠标样式和自定义鼠标样式。
cursor:取值; 浏览器
一般只会用到3个：default、pointer和text。
cursor:url（图片地址）,属性值; 自定义 , 鼠标图片后缀名一般都是“.cur”
盒子模型
在“CSS盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。
内容区有3个属性：width、height和overflow。当内容过多，超出width和height时，可以使用overflow属性来指定溢出处理方式。
行内元素如span不可以设置width和height。行内元素设置的width和height无法生效，它的宽度和高度只能由内容区撑起来。可以使用display属性来将行内元素转换为块元素
内边距，又常常被称为“补白”，指的是内容区和边框之间的空间，可以看成是内容区的背景区域。
外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
CSS允许给外边距属性指定负数值，当外边距为负值时，整个盒子将向指定负值的相反方向移动，以此产生盒子的重叠效果，这就是传说中的“负margin技术”。
浮动布局
正常文档流，又称为“普通文档流”或“普通流”，也就是W3C标准所说的“normal flow”。正常文档流的简单定义：“正常文档流，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。”
脱离文档流，指的是脱离正常文档流。如果我们想要改变正常文档流，可以使用两种方法：浮动和定位。
float属性让元素向左浮动或者向右浮动，以便让周围的元素或文本环绕着这个元素。
浮动最常用于实现水平方向上的并排布局，如两列布局、多列布局
我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义“clear:both”来清除兄弟元素浮动。还有“overflow:hidden”，以及其他更为常用的伪元素。
浮动涉及的理论知识极其复杂，其中包括块元素和行内元素、CSS盒子模型、脱离文档流、BFC、层叠上下文。
优先使用浮动布局，不行再配合定位布局。
定位
固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置。
先使用“position:fixed”让元素成为固定定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置。
固定定位最常用于实现“回顶部特效”
相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。不会脱离文档流
绝对定位在几种定位方式中使用最为广泛，因为它能够很精确地把元素定位到任意你想要的位置。一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，绝对定位元素的前面或后面的元素会认为这个元素并不存在，此时这个元素浮于其他元素上面，已经完全独立出来了。
也是相对浏览器的位置。
在默认情况下，元素没有指定position属性时，这个元素就是静态定位的。