概述
在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前端培训 前端培训