概述
在 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) 都能随便设置
- 块级内联元素的宽度, 高度未设置的状况下, 由该元素的内容撑开
4. 块级内联元素受父元素的 line-height 以及本身的 vertical-align 影响
二. 将非内联元素转换成内联元素的办法
应用 display:inline-block
三. 常见内联元素
<input>
关键词：web 前端培训 前端培训