元素分类
在web开发中,我们经常会用到HTML元素来写结构,用着用着就习惯了,但不一定了解元素分为几类,一般,元素分为块级元素,内联元素和内联块级元素等。
块级元素
块级元素有:
<div>
、<p>
、<h1>...<h6>
、<ol>
、<ul>
、<dl>
、<table>
、<form>
<header>
、<footer>
、<aside>
、<nav>
、<section>
、<artical>
特点:
- 块状元素独占一行,自上而下排列;
- 占据其父元素(容器)的整个空间;
- 块状元素可以定义自己的宽度和高度,以及盒模型中的margin,padding,border;
- 块状元素可以作为一个容器包含其他的块状元素或内联元素。
不属于块级元素的可以使用css属性display:block来将元素转化为块级元素。
内联元素
内联元素有:
<a>
、<strong>
、<b>
、<i>
、<em>
、<span>
、<label>
特点:
- 内联元素在一行逐个进行显示
- 内联元素没有自己的形状,不能定义宽度和高度,它的宽高由内容来决定;
- 内联元素设置与高度相关的一些属性(如margin-top,margin-bottom,padding-top,padding-bottom,line-height),显示无效或显示不准确;
不属于内联元素的可以使用css属性display:inline来将元素转化为内联元素。
行内块元素
行内块元素有:
<img>
、<input>
、<textarea>
特点:
- 具有内联元素特点,也具有块状元素特点
- 可以定义容器的宽,高,margin,padding等,还可以和其他内联元素在一行显示
不属于行内块元素的可以使用css属性display:inline-block来将元素转化为行内块元素。