我们在上篇文章<html5前端开拓之根本篇>中已经对HTML有了根本的理解，都说‘盒模型’非常神奇，但是很多朋友始终不能节制其事理。此事无碍，且看此图。
我们把这个盒子，类比成我们中秋节的时候包装月饼的月饼盒子。
个中两个月饼盒子之间的间隔便是咱们要先容的-->margin(外边距).
而咱们每个月饼都要有最外层的包装盒，
这个包装盒的厚度，便是咱们的--> border(边框).
那咱们的月饼不可能都是直接挨在一起的，对吧，
那每个月饼之间的间距，咱们就叫做--> padding(内边距).
那咱们先容了月饼盒，咱们的月饼总该当有吧。
对的，咱们月饼的宽度便是 --> width.
高度便是 --> height.
而咱们的月饼就叫做 --> element(元素).
“那我们的盒模型的间隔又该怎么去打算呢?”看下图
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。
如果希望这个元素框达到 100 个像素，就须要将内容的宽度设置为 70 像素。
二、div标签
上篇文章中我们学习了 HTML 的入门根本，接下来我们该来一起学学最常用的标签 div了。
什么是div呢?说白了，div 是一个块级元素，在实际HTML文档运用中一个块常日因此<div>开头，以</div>结束，<div>的涌现也意味着它的内容自动地开始一个新行。此外，还可以对 <div> 元素运用 class 或 id 属性。可以对同一个 <div>元素运用 class 或 id 属性，但是更常见的情形是只运用个中一种。这两者的紧张差异是，class 用于元素组(类似的元素，或者可以理解为某一类元素)，而 id 用于标识单独的唯一的元素。
三、块元素(block)
块元素基本特色
块元素会独占一行，多个block元素会各悛改起一行。默认情形下，block元素宽度自动填满其父元素宽度。
块元素可以设置width,height属性。块级元素纵然设置了宽度,仍旧是独占一行。
块元素可以设置margin和padding属性。
块元素支持所有的 CSS 样式
块元素基本可以划分以下几类：
div
无意义，紧张是合营界面布局(双标签)
p
语义：段落(双标签)
h1~h6
定义一级标题至六级标题
把稳
h1 权重非常高，一样平常一个页面只有一个H1
h2 权重非常高，一样平常一个页面不要超过10个，大型网站除外
h3 随便用
都是双标签
但是须要把稳一点，如果利用 p 标签的时候，里面嵌套了 div 标签，这样会导致 p 标签里面的样式被分割掉，这点须要把稳。
除此之外，块元素还包括有序列表 ol，无序列表 ul ，以及列表dl，dt，dd。
注：所有的标签全部有特定的样式，我们可以通过 CSS 去清掉所有的样式，建立属于自己的 reset.css 文件。
/margin的样式初始化/body,h1,h2,h3,h4,h5,h6,p,ol,ul { margin:0;
}/padding的样式初始化/ol,ul { padding:0;
}/列表点点的样式初始化/ul,ol { list-style: none;
}
四、内联元素(inline)
内联元素基本特色
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行
内容撑开宽度
inline元素设置width,height属性无效。
inline元素不支持高下的margin和padding，只支持旁边的margin和padding
代码换行被解析
内联元素中，有一个我们最常见的标签，那便是超链接 a 标签。它能从一个页面中跳转到其余一个界面，同时也可以在同一个页面之中设置空间‘锚点’，实现特定位置的跳转
把稳：a 标签中一定不能嵌套 a 标签
a标签的锚点设置方法：
可以通过设置 href = “# + 锚点名称” 的办法进行跳转，把稳，一定要加 #
例如：
<!DOCTYPE html><html lang=\公众en\公众><head>
<meta charset=\"大众UTF-8\"大众>
<title>Document</title></head><body>
<span id=“top”></span>
<p>asdnajsd</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href=“#top”>回到顶部</a></body></html>
标签的初始化
下划线的样式初始化/下划线的样式初始化/a { text-decoration: none;
}/字体样式初始化/em { font-style:normal;
}
五、内联块元素
内联块元素基本特性
1.支持所有css的样式
2.除块属性的标签以外，同属性以及行属性标签排在一排
3.代码换行被解析
内联块元素同时具有了块元素可以设置宽度和高度的特点，同时又可以像内联元素一样，可以和其他行属性标签处于同一行。
虽然内联块元素能同时拥有块元素和内联元素的特性，但很多时候，在页面中还是要利用不同标签对应的特性。其次便是，内联块也并不是完美无缺的。由于设置内联块的时候，它的换行会被解析。
如下文所示：
从下图可以瞥见，img 的边上，并没有 margin，但是实际展示的时候，会存在一条白的间隙。
而当我们把两个 img 标签连在一起写的时候，就正常了，如第一个 img 和第二个 img。
详细办理方法会不才一篇文章中先容
图片标签的初始化
img { border:none;
}
当然，你在网页中看到块元素，不一定便是块元素，他有可能已经是一个内联块元素了。
display 可以对它原来的特性进行一个修正，可以让原来是块属性的元素变成行属性元素，同时内联属性也同样可以转化为块属性。
本文链接：http://hn.lanou3g.com/lozx/2890.html
