神刀安全网

【CSS】inline和block那些事儿


说下行内元素和块级元素的区别?

这是今天看到一道面试题,围绕这道面试题,我总结一下关于inline和block的一些特性。


inline

1. 设置宽高无效。

这个基本上都知道,inline的高度和宽度是由元素里的内容撑开的,设置height和width不影响inline实际宽高。

2. 设置上下margin无效

在行内元素中,设置margin-top和margin-bottom无效。虽然margin-left和margin-right有效,但不能使用margin: 0 auto 来居中,想要居中还是得在父元素中设置text-align: center 。

3. 设置上下padding无效

和margin一样,设置行内元素的padding-top和padding-bottom无效,padding-left和padding-right有效。但是与margin的区别是,padding会影响行内元素的background-color。点击这里查看padding和margin的区别。

【CSS】inline和block那些事儿

行内元素的margin和padding

图片中可以看到,设置padding的行内元素background被撑开,而margin却没有。虽然padding撑开了行内元素的background,但是并没有影响它的实际高度,可以看到下面的div没有拉开距离。

4. 可设置line-height影响上下间距

高度,margin,padding都无法影响inline的上下间距。但是可以通过设置它的line-height来影响上下间距。这里又有一个小tips,就是虽然line-height可以影响上下间距,但是无法撑开background。可以点击这里查看inline设置line-height的效果。

【CSS】inline和block那些事儿

inline和block设置line-height的效果

从图中可以看到,设置line-height后的行内元素,上下间距虽然被拉开了,但是background却没有变化。

5. 在行内元素中包含一个块级元素会有意想不到的问题

在行内元素中包含一个块级元素可能出现一些比较神奇的问题,所以尽量不要在行内元素中包含块级元素。点击这里查看行内元素中包含一个块级元素效果。


block

块级元素就比较简单了,没有什么奇奇怪怪的东西。宽高,margin,padding都可以正常使用。与行内元素不同的是,块级元素会占据一行(即使设置的宽度没有撑满父元素宽度)。而且块级元素可以通过margin: 0 auto; 来水平居中。


后记

关于inline和block我大概就总结了这些,如果有什么不详细,或者有问题欢迎留言讨论和补充。

~(~ ̄▽ ̄)~

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 【CSS】inline和block那些事儿

分享到:更多 ()

评论 抢沙发

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