html能插入背景的行级元素,Html元素类型：块级元素、行内元素（内联元素）和行内块级元素...

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

html中的标签元素大体被分为三种不同的类型：块级元素、内联元素(又叫行内元素)和内联块级元素。事实上，我以前用的时候只是建立在对它们的初步了解之上，可能有时候的使用方法并不正确，这次我需要在实验的基础上去更加深入地认识它们，并且进行一些简单的对比，了解它们之间的差别与联系，从而能够正确地使用它们。

块级元素

特点每个元素都从新的一行开始，其后的元素另起一行，即使设置宽度为0，只要有高度，都会独占一行

元素的高度、宽度、行高以及顶部和内外边距(上下左右)都可设置

元素如果不设置宽度，则是它本身符容器的100%(和父元素的宽度一致)

常见的块状元素

div、p、h1~h6、ul、ol、dl、li、dd、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等

常见的块状元素

内联元素(行内元素)

特点和其他元素都在一行上；

元素的高度、宽度及顶部和底部边距不可设置；

元素的宽度就是它包含的文字或图片的宽度，不可改变。

常见的内联元素

span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup，strong、u(下划线)、button(默认display：inline-block)

常见的内联元素

内联块级元素(行内块级元素)

特点(同时具有块级元素、内联元素的特点)和其他元素都在一行上；

元素的高度、宽度、行高以及内外边距(上下左右)都可设置

常见的内联块状元素

input、textarea、select、button

常见的内联块级元素

三种元素类型样式对比

代码

---

我是第一个div，宽度200px，高度100px，背景色为红色

我是第二个div，宽度200px，高度100px，背景色为蓝色

---

我是第一个span，宽度200px，高度100px，背景色为红色

我是第二个span，宽度200px，高度100px，背景色为蓝色

---

我是第一个button，宽度200px，高度100px，背景色为红色

我是第二个button，宽度200px，高度100px，背景色为蓝色

---

效果

我是第一个div，宽度200px，高度100px，背景色为红色

我是第二个div，宽度200px，高度100px，背景色为蓝色我是第一个span，宽度200px，高度100px，背景色为红色我是第二个span，宽度200px，高度100px，背景色为蓝色我是第一个button，宽度200px，高度100px，背景色为红色我是第二个button，宽度200px，高度100px，背景色为蓝色

实质上，虽然对span这个内联元素设置了宽度和高度，然而并没有起到效果。

总结

三种元素类型的特点决定了它的显示方式和一些属性的可设置性，我们再做网页开发的时候一定要用好它们，有时候如果元素标签本身的类型不能满足我们布局需要的时候，可以使用样式设置对它们进行类型修改变换。设置display:block；可以将元素转换块级元素；

设置display:inline；可以将块状元素转换为内联元素；

设置display:inline-block；可以将元素设置为内联块级元素。