html元素的分类

末蓝、 2022-06-09 14:48 222阅读 0赞

**HTML对盒子(元素)分类：**  
1.块级元素(block)  
2.行内元素(inline)  
3.行内块元素(inline-block) 。  
注：HTML的大多数元素都是块级(block)元素或行内(inline)元素。  
  
**1.块级(block)元素**  
  
特点：

默认情况下，块级元素会另起一行，并尽可能的充满整个容器；

宽度、高度以及外边距和内边距都可控制；

宽度默认是它容器的100%，除非设定一个宽度；

块级元素可以包含行内元素和其他块级元素，相比于行内元素可以创建更复杂和大型的结构。

常见的块级元素:div,p

块级元素列表：  
  
![Center][]

注：两个同时具有外边距的块元素竖排，它们之间的垂直距离会取得距离的较大值；如果是横排的话，它们之间的水平距离是外边距之和。

**2.行内(内联)元素-inline**  
特点：  
  
和其他元素都在一行上；  
高和外边距不可改变；  
宽度就是它的文字或图片的宽度，不可改变  
设置宽度width 无效。  
设置高度height 无效，可以通过line-height来设置。  
设置margin 只有左右margin有效，上下无效。  
设置padding 只有左右padding有效，上下则无效（padding-top到页面顶部后就不再增加）。注意元素范围是增大了，但是对元素周围的内容是没影响的。  
设置 border只有左右border有效，但border-top到页面顶部后就不再增加；  
内联元素只能容纳文本或者其他内联元素  
  
行内元素列表：  
  
![Center 1][]  
  
**3.行内块元素**   
在行内元素的基础上，可以设置宽高属性的元素。  
常见的行内块元素是：img元素 ，input元素。  
  
**4.元素级别之间的转换(display 属性)**  
  
块元素默认display:block；  
行内元素默认为display:inline；  
行内块元素默认为display:inline-block；  
display:none; 不显示该元素，也不会保留该元素原先占有的文档流位置。  
display:block; 转换为块级元素。  
display:inline; 转换为行内元素。  
display:inline-block; 转换为行内块元素。

[Center]: /images/20220609/489e5472cbfc40459ef6cf150fadcf32.png
[Center 1]: /images/20220609/83bf67bcb17c4928a97a8d52be22545a.png