当前位置: 首页 > 面试题库 >

block、inline、inline-block的区别?

佘飞鸣
2023-03-14
本文向大家介绍block、inline、inline-block的区别?相关面试题,主要包含被问及block、inline、inline-block的区别?时的应答技巧和注意事项,需要的朋友参考一下

参考回答:

block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

block元素可以设置margin和padding属性。

 

inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

inline元素设置width,height属性无效。

inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

 

inline-block:简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

 类似资料:
  • 本文向大家介绍inline、block、inline-block这三个属性值有什么区别?相关面试题,主要包含被问及inline、block、inline-block这三个属性值有什么区别?时的应答技巧和注意事项,需要的朋友参考一下 CSS显示模块分为内部显示类型和外部显示类型,内部显示类型是定义子元素如何参与内部布局,外部显示类型定义了父元素如何参与外部整个文档流的布局,所以 inline-> i

  • 本文向大家介绍inline-block、inline和block的区别;为什么img是inline还可以设置宽高?相关面试题,主要包含被问及inline-block、inline和block的区别;为什么img是inline还可以设置宽高?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: Block是块级元素,其前后都会有换行符,能设置宽度,高度,margin/padding水平垂直方向都有

  • 块元素,比如: 分区(division) <div> 段落(paragraphs) <p> 列表(lists):无序列表(unordered list with bullet points) <ul> 或 有序列表(ordered lists with numbers) <ol> 标题(headings):从1级标题 <h1> 到6级 <h6> 文章(articles) <article> 区块(

  • 问题内容: 我有一个带display元素:inline-block,但是它似乎不接受margin-top。这是因为该元素仍被视为内联元素吗? 如果是,是否有人可以解决? 编辑#1 : 我的CSS很简单: 我最终将内容包装在另一个div中,并给了它一个空白。但这会导致很多额外的标记,并使我的代码不太清楚。 编辑#2 : &on 元素似乎只适用于正值。 问题答案: 我用过。它具有inline- blo

  • 问题内容: 假设我有以下HTML: 和这个CSS: 现在想象一下,我想将其分为三列,相当于在第三列之后注入a 。 (实际上,这样做在语义和语法上都是无效的。) 我知道如何在CSS中选择第三个,但是如何在它之后强制换行呢?这不起作用: 我也知道使用代替可以实现这种特殊情况,但是我对使用的解决方案不感兴趣。我也知道对于固定宽度的块,可以通过将父对象的宽度设置为该宽度的3倍来实现。我对此解决方案不感兴趣

  • 问题内容: 在下面的代码中,我试图使h1元素具有最高利润。当我在css中将位置设置为inline时,未显示上边距。但是,当我将其更改为inline-block时,它确实可以。我想知道是否有人可以解释为什么会这样。谢谢。 这是我的HTML: 这是CSS 问题答案: CSS2规范的9.2.4节规定: inline-block 此值使元素生成一个 内联级块容器 。内联块的内部被格式化为块框,元素本身被格