从零开始HTML＃019——5分钟-div 块级元素

标签

#019_Ent_Div

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素，block level element，块级元素在浏览器显示时，通常会以新行来开始和结束。

内联元素，inline elemen，内联元素在显示时通常不会以新行开始。

h1、p、ul、table，这些块级元素在显示时会以新行开始。

b、td、a、img这些内联元素在显示时通常不会以新行开始。

Div块元素

HTML div 元素是块级元素，它是可用于组合其他 HTML 元素的容器。元素本身没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，div 元素可用于对大的内容块设置样式属性。

div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table 元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。

实际使用

我们在实现一些布局的时候，可能用到 margin 属性，对 margin 属性的某些值进行处理，例如对 h1 元素进行【左边空余50px】

margin 布局

效果图，h1 元素左移50px

如果对多个元素进行布局，就要将所有要布局的元素进行属性设置

对 h1 p h2 修改 margin

效果图，h1 h2 p 左移50px

不过很明显，其他元素没有左移50px，如果要完成一个整齐的布局，那么就将所有元素都加进去，这样太麻烦，所以我们就用 div 元素来进行这个工作。

首先，先用 div 标签，将所有要用到布局属性的内容包裹起来。

标签

然后，在 css 中，对 div 元素的 margin 属性进行设置。

对 div 元素进行样式设置

效果图

那么如何进行 块元素 之间的叠加呢？那么下一节课就来学习 id 和 class 。