"display:inline-block“与"display:inline flow-root”的显示方式不同。 - 腾讯云开发者社区

display:inline就是将元素显示为行内元素. 　　...）；　　控制inline元素的高度；　　无须设定宽度即可为一个块元素设定与文字同宽的背景色。　　...display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症...从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。...IE下块元素如何实现display:inline-block的效果？

1.1K1 0

CSS中display:inline和display:inline-block的区别

inline元素 1）可以设置margin-left,padding-left,padding-right,margin-right，不能设置margin-top,padding-top,padding-bottom...2）不能设置宽高 3）允许其它元素在其左右 4）在这儿查看其它非常重要的旁注 block元素 1）inline元素能设置和不能设置的属性，block都能设置 2）在block元素后强制换行 inline-block...元素 1）允许其它元素在其左右 2）可以设置margin-top,padding-top,padding-bottom,margin-bottom 3）可以设置宽高 display:block, display...:inline, display:inline-block外观（如下图） ?

1.4K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

display:inline-block的深入理解 BY blank

说：“我在IE中对a或者span等内联元素使用display:inline-block一直是有效的”。...old9翻译的《On having layout》），从而使内联元素拥有了display:inline-block属性的表症。...从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。...延伸一个问题：IE下块元素如何实现display:inline-block的效果？...IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。

1K9 0

「css基础」如何理解Display的属性：None，Block，Inline，Inline-Block

开篇本篇文章，笔者将介绍display的基本属性，主要涉及以下内容： display: none vs visibility: hidden display: block display: inline...display: inline-block （文末送最新CSS3英文电子书）本篇文章阅读时间预计2分钟。...由此可以看出html元素都有个默认的display属性:block或inline。...，每个红色方块会独占一行，如下图所示： inline 按需占用空间不断行，并排显示 width,height, top-bottom margin 等属性不起作用可以是其它行内元素的父级。...03 Display: Inline-block 某些情况下，行内元素和块级元素并不能满足我们的设计需求，因此有了Inline-block这个属性，从属性的名字，我们就可以分析出其综合了两者的一些特征。

1.4K2 0

【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )

一、Display 显示模式转换 ---- display 显示模式 , 可以分为行内显示模式 ; 块内显示模式 ; 行内块显示模式 ; 将元素的显示模式修改为行内块显示模式的方法 : 使用...inline-block 可以改变显示模式 , 将元素的显示模式改为行内块显示模式 ; 使用浮动 , 也可以将块内元素改为类似于行内块的显示模式 , 浮动是脱标的 , 不占用标准流元素的位置... 显示效果 : 三、inline-block 改元素为行内块元素示例 ---- 将块级元素转为行内块元素 , 行内块元素如果不设置宽度 , 默认宽度与元素内容宽度一致...由块级元素改为行内块元素 */ display: inline-block; height: 100px; background-color: pink; } 显示效果 : 五、为块元素设置定位 ---- 将块级元素设置为绝对定位元素 , 也能达到与行内块元素相同的效果 ; 代码示例 : <!

1.2K3 0

display属性，及其区别

/* Global values */ display: inherit; display: initial; display: unset; 主要的几个属性inline,block,inline-block...设置了inline-block的元素虽然会有内联元素的效果，但是却可以设置宽高margin，padding值等其他 display：block的元素和块级元素并不是一个概念。...，多个块级元素则换行显示 display：inline-block的元素为什么可以设置宽高？...于是，值为block的元素实际由外在的“块级盒子”和内在的“块级盒子”组成，值为inline-block的元素则由外在的“内联盒子”和内在的“块级盒子”组成，值为inline的元素则内外均是“内联盒子”...参考链接： display知识点总结 display属性值block，inline和inline-block概念和区别

1.3K1 0

CSS 中 Display(显示) 与 Visibility（可见性）的区别与用法

如果你想隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。...下面是两种方式的示例: 1.Display:None; 方式隐藏与显示元素这是一个文本段落，点击按钮用Display样式隐藏与显示它这是另外一个段落 Display隐藏 Display显示...2.Visibility方式隐藏与显示元素这是一个文本段落，点击按钮隐藏与显示它这是另外一个段落 Visibility隐藏 Visibility显示你会不难看出这两种方式的区别和差异。...示例的相关代码 1.Display:None; 方式隐藏与显示元素 display: inline;">这是一个文本段落...显示 2.Visibility方式隐藏与显示元素

2.2K1 0

【CSS】元素的显示与隐藏 display visibility overflow 属性区别

元素的显示与隐藏 display属性 display：none 此元素不会被显示。 display：block 此元素将显示为块级元素，此元素前后会带有换行符。...display隐藏元素后，不占有原有位置 visibility 属性 visibility：visible 默认值。元素是可见的。 visibility：hidden 元素是不可见的。...hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...inherit 规定应该从父元素继承 overflow 属性的值。...: pink; margin: 30px auto; } .tudou img { width: 100%; height: 100%; } .mask { display: none

2.4K4 0

display的值及作用

当使用该属性将元素从显示状态切换为隐藏状态时，元素不占据原本的空间，会触发浏览器的重绘与回流。为这个属性添加过渡动画是无效的，他的任何不同状态值之间的切换总是会立即生效。...display: inline-block display: inline-block;是CSS2规范，无兼容性问题，该属性值表示此元素将显示为内联块元素，该元素生成一个块元素框，该框将随周围的内容一起流动...，就好像它是单个内联框一样，与被替换的元素非常相似，它等效于内联流根inline flow-root，可以指定宽度和高度，内外边距对于四个方向有效元素排在一行，但是在回车后会有空白缝隙。...内部显示这些关键字指定了元素的内部显示类型，它们定义了该元素内部内容的布局方式，需要假定该元素为非替换元素。...Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个成员的位置。不同之处在于，Flex布局是轴线布局，只能指定成员针对轴线的位置，可以看作是一维布局。

1.8K3 0

html使用display:inline-block实现标签右对齐，值左对齐效果。和设置div宽度，并居中显示。嵌套div的里层div文字居中显示

:inline-block; float:left;width:50% ;background-color:blue"> inline-block; float:left;width:50% ;background-color:blue"> inline-block; float:left;width:50% ;background-color:blue"> 显示结果：总结：使用标签前要了解此标签的属性有哪些，比如span标签没有width属性，所以即使设置了宽度也不会起作用，...3，嵌套div的里层div文字居中显示 display:inline-black; float:left; margin-top:50px;width

5.5K1 0

块级格式化上下文

，并且与这个区域的外部毫无关系，是一个独立的区域，是一个环境。...浮动元素，元素的float不是none。绝对定位元素，元素的position为absolute或fixed。行内块元素，元素的display为inline-block。...overflow值不为visible的块元素。 display值为flow-root的元素。 contain值为layout、content或paint的元素。...弹性元素，display为flex或inline-flex元素的直接子元素。网格元素，display为grid或inline-grid元素的直接子元素。...-- 使用 display: inline-block; 触发BFC --> <!

3651 0

CSS8:到底什么是BFC？

(元素具有 display: inline-block) 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性) 表格标题 (元素具有 display: table-caption..., HTML表格标题默认属性) 具有overflow 且值不是 visible 的块元素， display: flow-root column-span: all 应当总是会创建一个新的格式化上下文，即便具有...一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。.../* display: float;*/ /*触发BFC */ /* position: absolute; *//*触发BFC */ /* display: inline-block; 触发BFC...BFC */ /* position: absolute; *//*触发BFC */ /* display: inline-block; 触发BFC */ /* overflow:auto

8953 0

BFC 的形成和作用

overflow 的值不为 visible 或 clip（除了根元素）。 display 的值为 table-cell，table-caption，或 inline-block 中的任意一个。...display 的值为 flow-root，flow-root，或 list-item。...flex items，即 display 的值为 flex 或 inline-flex 的元素的直接子元素（该子元素 display 不为 flex，grid，或 table）。...grid items，即 display 的值为 grid 或 inline-grid 的元素的直接子元素（该子元素 display 不为 flex，grid，或 table）。...提示：display: flow-root，contain: layout 等是无副作用的，可在不影响已有布局的情况下触发 BFC。知识点深入 1.

2831 1

全栈之前端 | 4.CSS3基础知识之盒子模型学习

内联块状元素（inline-block elements）：内联块状元素结合了块级元素和内联元素的特性，可以设置宽度、高度、内外边距等属性，同时以行的形式显示在页面上。...等同于 inline flow-root*/ display: inline-flex; /* 类似于内联元素并且它的内容根据弹性盒模型布局。.../* 例如，你可以按以下方式使用双值语法指定一个内联的弹性容器：(浏览器支持性可能不是很好) */ .container { display: inline flex; } /* 例如，使用预组合属性来定义显示... 总结: display 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式。...padding-内边距描述: 内边距位于边框和内容区域之间, 与外边距不同其值必须是 0 或正的值，不能有负数的内边距；应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。

3132 0

Grid layout + 媒体查询轻易实现常用的响应式布局

display: block;display: inline;display: inline-block;display: flex;display: inline-flex;display: grid...;display: inline-grid;display: flow-root;布局模式使用场景擅长解决的布局问题不擅长解决的布局问题优势劣势block段落、容器、导航栏垂直布局、容器尺寸控制水平布局复杂性...、内联元素布局易于理解和使用、强大的宽高控制布局较为僵硬、不适合复杂布局inline文本、图像水平布局、内联元素间的排列垂直边距不生效、大小控制与文本流自然融合无法设置宽高、边距和填充有限制inline-block...、精确布局控制学习曲线高、兼容性问题inline-grid内联的复杂布局内联元素的二维布局与grid相同grid的优点，但适用于内联环境与grid相同，不适合大型的二维布局flow-root清除浮动、局部...在页面稍微变宽点的时候，呈现中间部分显示效果。如果页面在宽到一定程度的时候就，变成右侧部分的显示效果。怎么做到这个的呢？我给你一个初始的代码：<!

7023 1

理解CSS布局和块格式化上下文

为 inline-block）表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值...table、row、tbody、thead、tfoot的默认属性）或 inline-table） overflow 值不为 visible 的块元素 display 值为 flow-root 的元素（...新方式，文末会提及） contain 值为 layout、content或 strict 的元素弹性元素（display为 flex 或 inline-flex元素的直接子元素）网格元素（display...div上的边距之间没有内容，因此两者将会合并，因此段落最终与框的顶部和底部齐平。...overflow属性，但某些情况下我们不需要滚动条，此时滚动条就变成了这种方式的副作用，因此display有个新的属性flow-root可以在任何需要创建BFC场景下使用，它并且不会带来任何副作用。

2.1K3 0

BFC笔记?

触发BFC的常见条件满足以下条件之一即可触发： HTML元素浮动元素 float != none 溢出内容不可见的元素 overflow !...= visible 行内块元素 display = inline-block 绝对定位元素 position = absolute或fixed 弹性元素（flex）、网格元素（grid）的直接子元素多列容器...= auto display = flow-root 该属性使用flow layout布局内容，也就会创建bfc contain =layout、content或 strict contain用于性能优化...，layout声明外部元素与内部元素互不影响，content在layout的基础上声明子元素也不会在content-box外（padding，border，margin）显示，并且counter等具有影响其他元素能力的属性也会被隔离...，strict在layout的基础上必须声明宽高，因为在此模式下子元素不能撑开父元素与表格有关的一些属性 BFC布局特性浮动定位与清除浮动都只会影响同一个BFC内的元素。

3915 0

CSS补充

文档流（定位流，普通流，浮动流） 1、普通流定位 static（默认方式）普通流定位，又称为文档流定位，是页面元素的默认定位方式页面中的块级元素：按照从上到下的方式逐个排列页面中的行内元素：按照从左到右的方式逐个排列...但是如何让多个块级元素在一行内显示?...它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。...设置元素为inline-block：可以解决问题，但是会导致宽度丢失，不推荐使用这种方式将元素的overflow设置为一个非visible的值 display:flex;display:flow-root...display:flow-root;副作用较小，但是不兼容IE，看情况使用。

6171 0

CSS BFC

: inline-block) 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性) 表格标题 (元素具有 display: table-caption, HTML...表格标题默认属性) 具有overflow 且值不是 visible 的块元素， display: flow-root column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span...IE 浏览器使用 zoom: 1 来触发 IE 浏览器的 Layout。因此可以理解为 BFC 是css的一个属性，这个属性的展现方式需要上述的方式来创建。它是一种表现形式。...属于同一个BFC的两个相邻Box的margin会发生重叠 3.每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。...BFC有哪些作用：自适应两栏布局可以阻止元素被浮动元素覆盖可以包含浮动元素——清除内部浮动分属于不同的BFC时可以阻止margin重叠

2911 0

0307前端笔试题

{2}'); console.log(t.format('http://www.duoyi.com','duoyi','Welcome')); })(); 8.简述触发BFC的方式...浮动元素（元素的 float 不是 none）绝对定位元素（元素的 position 为 absolute 或 fixed）行内块元素（元素的 display 为 inline-block）表格单元格...（元素的 display为 table-cell，HTML表格单元格默认为该值）表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）匿名表格单元格元素（元素的...row、tbody、thead、tfoot的默认属性）或 inline-table） overflow 值不为 visible 的块元素 display 值为 [flow-root](https:/...（display为 flex 或 inline-flex元素的直接子元素）网格元素（display为 grid 或 inline-grid 元素的直接子元素）多列容器（元素的 column-count

4572 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

display:inline、block、inline-block的区别

CSS中display:inline和display:inline-block的区别

display:inline-block的深入理解 BY blank

「css基础」如何理解Display的属性：None，Block，Inline，Inline-Block

【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )

display属性，及其区别

CSS 中 Display(显示) 与 Visibility（可见性）的区别与用法

【CSS】元素的显示与隐藏 display visibility overflow 属性区别

display的值及作用

html使用display:inline-block实现标签右对齐，值左对齐效果。和设置div宽度，并居中显示。嵌套div的里层div文字居中显示

块级格式化上下文

CSS8:到底什么是BFC？

BFC 的形成和作用

全栈之前端 | 4.CSS3基础知识之盒子模型学习

Grid layout + 媒体查询轻易实现常用的响应式布局

理解CSS布局和块格式化上下文

BFC笔记?

CSS补充

CSS BFC

0307前端笔试题

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐