您好,欢迎来到华拓科技网。
搜索
您的当前位置:首页彻底搞懂行内元素,块级元素,行内块元素

彻底搞懂行内元素,块级元素,行内块元素

来源:华拓科技网

有网友碰到这样的问题“彻底搞懂行内元素,块级元素,行内块元素”。小编为您整理了以下解决方案,希望对您有帮助:

解决方案1:

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。
当然,他们之间也是可以转换的。

行内元素特征:
(1)设置宽高无效
(2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间 
(3)不会自动进行换行
元素:span 修饰字体和标签,还有和这两个标签可以直接做出平方的效果

块状元素特征:
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起,默认排列方式为从上至下
元素:div、p、nav、aside、header、footer、section、article、ul-li、address

行内块状元素特征:
(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
综合了行内元素和块状元素的特性

总结
不管块级元素还是行内元素,区别主要是三个方面:一是排列方式,二是宽高边距设置,三是默认宽度。

块级元素会独占一行,而内联元素和内联块元素则会在一行内显示。
块级元素和内联块元素可以设置 width、height 属性,而内联元素设置无效。
块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。
而行内块级元素又同时拥有块级元素和行内元素的特点。

Copyright © 2019- huatuo6.cn 版权所有 赣ICP备2024042791号-9

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

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