【注意】内容不再维护。

HTML+CSS 基础课程-慕课网

2017 年一个心愿，认真学习前端，成为公司里最厉害前端工程师。Flag 立的还是很大的。

第 1 章 HTML 介绍

  1. HTML 是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
  2. CSS 样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
  3. JavaScript 是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用 JavaScript 来实现的。

第 2 章 认识标签(第一部分)

常常会听到一个词，语义化。说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）。

比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。 语义化可以给我们带来什么样的好处呢？

  • 更容易被搜索引擎收录。
  • 更容易让屏幕阅读器读出网页内容。

1、在网页上要展示出来的页面内容一定要放在 body 标签中；

2、如果想在网页上显示文章，这时就需要 <p> 标签了，把文章的段落放到 <p> 标签；

<p>段落文本</p>

3、标题标签一共有 6 个，h1、h2、h3、h4、h5、h6 分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1> 是最高的等级：

<hx>标题文本</hx>   <!-- x为1-6 -->

4、在一段话中特别强调某几个文字，这时候就可以用到 <em> 或 <strong> 标签。在浏览器中 <em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用 <strong> 表示强调：

<em>需要强调的文本</em>

<strong>需要强调的文本</strong>

5、<span> 标签是没有语义的，它的作用就是为了设置单独的样式用的：

<span>文本</span>

6、想引用某个作家的一句诗，这样会使你的文章更加出彩，那么 <q> 标签是你所需要的：

<q>引用文本</q>

7、<blockquote> 的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。

<blockquote>引用文本</blockquote>

8、使用 <br> 标签分行显示文本

XHTML 1.0 写法：<br />

HTML 4.01 写法：<br>

注意：现在一般使用 XHTML 1.0 的版本的写法（其它标签也是），这种版本比较规范。

9、为你的网页中添加一些空格 &nbsp;

10、<hr> 添加水平横线

HTML 4.01 版本：<hr>

XHTML 1.0 版本：<hr />

<hr /> 标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了 CSS 样式表之后，都可以对其修改。

11、联系地址信息如公司的地址就可以 <address> 标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份：

<address>联系地址信息</address>

12、网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用 <code> 标签：

<code>var i=i+300;</code>

13、如果是多行代码，可以使用 <pre> 标签：

<pre>语言代码段</pre>

<pre> 标签的主要作用：预格式化的文本。被包围在 </pre> 元素中的文本通常会保留空格和换行符。 注意：<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是 <pre> 标签的一个常见应用就是用来展示计算机的源代码。

第 3 章 认识标签(第二部分)

1、使用 ul，添加列表：

<ul>
  <li>信息</li>
  <li>信息</li>
  ......
</ul>

2、使用 ol，添加有前后顺序的列表：

<ol>
  <li>信息</li>
  <li>信息</li>
  ......
</ol>

3、把一些独立的逻辑部分划分出来，放在一个 <div> 标签中，这个 <div> 标签的作用就相当于一个容器：

<div>…</div>

4、给 div 命名，使逻辑更加清晰。可以为这一个独立的逻辑部分设置一个名称，用 id 属性来为 <div> 提供唯一的名称：

<div id="版块名称">…</div>

5、table 标签，认识网页上的表格：

<table>…</table>：整个表格以 <table> 标记开始、</table> 标记结束

<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上 <tbody> 标签后，这个表格就要等表格内容全部下载完才会显示

<tr>…</tr>：表格的一行，所以有几对 tr 表格就有几行。

<td>…</td>：表格的一个单元格，一行中包含几对 <td>...</td>，说明一行中就有几列

<th>…</th>：表格的头部的一个单元格，表格表头

6、caption 标签，为表格添加标题和摘要：

摘要：摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性（语义化），使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容：

<table summary="表格简介文本"></table>

标题：用以描述表格内容，标题的显示位置：表格上方：

<table>
  <caption>
    标题文本
  </caption>
  <tr>
    <td>…</td>
    <td>…</td>
    …
  </tr>
  …
</table>

第 4 章 认识标签(第三部分)

1、使用 <a> 标签可实现超链接：

<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

title 属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。

2、在新建浏览器窗口中打开链接：

<a href="目标网址" target="_blank">click here!</a>

3、使用 mailto 在网页中链接 Email 地址：

<a href="mailto:yy@imooc.com?subject=主题名称&body=邮件内容&cc=yy@mail.com"></a>

4、<img> 为网页插入图片：

<img src="图片地址" alt="下载失败时的替换文本" title="提示文本" />

第 5 章 与浏览者交互，表单标签

1、form 标签与用户交互：

表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

action：浏览者输入的数据被传送到的地方，比如一个 PHP 页面(save.php)

method：数据传送的方式（get/post）

<form method="post/get" action="save.php">
  <label for="username">用户名:</label>
  <input type="text" name="username" />
  <label for="pass">密码:</label>
  <input type="password" name="pass" />
</form>

2、文本输入框、密码输入框：

  • type：当 type="text" 时，输入框为文本输入框；当 type="password" 时, 输入框为密码输入框
  • name：为文本框命名，以备后台程序使用
  • value：为文本输入框设置默认值（一般起到提示作用）
<input type="text/password" name="名称" value="文本" />

3、文本域，支持多行文本输入：

<textarea rows="行数" cols="列数">文本</textarea>

注意：这两个属性可用 CSS 样式的 width 和 height 来代替：col 用 width、row 用 height 来代替。

4、使用单选框、复选框，让用户选择：

type：当 type=“radio” 时，控件为单选框；当 type=“checkbox” 时，控件为复选框

注意：同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称"radioLove"，这样同一组的单选按钮才可以起到单选的作用。

<input type="radio/checkbox" value="值" name="名称" checked="checked" />

5、使用下拉列表框，节省空间：

设置 selected="selected" 属性，则该选项就被默认选中：

<select>
  <option value="看书">看书</option>
  <option value="旅游" selected="selected">旅游</option>
  <option value="运动">运动</option>
  <option value="购物">购物</option>
</select>

6、使用提交按钮，提交数据：

<input type="submit" value="提交" />

7、使用重置按钮，重置表单信息：

<input type="reset" value="重置" />

8、form 表单中的 label 标签：

label 标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该 label 标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该 label 标签相关连的表单控件上）：

<label for="控件id名称"></label>

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

<form>
  <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email" />
</form>

第 6 章 开始学习 CSS，为网页添加样式

  1. 认识 CSS 样式。CSS 全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义 HTML 内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等
  2. CSS 样式的优势。批量定义样式
  3. CSS 代码语法。CSS 样式由 选择符 和 声明 组成，而 声明 又由 属性 和 值 组成
    • 选择符：又称选择器，指明网页中要应用样式规则的元素
    • 声明：在英文大括号 {} 中的的就是声明，属性和值之间用英文冒号 : 分隔。当有多条声明时，中间可以英文分号 ; 分隔，如下所示：
p {
  font-size: 12px;
  color: red;
}
  • 最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号
  • 为了使用样式更加容易阅读，可以将每条代码写在一个新行内

4、CSS 注释代码

用 /*注释语句*/ 来标明（HTML 中使用 <!--注释语句-->）

第 7 章 CSS 样式基本知识

1、内联式 CSS 样式

内联式 CSS 样式表就是把 CSS 代码直接写在现有的 HTML 标签中

<p style="color:red">这里文字是红色。</p>

2、嵌入式 CSS 样式

嵌入式 CSS 样式，就是可以把 CSS 样式代码写在 <style type="text/css"></style> 标签之间

<style type="text/css">
  span {
    color: red;
  }
</style>

3、外部式 CSS 样式

外部式 CSS 样式（也可称为外联式）就是把 CSS 代码写一个单独的外部文件中，这个 CSS 样式文件以 .css 为扩展名，在 <head> 内（不是在 <style> 标签内）使用 <link> 标签将 CSS 样式文件链接到 HTML 文件内

<link href="base.css" rel="stylesheet" type="text/css" />
  • CSS 样式文件名称以有意义的英文字母命名，如 main.css
  • rel="stylesheet" type="text/css" 是固定写法不可修改
  • <link> 标签位置一般写在 <head> 标签之内

4、三种方法的优先级

内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提：嵌入式 css 样式的位置一定在外部式的后面。其实总结来说，就是 就近原则（离被设置元素越近优先级别越高）

第 8 章 CSS 选择器

1、什么是选择器？

每一条 CSS 样式声明（定义）由两部分组成

选择器 {
    样式;
}

2、标签选择器

标签选择器其实就是 HTML 代码中的标签。如右侧代码编辑器中的 <html>、<body>、<h1>、<p>

p {
  font-size: 12px;
  line-height: 1.6em;
}

3、类选择器

.类选器名称{css样式代码;}

4、ID 选择器

#ID选择器名称{css样式代码;}

5、类和 ID 选择器的区别

相同点：可以应用于任何元素

不同点：

  • ID 选择器只能在文档中使用一次
  • 可以使用类选择器词列表方法为一个元素同时设置多个样式（不能使用 ID 词列表）
<style>
  .stress {
    color: red;
  }
  .bigsize {
    font-size: 25px;
  }
</style>
<p>
  到了<span class="stress bigsize">三年级</span
  >下学期时，我们班上了一节公开课...
</p>

6、子选择器

子选择器 > 用于选择指定标签元素的第一代子元素

.food > li {
  border: 1px solid red;
}

7、包含（后代）选择器

包含选择器 空格 用于选择指定标签元素下的后辈元素

.first span {
  color: red;
}

总结：> 作用于元素的第一代后代，空格 作用于元素的所有后代。

8、通用选择器

通用选择器 * 作用是匹配 HTML 中所有标签元素

* {
  color: red;
}

9、伪类选择符

伪类选择符，它允许给 HTML 不存在的标签（标签的某种状态）设置样式，比如说我们给 HTML 中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover {
  color: red;
}

10、分组选择符

HTML 多个标签元素设置同一个样式时，可以使用分组选择符 ,

h1,
span {
  color: red;
}

它相当于：

h1 {
  color: red;
}
span {
  color: red;
}

第 9 章 CSS 继承、层叠和特殊性

1、继承

CSS 的某些样式是具有继承性的。继承是一种规则，它允许样式不仅应用于某个特定 HTML 标签元素，而且应用于其后代。

比如下面代码：如某种颜色应用于 p 标签，这个颜色设置不仅应用 p 标签，还应用于 p 标签中的所有子元素文本，这里子元素为 span 标签

p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

但注意有一些 CSS 样式是不具有继承性的，例如：

p{border:1px solid red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

在上面例子中它代码的作用只是给 p 标签设置了边框为 1 像素、红色、实心边框线，而对于子元素 span 是没用起到作用的

2、特殊性

有的时候我们为同一个元素设置了不同的 CSS 样式代码，那么元素会启用哪一个 CSS 样式

p{color:red;} .first{color:green;}

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

p 和 .first 都匹配到了 p 这个标签上，那么会显示哪种颜色呢？green 是正确的颜色。因为浏览器是根据权值来判断使用哪种 css 样式的，权值高的就使用哪种 css 样式。下面是权值的规则：

标签 的权值为 1，类选择符 的权值为 10，ID选择符 的权值最高为 100

p {
  color: red;
} /*权值为1*/
p span {
  color: green;
} /*权值为1+1=2*/
.warning {
  color: white;
} /*权值为10*/
p span.warning {
  color: purple;
} /*权值为1+1+10=12*/
#footer .note p {
  color: yellow;
} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有 0.1，所以可以理解为继承的权值最低

3、层叠

层叠就是在 html 文件中对于同一个元素可以有多个 CSS 样式存在，当有相同权重的样式存在时，会根据这些 CSS 样式的前后顺序来决定，处于最后面的 css 样式会被应用。

p{color:red;} p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

最后 p 中的文本会设置为 green。所以 CSS 样式优先级：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

4、重要性

使用 !important 为某些样式设置具有最高权值

p{color:red!important;} p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

这时 p 段落中的文本会显示的 red

注意：!important 要写在分号的前面

当网页制作者不设置 CSS 样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住 !important 优先级样式是个例外，权值高于用户自己设置的样式

第 10 章 CSS 格式化排版

1、字体

body {
  font-family: "宋体";
}

这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）

现在一般网页喜欢设置“微软雅黑”，如下代码：

body {
  font-family: "Microsoft Yahei";
}

或

body {
  font-family: "微软雅黑";
}

注意：第一种方法比第二种方法兼容性更好一些。使用微软雅黑，没有版权问题吗？）

2、字号、颜色

body {
  font-size: 12px;
  color: #666;
}

3、粗体、斜体、下划线、删除线

p span {
  font-weight: bold;
}
p a {
  font-style: italic;
}
p a {
  text-decoration: underline;
}
.oldPrice {
  text-decoration: line-through;
}

4、段落排版 - 缩进

p {
  text-indent: 2em;
}

注意：2em 的意思就是文字的 2 倍大小

5、段落排版 - 行间距（行高）

p {
  line-height: 1.5em;
}

6、段落排版 - 中文字间距、字母间距

h1 {
  letter-spacing: 50px; // 中文字间隔、字母间隔设置
  word-spacing: 50px; // 单词间距设置
}

7、段落排版 - 对齐   为块状元素中的文本、图片设置居中/左/右

h1 {
  text-align: center/left/right;
}

第 11 章 CSS 盒模型

1、元素分类 HTML 中标签元素大体被分为三类：块状元素、内联元素（又叫行内元素）和内联块状元素。常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

2、块级元素

在 HTML 中 <div>、 <p>、<h1>、<form>、<ul> 和 <li> 就是块级元素。设置 display:block 就是将元素显示为块级元素。

如下代码就是将内联元素 a 转换为块状元素：

a {
  display: block;
}

块级元素特点：

  • 每个块级元素都从新的一行开始，并且其后的元素也另起一行；
  • 元素的高度、宽度、行高以及顶和底边距都可设置；
  • 元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度；

3、内联元素

在 HTML 中，<span>、<a>、<label>、 <strong> 和 <em> 就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码 display:inline 将元素设置为内联元素。

如下代码就是将块状元素 div 转换为内联元素，从而使 div 元素具有内联元素特点

div {
  display: inline;
}

内联元素特点：

  • 和其他元素都在一行上；
  • 元素的高度、宽度及顶部和底部边距不可设置；
  • 元素的宽度就是它包含的文字或图片的宽度，不可改变；

4、内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。<img>、<input> 标签就是这种内联块状标签：

div {
  display: inline-block;
}

inline-block 元素特点：

  • 和其他元素都在一行上；
  • 元素的高度、宽度、行高以及顶和底边距都可设置；

5、盒模型

  • 内填充（padding）：页面元素与内容之间的距离
  • 外边距（margin）：两个盒子模型之间的距离
  • 边框（border）
  • 内填充、外边距、边框都有 4 个方向（如内填充分为 padding-top/padding-bottom/padding-left/padding-right）

注意：内部元素的实际高度是：内容高度+上下内填充高度+上下边框的高度，宽度同理

6、边框

边框可以设置它的粗细、样式和颜色

div {
  border: 2px solid red;
}

上面是 border 代码的缩写形式，分开写：

div {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

注意：

  • border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）
  • border-color（边框颜色）中的颜色可设置为十六进制颜色，如：border-color:#888;
  • border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick，最常还是用象素（px）

单独设置某一边框

div {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
  border-right: 1px solid red;
  border-left: 1px solid red;
}

7、宽度和高度

CSS 定义的宽（width）和高（height），指的是填充以里的内容范围

因此一个元素实际宽度（盒子的宽度）= 左边界 + 左边框 + 左填充 + 内容宽度 + 右填充 + 右边框 + 右边界

一个元素实际宽度

div {
  width: 200px;
  padding: 20px;
  border: 1px solid red;
  margin: 10px;
}

元素的实际长度为：10px + 1px + 20px + 200px + 20px + 1px + 10px = 262px

元素的实际长度

9、填充

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左（顺时针）

div {
  padding: 20px 10px 15px 30px;
}

可以分开写上面代码：

div {
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 30px;
}

如果上、右、下、左的填充都为 10px; 可以这么写：

div {
  padding: 10px;
}

如果上下填充一样为 10px，左右一样为 20px，可以这么写：

div {
  padding: 10px 20px;
}

10、边界

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左

div {
  margin: 20px 10px 15px 30px;
}

其他同 padding

第 12 章 CSS 布局模型

1、CSS 布局模型

如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。CSS 包含 3 种基本的布局模型，用英文概括为：Flow、Layer 和 Float

  • 流动模型（Flow）
  • 浮动模型 (Float)
  • 层模型（Layer）

2、流动模型

流动（Flow）是默认的网页布局模式。流动布局模型具有 2 个比较典型的特征：

  • 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为 100%。实际上，块状元素都会以行的形式占据位置
<div id="box2">box2</div>
<!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<h1>标题</h1>
<!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<p>
  文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。
</p>
<!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<div id="box1">box1</div>
<!--块状元素，由于设置了width:300px，宽度显示为300px-->

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示

<a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em>
<strong>强调</strong>

3、浮动模型

块状元素这么霸道都是独占一行，设置元素浮动可以实现让两个块状元素并排显示

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

<style>
  div {
    width: 200px;
    height: 200px;
    border: 2px red solid;
    float: left;
  }
</style>

<div id="div1"></div>
<div id="div2"></div>

4、层模型

层布局模型就像是图像软件 PhotoShop 中非常流行的图层编辑功能一样，每个图层能够精确定位操作。网页上局部使用层布局是有其方便之处的

CSS 定义了一组定位（positioning）属性来支持层布局模型

  • 绝对定位（position: absolute）
  • 相对定位（position: relative）
  • 固定定位（position: fixed） 如果想为元素设置层模型中的绝对定位，需要设置 position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用 left、right、top、bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于 body 元素，即相对于浏览器窗口。

4、层模型 - 绝对定位

如果想为元素设置层模型中的绝对定位，需要设置 position:absolute （表示绝对定位），这条语句的作用将元素从文档流中拖出来，然后使用 left、right、top、bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于 body 元素，即相对于浏览器窗口

如下面代码可以实现 div 元素相对于浏览器窗口向右移动 100px，向下移动 50px

<style>
  div {
    width: 200px;
    height: 200px;
    border: 2px red solid;
    position: absolute;
    left: 100px;
    top: 50px;
  }
</style>

<div id="div1"></div>

层模型 - 绝对定位 | 400x0

5、层模型 - 相对定位

如果想为元素设置层模型中的相对定位，需要设置 position:relative（表示相对定位），它通过 left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按 static(float) 方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定，偏移前的位置保留不动

<style>
  #div1 {
    width: 200px;
    height: 200px;
    border: 2px red solid;
    position: relative;
    left: 100px;
    top: 50px;
  }
</style>

<div id="div1"></div>

什么叫做“偏移前的位置保留不动”呢？

<body>
  <div id="div1"></div>
  <span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>

6、层模型 - 固定定位

fixed：表示固定定位，与 absolute 定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与 background-attachment:fixed; 属性功能相同。

以下代码可以实现相对于浏览器视图向右移动 100px，向下移动 50px。并且拖动滚动条时位置固定不变

<style type="text/css">
  #div1 {
    width: 200px;
    height: 200px;
    border: 2px red solid;
    position: fixed;
    left: 100px;
    top: 50px;
  }
</style>
<p>
  文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
</p>
...

7、Relative 与 Absolute 组合使用

使用 position:absolute 可以实现被设置元素相对于浏览器（body）设置定位以后，使用 position:relative 可以相对于其它元素进行定位。但是必须遵守下面规范：

  • 参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1">
  <!--参照定位的元素-->
  <div id="box2">相对参照元素进行定位</div>
  <!--相对定位元素-->
</div>
  • 参照定位的元素必须加入 position:relative;
#box1 {
  width: 200px;
  height: 200px;
  position: relative;
}
  • 定位元素加入 position:absolute，便可以使用 top、bottom、left、right 来进行偏移定位了
#box2 {
  position: absolute;
  top: 20px;
  left: 30px;
}

这样 box2 就可以相对于父元素 box1 定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）

第 13 章 CSS 代码缩写，占用更少的带宽

盒模型代码简写

还记得在讲盒模型时外边距（margin）、内边距（padding）和边框（border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左

/* 上设置为10px、右设置为15px、下设置为12px、左设置为14px */
margin: 10px 15px 12px 14px;

margin: 10px 10px 10px 10px;
/* 可缩写为：*/
margin: 10px;

margin: 10px 20px 10px 20px;
/* 可缩写为：*/
margin: 10px 20px;

/* 如果left和right的值相同，如下面代码：*/
margin: 10px 20px 30px 20px;
/* 可缩写为：*/
margin: 10px 20px 30px;

/* padding、border的缩写方法和margin是一致的。*/

颜色值缩写

当设置的颜色是 16 进制的色彩值时，如果每两位的值相同，可以缩写一半

p {
  color: #000000;
}
/* 可以缩写为：*/
p {
  color: #000;
}

p {
  color: #336699;
}
/* 可以缩写为：*/
p {
  color: #369;
}

字体缩写

body {
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 12px;
  line-height: 1.5em;
  font-family: "宋体", sans-serif;
}

/* 这么多行的代码其实可以缩写为一句：*/

body {
  font: italic small-caps bold 12px/1.5em "宋体", sans-serif;
}

注意：

  • 使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性（如 font-weight、font-style、font-variant、line-height）如未指定将自动使用默认值。
  • 在缩写时 font-size 与 line-height 中间要加入 / 斜扛。
  • 一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body {
  font: 12px/1.5em "宋体", sans-serif;
}
/* 只是有字号、行间距、中文字体、英文字体设置 */

第 14 章 单位和值

颜色值

字体颜色（color）、背景颜色（background-color）、边框颜色（border）等：

/* 英文命令颜色 */
p {
  color: red;
}

/* RGB颜色 */
p {
  color: rgb(133, 45, 200);
}

/* 每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：*/
p {
  color: rgb(20%, 33%, 25%);
}

/* 十六进制颜色。原理其实也是 RGB 设置，值由 0-255 变成了十六进制 00-ff */
p {
  color: #00ffff;
}

长度值

长度单位总结一下，目前比较常用到 px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

  • 像素：像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS 规范中假设“90 像素=1 英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位
  • em：就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p {
  font-size: 12px;
  text-indent: 2em;
}
/* 上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）*/

下面注意一个特殊情况： 但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

<p>以这个<span>例子</span>为例。</p>
// css: p{font-size:14px} span{font-size:0.8em;} // 结果 span
中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
  • 百分比
p {
  font-size: 12px;
  line-height: 130%;
}

设置行高（行间距）为字体的 130%（12 * 1.3 = 15.6px）

第 15 章 CSS 样式设置小技巧

水平居中 - 行内元素

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的

<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
<style>
  .txtCenter {
    text-align: center;
  }
</style>

水平居中 - 定宽块状元素

当被设置元素为 块状元素 时用 text-aligncenter 就不起作用了，这时也分两种情况：定宽块状元素 和 不定宽块状元素。

满足 定宽 和 块状 两个条件的元素是可以通过设置 左右margin 值为 auto 来实现居中的。

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
<style>
  div {
    border: 1px solid red; /*为了显示居中效果明显为 div 设置了边框*/
    width: 200px; /*定宽*/
    margin: 20px auto; /* margin-left 与 margin-right 设置为 auto */
    // 注意：元素的“上下 margin” 是可以随意设置的
  }
</style>

水平居中 - 不定宽块状元素方法（一）

不定宽度的块状元素有三种方法居中：

  1. 加入 table 标签
  2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
  3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

加入 table 标签是利用 table 标签的长度自适应性，即不定义其长度也不默认父元素 body 的长度（table 其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的 margin 的方法，使其水平居中

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )

第二步：为这个 table 设置 左右 margin 居中（这个和定宽块状元素的方法一样）

<div>
  <table>
    <tbody>
      <tr>
        <td>
          <ul>
            <li>我是第一行文本</li>
            <li>我是第二行文本</li>
            <li>我是第三行文本</li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<style>
  table {
    border: 1px solid;
    margin: 0 auto;
  }
</style>

水平居中 - 不定宽块状元素方法（二）

改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。

<body>
  <div class="container">
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div>
</body>
<style>
  .container {
    text-align: center;
  }
  /* margin:0;padding:0（消除文本与div边框之间的间隙）*/
  .container ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
  }
  /* margin-right:8px（设置li文本之间的间隔）*/
  .container li {
    margin-right: 8px;
    display: inline;
  }
</style>

这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值

水平居中 - 不定宽块状元素方法（三）

  • 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中
  • div 中间有条平分界线，然后将 ul 的最左端与 div 的平分线对其；
  • li 中有条平分线，然后将 li 的平分线与 ul 的最左端对其；

简单的说就是：div 和 li 都有条平分线，然后 ul 的最左端作为平分线标准，div 和 li 都与其对其，然后 div 确定外框，则 li 就是在 div 的中间

注：可以使用 clear:both; 清除浮动

<body>
  <div class="container">
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div>
</body>
<style>
  .container {
    float: left;
    position: relative;
    left: 50%;
  }
  .container ul {
    list-style: none;
    margin: 0;
    padding: 0;

    position: relative;
    left: -50%;
  }
  .container li {
    float: left;
    display: inline;
    margin-right: 8px;
  }
</style>

垂直居中 - 父元素高度确定的单行文本

分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的 （height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 ）

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块（溢出）

<div class="container">hi,imooc!</div>
<style>
  .container {
    height: 100px;
    line-height: 100px;
    background: #999;
  }
</style>

垂直居中 - 父元素高度确定的多行文本（方法一）

使用插入 table (包括 tbody、tr、td)标签，同时设置 vertical-align：middle

CSS 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对 inline-block 类型的子元素都有用。下面看一下例子：

<table>
  <tbody>
    <tr>
      <td class="wrap">
        <div>
          <p>看我是否可以居中。</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<style>
  table td {
    height: 500px;
    background: #ccc;
  }
</style>

因为 td 标签默认情况下就默认设置了 vertical-align: middle，所以我们不需要显式地设置了

垂直居中 - 父元素高度确定的多行文本（方法二）

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式，兼容性比较差

<div class="container">
  <div>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
    <p>看我是否可以居中。</p>
  </div>
</div>
<style>
  .container {
    height: 300px;
    background: #ccc;
    display: table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align: middle; /*IE8以上及Chrome、Firefox*/
  }
</style>

这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7 而且这样修改 display 的 block 变成了 table-cell，破坏了原有的块状元素的性质（笔者：IE6、7 基本可以放弃了）

隐性改变 display 类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

  1. position : absolute
  2. float : left 或 float:right 只要 HTML 代码中出现以上两句之一，元素的 display 显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素

如下面的代码，a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了

<div class="container">
  <a href="#" title="">进入课程请单击这里</a>
</div>
<style>
  .container a {
    position: absolute;
    width: 200px;
    background: #ccc;
  }
</style>

– EOF –