前端面试之元素分类

元素分类

在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来将元素转化为行内块元素。