CSS设计指南（第三版）【中译】2013年 作者：[英] Cha

笔记整理（第一本前端书籍）

一、 html文档和标记

• html是超文本标记语言，它通过为超文本添加标记的方式，来赋予超文本内容的网页语义，即给网页内容赋予某些用户代理能够理解的含义如浏览器，从而解析并显示在网页上。

• 属性="属性值":为浏览器提供有关标签的额外信息。比如alt（屏幕阅读设备上），src（引入源文件）等

• 段落和标题：h1不仅是最大最突出的标题（除非你用CSS缩小它的字号），搜索引擎也会将其视为仅次于title标签的另一个搜索关键词的来源。

• 复合元素：创建列表，表单和表格等用户界面组件，比如<ul><li></li></ul>

• 嵌套标签：要在一个标签里嵌套另一个标签（也就是前者的开标签写在后者的开标签之前），必须要先关闭后一个标签再关闭前面那个标签。HTML 文档的结构正是通过类似这样的标签嵌套，以及就此建立起来标签间的“父－子”关系形成的。

• 文档流： HTML 元素会按照它们各自在标记中出现的先后顺序，依次从页面上方“流向”下方。

• ★块级元素和行内元素：几乎所有 HTML 元素的 display 属性值要么为 block，要么为 inline。最明显的一个例外是 table 元素，它有自己特殊的 display 属性值。

• 行内元素盒子：盒子会尽可能地收缩内容，在水平方向上并排显示，----设置width，height无效（可以设置line-height），margin上下无效，padding上下无效，border有效。

• 块级元素盒子：盒子会默认拓展到和父元素同宽，每个元素占据一行，垂直方向上堆叠排列，从新行开始结束接着一个断行。

• html实体：在前面的例子中，两个实体的名字分别是“left-double-quote”（左双引号）和“right-double-quote”（右双引号）
  的简写即&#ldquo和&#rdquo

• 文档结构模型：html文档结构对应文档对象模型（DOM），dom是从浏览器的视角观察页面的元素和每个元素间的相对关系，由此得到一个家族树即DOM Tree，在css中引用dom中特定的位置，就可以选中相应的html元素并且修改样式属性。

二、CSS的工作原理

• css添加到页面中的三种方式：行内式，嵌入式，外部式，@import url（##）

• CSS 规则分两部分，即选择符和声明。声明又由两部分组成，即属性和值。声明包含在一对花括号内选择符

• css的选择符：

1.上下文选择符
1、紧邻同胞选择符 +
2、一般同胞选择符 ~
3、子选择符 >

 2.id和class 选择符 
    可以给 id 和 class 属性设定任何值，但不能以数字或特殊符号开头。

 3.属性选择符
    1、属性名选择符[property]
    2、属性值选择符[property="value"]
        1、^= "value" 包含某个值开头的选择符
        2、$="value" 某个值结尾的选择符
        3、~="value" 包含某个值的选择符
 4.伪类选择符
    1、UI伪类选择符
        链接伪类选择符 :link :visited :hover :active
        focus 伪类
        target 伪类
        hover 伪类
    2、结构伪类
        :first-child :last-child :nth-child
        :first-type-of...
 5.伪元素选择符
    ::first-letter
    ::first-line
    ::before ::after
    (搜索引擎不会取得伪元素的信息（因为它在标记中并不存在）。因此，不要通过伪元素添加你想让搜索引擎索引的重要内容。)
 6.通用选择符 *

• css的继承：
  CSS 中有很多属性是可以继承的，其中相当一部分都跟文本有关，比如颜色、字体、字号。
  然而，也有很多 CSS属性不能继承，因为继承这些属性没有意义。
  这些不能继承的属性主要涉及元素盒子的定位和显示方式，比如边框、外边距、内边距。

• 层叠：
  就是层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程，
  目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用哪个值。

• 浏览器层叠各个来源样式的顺序：
  浏览器默认样式->用户样式表->链接（外部）样式表[按照他们链接到页面的先后顺序]->嵌入式样式->行内样式

• 层叠规则：按照顺序和权重来进行，空格!important 分号（;）用于加重声明的权重，如 p {color:red !important;}

• CSS的属性值分为三类：文本值，数字值，颜色值

三、定位元素和背景

• 元素盒子的属性主要有：边框属性（border） 内边距属性（padding） 外边距属性（margin）

• 重置样式表 reset.css。这个样式表不仅重置了外边距和内边距，还对很多元素在跨浏览器显示时的外观进行了标准化。

• 垂直方向上的外边距不叠加，水平方向上的外边距叠加。

• box-sizing 属性，通过它可以将有宽度的盒子也设定成具有默认的auto 状态下的行为

• 浮动与清除：

把元素从常规的文档流中拿出来，一是可以实现传统出版物上文字围绕图片环绕的效果，二是可以让原来垂直方向排列的元素变成水平排列，即上下堆叠变成左右并排，从而实现布局中的分栏。

 浮动的元素脱离了常规的文档流后，紧跟在其后的元素会在空间允许的条件下向上提升。

 浮动非图片元素时，必须给它设定宽度，否则后果难以预料。图片无所谓，因为它本身有默认的宽度。

 浮动元素脱离了文档流，其父元素也看不到它了，因而也不会包围它。围住浮动元素的三种方法：
 * 1.为父元素添加overflow:hidden，overflow:hidden本来的作用是防止元素被超大的内容撑大，它的另一个作用是迫使父元素围住浮动的子元素。下拉菜单的顶级元素不能使用
 * 2.为父元素设定浮动，迫使父元素围住浮动的子元素，但要为父元素其后的元素设置clear:both。
 * 3.在父元素最后添加子元素作为清除元素，迫使父元素围住子元素。
    1.添加空的div元素，并设置clear:both
    2.父元素添加class="clearfix",并设置.clearfix::after {content=".";display:block;height:0;visibility:hidden;clear:both;}

 没有父元素的时候如何清除浮动： 用.clearfix规则.

• 定位：css布局的核心是position，position属性有4个值：static relative absolute fixed 默认值是static

  1.静态定位：按照文档流的顺序上下堆叠

  2.相对定位：相对它原来在文档流的位置，可以用top、left、bottom、right，但它原来占据的空间没有改变，其他元素也没有改变。

  3.绝对定位：使元素彻底脱离文档流，元素原来占据的空间被"回收了"，一般是相对顶级元素body来定位。

  4.固定定位：使元素彻底脱离文档流，和绝对定位的不同之处在于定位上下文是视口（浏览器窗口或者手持设备的屏幕），它不会随滚轮的滚动而滚动

注意： 外部 div 改为相对定位之后，其后代中绝对定位的元素就会按照 top 和 left 属性的设定，相对于外部 div 定位

• 显示属性：display的值有：inline，block，none，通过显示属性行内元素和块级元素可以相互转化。

• 背景：css中每个盒子都由两个图层组成：元素的前景层包括内容和边框；元素的背景层应用在整个元素盒子的后面（3d）
  其中，背景图片在背景颜色之前。

  background相关属性：
  background-color background-image background-repeat background-position background-size background-attachment

  background-repeat的值：
  no-repeat,repeat-x,repeat-y,round,space(增大图片间的空白)

  background-position有5个关键自值：
  top、left、bottom、right和 center,也可以设置数字值如(30%,40%)，还能设置负值

  background-size的值有：
  50%，cover，contain，100px 50px

  background-attachment背景粘附属性，它的默认值是scroll，即背景图片随元素移动，如果把值设为fixed，背景图片不会随元素滚动。

  简写：background: #fff url(4.png) no-repeat scroll bottom left;

  background-clip 控制背景绘制区域的范围

  background-origin 背景区域的原点

  以下 CSS3 属性必须加 VPS：
  border-image translate
  linear-gradient transition
  radial-gradient background*
  transform background-image*
  transform-origin

 * 针对背景图片或渐变

linear-gradient线性渐变属性 background:linear-gradient(#e86a43, #fff 25%, #64d1dd 25%, #64d1dd 75%,#fff 75%, #e86a43)

radial-gradient放射性渐变属性 如 background: radial-gradient(#e86a43, #fff,#123456)

四、字体和文本

• 字体的来源：
  用户机器上安装的字体；保存在第三方网站上的字体；保存在web服务器上的字体（可以使用@font-face随网页一起发给浏览器）

• 字体属性：font font-size（笔须）font-family（必须） font-style font-weight font-variant

• 文本属性：
  text-indent letter-spacing word-spacing text-decoration text-align line-height text-transform vertical-align

• text-indent具有继承性,设定块级盒子内容相对于包含元素的起点。默认情况下，这个起点就是包含元素的左上角.
  注意：对段落p等块状元素有用，span设置无效，因为span没有有效的宽度，但可以为span设置margin-left一样效果。

• letter-spacing 为正值时增大字符间距，为负值时缩小间距。

• word-spacing 单词间距与字符间距非常相似，区别在于它只调整单词间距，而不影响字符间距。
  注意： CSS 把任何两边有空白的字符和字符串都视作“单词”

• 文本装饰属性 text-decoration 值有：underline none overline line-through blink

• 文本对齐属性 text-align 值有：left right center justify
  center值也可以用来在较大的元素中居中较小的固定宽度的元素或图片.

• 行高line-height 值是任何数字值，不需要单位, 也可以添加单位，如果只设置值忘记添加单位，会成倍放大元素的高度

• 文本转换属性 text-transform 值有：uppercase lowercase none captalize

• 垂直对齐属性 vertical-align 值有：sub super top middle bottom或者任意长度值如60%
  注意： vertical-align 以基线为参照上下移动文本，但这个属性只影响行内元素。想在垂直方向上对齐块级元素，必须把其 display属性设定为 inline

• 字体打包：

     <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
     @font-face {
     /*这就是将来在字体栈中引用的字体族的名字*/
     font-family:'UbuntuTitlingBold';
     src: url('UbuntuTitling-Bold-webfont.eot');
     src: url('UbuntuTitling-Bold-webfont.eot?#iefix')
     format('embedded-opentype'),
     url('UbuntuTitling-Bold-webfont.woff')
     format('woff'),
     url('UbuntuTitling-Bold-webfont.ttf')
     format('truetype'),
     url('UbuntuTitling-Bold-webfont.
     svg#UbuntuTitlingBold') format('svg');
     font-weight: normal;
     font-style: normal;
     }