关于html:HTML元素分类总结

44次阅读

共计 1311 个字符,预计需要花费 4 分钟才能阅读完成。

概述

在 HTML 中, 存在着许许多多的元素(同:”HTML 标签”), 这些元素最终可分为三类, 别离是块级元素, 内联元素(同:”行内元素”), 块级内联元素(同:”行内块元素”)。

你对这些元素是否真的理解呢?

咱们来看看这三类元素的特点:

块级元素

一. 特点

1. 每个块级元素都从新的一行开始显示(块级元素独占一行)

2. 元素的宽度, 高度, 内边距 (padding), 边框(border), 外边框(margin) 都能随便设置

3. 块级元素在网页中所占面积 = 内容区(content)+ 内边距(padding)+ 边框(border)+ 外边距(margin)

4. 块级元素自身未设置宽度的状况下, 宽度 = 父元素宽度 - 该元素的左右外边距 - 该元素的左右边框 - 该元素的左右内边距

5. 块级元素未设置 padding 和 border 的状况下,padding 和 border 的数值为 0

6. 块级元素未设置宽度和外边距的状况下,margin 的值为 0, 宽度为 100%(即与父元素宽度统一)

7. 块级元素设置宽度但未设置外边距的状况下, 左外边距的值为 0

8. 块级元素设置宽度, 未设置 padding 和 border, 同时设置 margin: 0 auto 的状况下, 左右外边距平分 父元素宽度 - 该元素宽度所残余的空间

9. 块级内联元素不受父元素的 line-height 以及本身的 vertical-align 影响

二. 将非块级元素转换成块级元素的办法

1.display:block

2.float:left 或 right

3.position:absolute 或 fixed

4. 父元素应用 display:flex, 子元素会变为块级元素

三. 常见块级元素

<div>,<p>,<h1>…<h6>,<ol>,<ul>,<dl>,<address>,<blockquote> ,<form>

内联元素

一. 特点

1. 当父元素宽度足以放下多个内联元素时, 一行内能够显示多个内联元素, 否则放不下的内联元素将另起一行(一行寄存多个内联元素)

2. 内联元素的宽度, 高度由该元素的内容撑开

3. 内联元素的宽度 / 高度 /padding-top/border-top/margin-top/margin-bottom 设置有效

4. 如果 padding/border/margin 未设置的状况下, 全副为 0

5. 内联元素受父元素的 line-height 以及本身的 vertical-align 影响

二. 将非内联元素转换成内联元素的办法

应用 display:inline

三. 常见内联元素

,<span>,,
,,

块级内联元素

一. 特点

1. 当父元素宽度足以放下多个块级内联元素时, 一行内能够显示多个块级内联元素, 否则放不下的块级内联元素将另起一行(一行寄存多个块级内联元素)

2. 块级内联元素的宽度, 高度, 内边距 (padding), 边框(border), 外边框(margin) 都能随便设置

  1. 块级内联元素的宽度, 高度未设置的状况下, 由该元素的内容撑开

4. 块级内联元素受父元素的 line-height 以及本身的 vertical-align 影响

二. 将非内联元素转换成内联元素的办法

应用 display:inline-block

三. 常见内联元素

<input>

关键词:web 前端培训 前端培训

正文完
 0