第五课 布局入门
1、块级元素和行内元素
- 布局时可以给每个模块加上边框医便于分析，最后可以去掉
- 行内元素的代码换行相当于内容的空格，不换行则会紧挨着。空格也会展示成空格
- 块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。
- 块级元素只能出现在<body>元素内
- 块级元素与行内元素的区别：
（1）格式：默认情况下，块级元素会新起一行；行内元素不会以新行开始
（2）内容模型：一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。 -
下面的元素都是行内元素
2、display属性
-
display 属性规定元素应该生成的框的类型。
display的值
3、盒模型
- 描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边 与 内容边。
- 内容区域content area ：是包含元素真实内容的区域。它通常包含背景、颜色或者图片等，位于内容边界的内部，它的大小为内容宽度 或 content-box宽及内容高度或content-box高。
4、浮动布局
- float
5、居中对齐
- 一般左右两边同时设置auto就能居中，如下
margin-left:auto;
margin-right:auto;
可简写为：
margin:0 auto;//前面的数字表示上下的边距，后面的数字表示左右边距
6、量尺寸
- 一般可以用开发者工具选中某一块得知，还可以用谷歌浏览器的截图工具。
本章作业
1、我们的HTML使用了 < > “ 等特殊符号，那如果我要在内容中输出这些符号怎么办呢？
答：使用符号< < > >
2、在HTML中，打上多个空格也只能输出一个空格的宽度，那如何才能输出多个空格呢？
答：①我们可以用预格式化标签<pre>，无论是空格或空行都适用。
②我们可以用空格实体符 代替空格，用换行标签
代替空行。
③全角空格被解释为汉字，所以不会被被解释为HTML分隔符，可以按照实际的空格数显示。
3、查文档，学习pre标签是什么，可用在什么地方，你可以在真实的网站上找到案例吗？
答：<pre> 标签可以保留您需要的文本格式，比如不会取消换行和空格，并且所示文本是等宽的；
<pre> 元素是块级元素，但是只能包含文本或行内元素，任何块级元素；
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
4、查文档，学习em标签的语义，尝试在真实的网站上找到一两处应用场景。
答：em></em>标签（html em强调标签）告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体方式呈现给大家显示，这个与html I斜体标签相同效果。
1）、<em> 标签修饰的内容都是用斜体字来显示，但这些内容也具有更广泛的含义,如果你只想使用斜体字来显示文本的话，请使用 <i> 标签。除此之外，文档中还可以包括用来改变文本显示的级联样式定义。
2）、em定义内容强调作用
3）、EM标签默认斜体特殊样式可以使用CSS样式来初始化，我们将在后面文章中介绍如何确定em强调标签自有样式。
em有如下特点：
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
