css行内元素和块级元素的区别是什么?

行内元素和块级元素的区别是什么?下面本篇文章就来给大家介绍一下行内元素和块级元素的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

块级元素?

  • 总是在新行上开始;

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

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

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

行内元素?

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

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

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

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

对行内元素,需要注意如下:

  • 设置宽度width 无效。

  • 设置高度height 无效,可以通过line-height来设置。

  • 设置margin 只有左右margin有效,上下无效。

  • 设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

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

1、行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。

2、行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。

3、块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;行内元素不能包含块级元素,只能容纳文本或者其他行内元素。

更多CSS相关知识,可访问 CSS教程 !!

以上就是css行内元素和块级元素的区别是什么?的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS3 答疑