2017.7.9

CSS 注意事项

CSS 类选择器中类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用
不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
定块状元素使用 margin 属性来水平对齐时要注意块状元素的宽度不能是父元素的 100%

2017.7.14

网页结构

一个网页由许多文件组成：文本，代码，样式表，媒体内容等等。当你开发网页时，你需要将这些文件以清晰的结构在你的本地计算机中存储下来，保证它们之间的联系，使它们看起来正确，然后才能将它们上传至服务器

网页应该存放在计算机何处？

当你在本地操作你的网页时，你应该将所有关联的文件放在一个能反映服务器上文件结构的单独的文件夹里。这个文件夹可以存放在任何你喜欢的位置，不过你应该将它放在你容易找到的位置，或许可以是你的桌面，你的主页，或是磁盘根目录

网页应该使用什么结构

我们创建的任何网页项目中最常使用的就是一个索引HTML文件和不同的包括图像，样式表和脚本文件的文件夹

index.html：这个文件通常将包括你的主页内容，也就是说，人们第一次进入你的网页看到的文本和图像
images folder：这个文件夹包含你网页上所有使用的图像
styles folder：这个文件夹包含了为你的内容添加样式的样式表
scripts folder：这个文件夹包含了所有为你网页添加交互功能的 JavaScript 代码

web项目结构

文件路径

如上面网页结构中 index.html 与 images 文件夹属于同级目录。index 网页需要引用 images 文件夹下的图片资源，就可以使用images/icon.png。如果 index.html 与图片资源 icon.png 直接同级的话，就直接使用icon.png。如果图片资源 icon.png 位于 Index.html 的上级目录中，则使用../icon.png

解析一个 HTML 元素

如下图

一个段落元素

这个元素的主要部分有：

开始标签：这里包含了元素的名称（这里是 p），表示这里是这个元素的开始发挥作用——在这个例子中从这一段的开头开始。
闭合标签：表明这里是元素的结尾——在这个例子中，就是这一段落的结尾。
内容（content）：这是一个元素的内容，这个例子中就是所输入的文本本身。
元素（The element）：开标签、闭标签与内容相结合，便是一个完整的元素。

解析 HTML 文档

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    ![](images/firefox-icon.png)
  </body>
</html>

这里我们有：

<!DOCTYPE html>——文档类型。在 HTML 刚刚出现的时期里（大约是1991/2 年），文档类型是用来链接一些应该遵守的规则，有点像自动校正等。然而现在大家都不用管文件类型，只是因为历史原因必须包含在代码中。现阶段大家知道这些就够了。
<html></html>——<html>元素。这个元素包含了整个页面的内容，有时也被称作根元素。
<head></head>——<head>元素。这个元素可以包含你想添加的所有内容，但是不会被用户所看到。这里面包括像想被搜索引擎搜索到的关键字（keywords）和页面描述，CSS样式表和字符编码声明等等。
<body></body>——<body>元素。这个元素包含了你想被用户看到的内容，不管是文本，图像，视频，游戏，可播放的音轨或是其他内容。
<meta charset="utf-8">——这个元素指定了你的文档需要使用的字符编码，像 UTF-8 ，它包括了非常多人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容。我们没有任何理由不去设定字符编码，而且也可以避免以后可能出现的问题。
<title></title>——这个元素设置了页面的标题，标题显示在浏览器标签页上，而且在你将网页添加到收藏夹或喜爱中时将作为默认名称。

解析 CSS 规则

CSS规则

选择多个元素

你也可以选择多种类型的元素然后为它们添加一组样式。记得将不同的选择符用逗号分开

p,li,h1{
  color:red;
}

Margin 属性

概述

margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外边距允许为负数

浏览器支持

kJASJ.jpg

取值方式

kJEl9.jpg

应用实例

kJVyR.jpg

外边距合并

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。具体可了解W3C 外边距合并、MDN 外边距合并、前端面试必备——外边距合并、Collapsing margins——合并的外边距

发生外边距合并的三种基本情况：