css行元素跟块元素有哪些相同点?

在css盒子模型中,我们提到了html元素中的块元素和行联元素。那么它们究竟是什么呢?有哪些相同点?区别?有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

其实,行元素(又名内联元素)跟块元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素。

最常见的就是P和div这两个,说的简单点,块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方。

默认情况下块元素,是独占一行的。常见的块元素:div、h1-h6标题、form(只能用来容纳其他块元素)、hr、p、table、ul、ol等。

内联元素(inline element)也叫内嵌元素或行内元素,一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素有a和span。

行元素跟块元素的相同点

1、都具有display属性,规定元素应该生成的框的类型。

2、都可以设置左右方向的margin和padding值

块元素与行元素的区别

1.块元素,总是在新行上开始;内联元素,和其他元素都在一行上。

2.块元素,能容纳其他块元素或内联元素;内联元素,只能容纳文本或者其他内联元素。

3.块元素中高度,行高以及顶和底边距都可控制;内联元素中高,行高及顶和底边距不可改变。

(这上面的区别,指的是默认情况下的,不包括CSS的刻意控制。也就是说当使用css控制时,块元素和内联元素的属性差异会越来越小。)

block(块)元素的特点:

①总是在新行上开始;

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

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

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

inline(行)元素的特点:

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

②元素的高度、宽度及顶部和底部边距不可设置。

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

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

更多web前端知识,请查阅 HTML中文网 !!

以上就是css行元素跟块元素有哪些相同点?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏