Pro019-从零开始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 。