返回首页 - Notes - 2017

《CSS 设计指南(第3版)》读书笔记


HTML 标记与文档结构

常见块级标签

常见行内标签

搜索引擎会把 h1 标签的内容当成仅次于 title 标签的搜索关键字来源

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

几乎所有 HTML 标签的 display 属性,不是 block 就是 inline,但 table 标签例外


CSS 工作原理

存在三种样式

  1. 行内样式:只影响它所在的标签,且总会覆盖嵌入样式和链接样式
  2. 嵌入样式:只影响它所在的页面,且总会覆盖链接样式
  3. 链接样式:集中保存在外部独立的样式文件中,可以影响整个网站

还可以用 @import url(xxx.css) 指令在一个样式表文件中引入另一个样式表文件

CSS 选择符的种类

  1. 上下文选择符:基于祖先或同胞元素选择元素
  2. ID和类选择符:基于 idclass 属性选择元素
  3. 属性选择符:基于属性的有无和特征选择元素

上下文选择符

ID 和类选择符

属性选择符

伪类

伪元素

CSS 中有很多属性可以继承,其中相当一部分和文本有关;也有很多属性不能继承,主要涉及元素盒子的定位和显示方式

浏览器的样式来源

  1. 浏览器默认样式表
  2. 用户样式表
  3. 作者的链接样式
  4. 作者的嵌入样式
  5. 作者的行内样式

层叠规则

  1. 找到应用给每个元素和属性的所有声明
  2. 按照顺序和权重排序。依次检查浏览器的样式来源,后面的样式覆盖前面的样式,!important 指令可以人为指定最高优先级
  3. 按特指度排序
  4. 特指度相同时,后声明的规则覆盖前面声明的规则

特指度的计算(针对选择符而言)

  1. 按照 ICE 的公式进行计算,其中 I 是指的 idC 指的 classE 指的 element
  2. 选择符中有一个 id,则给 I 位置加 1
  3. 选择符中有一个 class,则给 C 位置加 1
  4. 选择符中有一个标签名,则给 E 位置加 1
  5. 最终得到一个三位数,原则上,数值大的特指度高。但是,0-2-00-1-10 的特指度高,这个需要清楚

简化版特指度的计算

  1. 包含 id 的选择符胜过包含 class 的选择符,包含 class 的选择符胜过包含标签名的选择符
  2. 行内样式胜过嵌入样式,嵌入样式胜过链接样式
  3. 后声明的胜过先声明的
  4. 设定的样式胜过继承的样式,就算继承的样式特指度再高

CSS 的三类属性值

绝对值

单位缩写 释义
in 英寸
cm 厘米
mm 毫米
pt
pc 皮卡
px 像素

相对值

单位缩写 释义
em 一种字体中字母 M 的宽度
ex 一种字体中字母 x 的高度
% 百分比

颜色值的种类


定位元素

CSS 技术的核心,就是元素定位

盒模型可见版式的三个重要属性

元素盒子的三组重要属性,每组分 上(top)、右(right)、下(bottom)、左(left) 四个方向

上述三组属性的属性值,可以有好几种写法,可繁可简

盒子属性的三种粒度

盒子边框的三个属性

推荐在样式表的一开始就将所有元素的内边距和外边距都设为 0,真正有元素需要边距时再加:* { margin: 0; padding: 0; }

相邻元素,垂直外边距会叠加,但水平外边距不叠加

垂直外边距的叠加规则是:两上下相邻元素,两者的间距大小取决于外边距大者,而不是两外边距之和

涉及到文本元素的外边距,一般左右外边距的单位使用 px,而上下外边距的单位使用 em

盒子的大小

浮动和清除

文本绕排图片

  1. 在标记中先写图片,然后再写环绕它的文本
  2. 让图片浮动到左侧,从而让文本绕排到右侧

形象一点的说法是,浮动一个元素时,是在要求浏览器把它往上方推,直到碰到父元素的内边界;后面的元素不再认为浮动元素在文档流中挡在它的前面了,因而它会占据父元素左上角的位置;不过,它的内容会绕开浮动的元素

需要注意一点,浮动非图片元素时,必须给它设定宽度;图片就无所谓了,因为它自身就有宽度

创建分栏

  1. 在文本绕排的基础上,对其他想让它成为一栏的元素也浮动到左侧
  2. 另外给这新的浮动元素设定宽度即可

浮动元素脱离了文档流,导致其父元素也看不到它了,因而也不会包围它

围住浮动元素的三种方法

  1. 给父元素添加属性 overflow: hidden,强制父元素包围其浮动的子元素
  2. 先给父元素添加属性 float: left; width: 100%;,让父元素也浮动起来且宽度与它自身的父元素同宽;然后给其后面的元素添加属性 clear: left
  3. 先给父元素添加一个类 clearix,然后加上以下 CSS 规则:
    .clearfix:after {
      content: '.';
      display: block;
      height: 0;
      visibility: hidden;
      clear: left;
    }
    

实际上,overflow: hidden 的真正用途是将子元素超过尺寸的内容剪切掉;另一个用途就是迫使父元素包含其浮动的子元素

上述第三种包围方法的原理是,给父元素的最后添加一个非浮动的子元素,然后清除该子元素;由于父元素一定会包围其非浮动的子元素,而且清除会让这个子元素位于浮动元素的下方,这样一来,父元素就一定会包含这个子元素,以及,这个子元素前面的其它浮动元素;这就达到了让父元素包围浮动子元素的目的

而且第三种方法还可以用于没有父元素的情况


date:2017-05-13、2017-05-17、2017-05-18、2017-05-19、2017-05-21、2017-05-22、2017-05-25、2017-05-27