您好,欢迎来到化拓教育网。
搜索
您的当前位置:首页块级元素和行内元素的区别,常见的块级元素和行内元素有哪些

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

来源:化拓教育网
块级元素和⾏内元素的区别,常见的块级元素和⾏内元素有哪些

⼀般来说,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; }

  

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- huatuo9.cn 版权所有 赣ICP备2023008801号-1

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务