前端之旅：完结慕课HTML+CSS课程、维基大学的CSS Challenge

July 22 2016

到上一篇博客为止，已经完成了《Head First HTML&CSS》这本书的学习，所以接下来会注重实践任务，先做一些静态页面，熟悉HTML以及CSS。
这两天的学习内容如下

终结慕课网HTML+CSS基础课程

在写我最开始的几篇博客中，已经完成了慕课网 HTML+CSS基础课程的HTML部分，这两天花了点时间完成了CSS部分，记录了一些笔记

在网页中，元素有三种布局模型：
1. 流动模型（Flow）：默认html元素流入页面的方式
2. 浮动模型 (Float)：使用float技术
3. 层模型（Layer）：层模型有三种形式：
  - 绝对定位(position: absolute)
  - 相对定位(position: relative)
  - 固定定位(position: fixed)
当元素被设置为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
- 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
- 不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
  1. 使用 table 等表格标签
  2. 设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
  3. 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
1. 使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。 css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
2. 在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下2个之一：
1. position : absolute
2. float : left 或 float:right
简单来说，只要html代码中出现以上其中之一，元素的display显示类型就会自动变为以 display:inline-block（内联块元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

维基大学 CSS Challenge

不知道是从哪里找到了这个页面 Wikiversity CSS challenges，上面列出了7个循序渐进的挑战项目，无外乎CSS的基础知识的运用，盒子模型，字体排版、以及布局等。而且对于每个挑战它甚至提供了学习资料。
目前为止我完成了前2个（其实是3个，还有一个可选Challenge 2 A），代码已经放到了github上
Challenge 2 A Demo：

:first-letter 和 ::first-letter 的区别：

对于 CSS 2， 伪元素采用单冒号前缀语法. 因为伪类也是同样的语法，所以使得两者难以区分。CSS2.1 改变了伪元素的前缀语法可以解决这个问题，现在伪元素采用双冒号前缀，并且伪类仍然采用单冒号前缀。
CSS2伪类单冒号语法已得到广泛支持时，所有支持双冒号的浏览器同样也支持旧的单冒号语法。
考虑浏览器兼容性的话，:first-letter 是一个更有效的选择; 否则， ::first-letter 更受欢迎。

未来一段时间的计划

完成CSS Challenge上面的内容
核对下百度学院上的学习路径
除了验证html、css外，还要看一些编码规范，对项目进行整理
了解Less或Sass并对模仿的项目进行重构
模仿CSS-Tricks，再用Less或Sass进行重构
学习js、jsDOM、jQ，做相关技术的项目
学习js更高级的内容

当然计划只是计划，永远赶不上变化，学习过程中也会不断调整计划