块级元素和行内元素的区别,常见的块级元素和行内元素有哪些

一般来说,html的元素分为两种,即块级元素和行内元素。

 

块级元素:块状元素排斥其他元素与其位于同一行,可以设定元素的宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素。

行内元素:行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。

 

常见块级元素有:h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,td,th;

常见内联元素有:em,strong,span,button,input,label,code,select,img,textarea

 

两者之间的区别:

区别:
1.块级元素占据一整行,内联元素的宽度是其元素内容的宽度,多个内联元素排列会放在同一行里除非放不下,才会挤到新的一行
2.块级元素可以设置宽度width和高度height,而内联元素设置widht和height是无效的
3.块级元素可以包含块级元素和内联元素,而内联元素只能包含文本
4.块级元素可以设置margin和padding属性,行内元素只有margin-left、margin-right、padding-left、padding-right起作用

 

比如:我们可以给div和p元素应用以下的样式,但是span标签不能应用下面的样式。

.test{
 width:100px;
 height:100px;
 }

 

当然我们还可以通过样式display属性来改变元素的显示方式。当display的值设为block时,元素将以块级方式呈现;当display值设为inline时,元素将以行内形式呈现。所以我们可以给span标签应用以下样式:

.test{
 width:100px;
 height:100px;
 display:block;
 }

  

转载于:https://www.cnblogs.com/ianyanyzx/p/9102729.html

你可能感兴趣的:(块级元素和行内元素的区别,常见的块级元素和行内元素有哪些)