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

发布时间:2022-05-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了行内元素和块级元素的区别有哪些脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

区别:行内元素中设置高是无效的,不会自动换行;而块级元素可以设置宽高,可以自动换行。行内元素中对margin设置左右方向有效而上下无效,padding设置左右方向有效而上下无效;块级元素中设置margin和padding都有效。

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

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3脑。

在css基础当中,我们往往会遇到块元素和行内元素。在实际开发中,会经常把他们弄混淆,而且很难记住。那么行内元素和块级元素的区别有哪些?下面给大家介绍一下。

块级元素和行内元素的定义

什么是块级元素?

  • 总是在新行上开始

  • 高度,行高以及外边距内边距都可控制;

  • 宽度缺省是它的容器的100%,除非设定一个宽度。

  • 它可以容纳内联元素和其他块元素

例如:<address>、<center>、<h1>~<h6>、<hr>、<p>、<PRe>、<ul>、<ol>、<dl>、<table>、<div>、<form>

什么是行内元素?

  • 和其他元素都在一行上;

  • 高,行高及外边距和内边距不可改变

  • 宽度就是它的文字或图片的宽度,不可改变

  • 内联元素只能容纳文本或者其他内联元素

例如:<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、<select>、<sup>、<sub>、<em>、<del>

【推荐教程:《html视频教程》】

行内元素和块级元素的区别

1)、行内元素

①:设置宽高无效

②:对margin设置左右方向有效,而上下无效;padding设置左右方向有效,而上下无效。

③:不会自动换行

2)、块级元素

①:可以设置宽高

②:设置margin和padding都有效

③:可以自动换行

④:多个块状,默认排列从上到下

更多编程相关知识,请访问:编程视频!!

以上就是行内元素和块级元素的区别有哪些的详细内容,更多请关注脚本宝典其它相关文章

脚本宝典总结

以上是脚本宝典为你收集整理的行内元素和块级元素的区别有哪些全部内容,希望文章能够帮你解决行内元素和块级元素的区别有哪些所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。