div元素在将宽度设置为0后不会折叠？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

理解 Css 布局和 BFC

一种方法是使用 clearfix hack，它的作用是在文本和图像下面插入一个元素，并将其设置为 clear:both。另一种方法是使用 overflow 属性，其值不是缺省值 visible。...带有 float 类的项我可以通过将包裹文本的 div 设置为 BFC 来防止这种包裹行为。 .text { overflow: auto; } ?...将包裹文本的div设置为BFC 这实际上是我们创建具有多个列的浮动布局的方法。浮动项还为该项创建了一个 BFC，因此，如果右边的列比左边的列高，那么我们的列就不会相互环绕。...首先，这些方法本身是有自身的设计目的，所以在使用它们创建BFC时可能会产生副作用。例如，使用overflow创建BFC后在某些情况下可能会看到出现一个滚动条或者元素内容被裁切。...即使在没有任何不想要的副作用的情况下，使用 overflow 也可能会让其他开发人员感到困惑。为什么 overflow 设置为 auto 或 scroll?最初的开发者的意图是什么?

1.4K0 0

理解 CSS 布局和 BFC

一种方法是使用 clearfix hack，它的作用是在文本和图像下面插入一个元素，并将其设置为 clear:both。另一种方法是使用 overflow 属性，其值不是缺省值 visible。...BFC 可以阻止元素被浮动元素覆盖你将熟悉 BFC 的这种行为，因为使用浮动的任何列类型布局都是这样工作的。如果一个项目创建了一个 BFC，那么该项目将不会包裹任何浮动元素。...我可以通过将包裹文本的 div 设置为 BFC 来防止这种包裹行为。 .text { overflow: auto; } ? 这实际上是我们创建具有多个列的浮动布局的方法。...首先，这些方法本身是有自身的设计目的，所以在使用它们创建BFC时可能会产生副作用。例如，使用overflow创建BFC后在某些情况下可能会看到出现一个滚动条或者元素内容被裁切。...即使在没有任何不想要的副作用的情况下，使用 overflow 也可能会让其他开发人员感到困惑。为什么 overflow 设置为 auto 或 scroll?最初的开发者的意图是什么?

1.2K0 0

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

是的

没有找到

盒模型

将 box-sizing 设置为 border-box 后，height 和 width 属性会设置内容、内边距以及边框的大小总和，这刚好符合示例的要求。...# 负外边距不同于内边距和边框宽度，外边距可以设置为负值。负外边距有一些特殊用途，比如让元素重叠或者拉伸到比容器还宽。...负外边距的具体行为取决于设置在元素的哪边：如果设置左边或顶部的负外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来...# 容器外部折叠想要在容器内元素不与容器外元素外边距折叠，有下面方法可以处理：当使用 Flexbox 布局时，弹性布局内的元素之间不会发生外边距折叠，网格布局也是在两个外边距之间加上边框或者内边距...，防止它们折叠使用 overflow:auto 防止内部元素的外边距跟容器外部的外边距折叠，这种方式副作用最小如果容器为浮动元素、内联块、绝对定位或固定定位时，外边距不会在它外面折叠当元素显示为

1.9K2 0

【Html.js——图片折叠效果】折叠手风琴（蓝桥杯真题-1763）【合集】

打开环境右侧的【Web 服务】，就可以在浏览器中看到当前页面，点击图片，被折叠的图片不会展开。...body 元素设置为水平方向的弹性布局，使内容在水平和垂直方向上居中。...height: 100vh;：将 body 的高度设置为视口高度的 100%。 transition: 0.25s;：添加过渡效果，让元素的属性变化更平滑。...cursor: pointer;：将鼠标指针样式设置为手型，提示用户可以点击。...，确保在文档的 DOM 结构加载完成后才开始执行其中的代码。 (".option").click(function() {...})

680 0

【愚公系列】2023年03月其他-Web前端基础面试题（CSS_42道）

/*设置标准盒子*/ 怪异模型|IE模型 div宽度（定死） = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度不会变化 box-sizing:border-box...当设置为box-sizing:content-box时，将采用标准模式解析计算；当设置为box-sizing:border-box时，将采用怪异模式解析计算。...visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。 opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。...z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。 transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。...（设置 rgba 透明的元素的子元素不会继承透明效果！） 24、css sprite是什么,有什么优缺点？概念：将多个小图片拼接到一个图片中。

3.1K2 0

59道CSS面试题(附答案)

最简单的初始化方法就是：*{ padding：0；margin：0；} 11、如何居中div？如何居中一个浮动元素？确定容器的宽高，例如宽400px、高200px的div.设置层的外边距。...默认宽度为父元素宽度，可设置宽高，换行显示。 none是指元素不会显示，已脱离文档流。 inline是指行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。...inline- block是指默认宽度为内容宽度，可以设置宽高，同行显示。 list-item是指像块类型元素一样显示，并添加样式列表标记。...浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素（父元素）或另一个浮动元素的边框为止。要想使元素浮动，必须为元素设置一个宽度（ width）。...设置 display属性为none，或者设置 visibility属性为 hidden技巧性的方式如下。设置宽高为0，透明度为0，设置z- index位置为-1000。

5K5 0

Web前端最全面试宝典- CSS篇

display:inline inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。...即对inline-block元素可以设置宽度和高度，同时inline-block元素又可以在同行进行排列。备注：属性为inline-block元素之间的空格或者换行在浏览器上会是一个空白的间隙。...10.如何水平居中一个元素如果需要居中的元素为常规流中inline元素，为父元素设置text-align: center;即可实现如果需要居中的元素为常规流中block元素 1）为元素设置宽度 2）...设置左右margin为auto 3）IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值 11.CSS优先级算法如何计算？...解决方案是加一个全局的*{margin:0;padding:0;}来统一。 3）IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

1.1K1 0

bootstrap5基本使用

给一个元素的class赋值为container之后，如果显示屏幕小于576，元素将要横向占满屏幕，但是大于576小于576像素的时候，宽度恒定为540,。...就是说你的屏幕很宽的时候，元素永远不会横向占满整个屏幕，与边距有孔隙。但是赋值为.container-fluid的时候，元素永远横向占满屏幕，不会留有孔隙。...">Columndiv> div> div> ---- Columns列垂直居中 .align-items-设置在row元素类中。...后加start、center、end，分别是顶部对齐，垂直居中，底部对齐 .align-self- 与上面的不同但相似，设置在column元素类中，单独对自身垂直方向对齐 div class="row..."> One of three columns div> div> 水平居中 .justify-content-设置在row元素类中。

4553 0

三. CSS layout（布局）

，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置，每一个盒子都由一下几个部分组成：内容区（content）内容区（content），元素中的所有的子元素和文本内容都在内容区中排列...- 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0 - 如果将三个值都设置为auto，则外边距都是0，宽度最大...不会影响页面的布局行内元素可以设置margin，垂直方向的margin不会影响布局 display 用来设置元素显示的类型可选值： inline 将元素设置为行内元素 block 将元素设置为块元素...inline-block 将元素设置为行内块元素行内块，既可以设置宽度和高度又不会独占一行如果有换行会出现空白格 table 将元素设置为一个表格 none 元素不在页面中显示 visibility...inline-block 将元素设置为行内块元素行内块，既可以设置宽度和高度又不会独占一行

2.2K4 0

《精通CSS》第3章可见格式化模型

如下，我们在模拟的边框上加一个虚线的轮廓，其只是在外围包括了一层轮廓，并不影响布局。 ? 轮廓不影响布局最后，内边距、边框和外边距都不是必需的，因此它们的默认值都是 0。...甚至同一个元素的外边距也会折叠，如果存在一个空元素，只有外边距没有边框和内边距，此时自身的上下边距接触，发生折叠。折叠后的外边距又接触其他元素的外边距，还会继续折叠。...只所以说设计之初是视口，是因为在后来引入了 transform 之后，当元素设置了 transfrom 属性后，会创建一个包含块，并且这个包含块会影响固定定位的子孙元素。...当一个块级盒子变为浮动盒子时，其宽度会自动收缩到适应内容大小的宽度，除非显示指定其他宽度。如下例所示，原本各盒子是撑满的，当盒子 1 有浮动后，内容变成了自适应。...我们可以通过以下规则允许元素创建自己的格式化上下文： display 设置为inline-block/table-cell的元素； float 属性值不是none的元素；绝对定位的元素； overflow

1.4K2 0

寒假提升｜ Day6 CSS 第四部分

默写出display常见的值，并且说出对应的特性，并且写出测试案例 block：让元素显示为块级元素;可以让元素独占一行,可以设置宽度和高度,高度默认由内容决定 inline：让元素显示为行内级元素 ;...可以和其他行内级元素在同一行,不可以设置宽度和高度,宽度和高度由内容决定 inline-block：让元素同时具备行内级、块级元素的特征 ;可以和其他行内级元素在同一行,可以设置宽度和高度,默认宽度和高度由内容决定...,将a的值设置为0 rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素 opacity设置透明度, 设置为0 设置整个元素的透明度, 会影响所有的子元素五.京东案例七....)有可能会合并为1个margin，这种现象叫做collapse(折叠) 水平方向上的 margin ( margin-left、margin-right)永远不会collapse 折叠后最终值的计算规则...，其他图片按顺序层叠在下面注意:如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的 3.2. background-repeat background-repeat 用于设置背景图片是否要平铺

1.3K2 0

04_BFC

元素的 margin-left 与其包含块的 border-left 相接触（X） BFC 是独立容器，容器内部元素不会影响容器外部元素 1.3 BFC 的应用 1.3.1 外边距折叠在常规文档流中...；两个子盒子的垂直距离为20px⽽不是30px，因为垂直外边距会折叠，间距以较大的为准。...那么如何让垂直外边距不折叠呢？特性中提到：BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，同样外面的元素不会影响到BFC内的元素。...class="outside"> div class="inside">div> div> 父元素 .outside 没有设置高度且子元素 .inside 都浮动时，父元素 .outside...class="left">div> div class="right">div> div class="center">div> 左右两边固定宽度，中间不设宽，因此中间的宽度⾃适应，随浏览器的大

501 0

可视化格式模型-浮动

浮动元素会缩短行框由于浮动框并不在常规流中，在该浮动框之前或之后创建的非定位框垂直排列，就好象浮动框并不存在一样。然而，浮动框之后创建的行框会被缩短，比便为浮动元素的 margin 框提供空间。...上面B的宽度为50px，它和浮动元素A的包含块都是C，宽度为200px。浮动元素在放置后，还有足够的空间放置B，所以，B 被紧挨着A 的margin 框被放置。...将B的宽度改为150px的话就会掉下来，但是这种方式与使用 clear 特性清除浮动不同。适用于哪些元素可设置给任意元素，但只适用于生成非绝对定位框的元素。对于绝对定位的元素，浮动没有任何效果。...以上两个浮动元素的包含块宽度为200px，无法在一行放置，所以，右浮动元素只好折行显示了。宽度设置成300px之后，则可以放到一行。 5. 浮动框的顶外边不能高于它包含块的顶部。...O、A、B都是浮动元素，O、A是做浮动元素，根据宽度计算，A应该处于O的下一行。B是右浮动浮动元素。按照标准，B浮动的时候，顶边不应高于A，因此，B不会放到O的右侧显示

1.2K10 0

前端工程师之BFC机制

元素的 margin-left 与其包含块的 border-left 相接触（X） BFC 是独立容器，容器内部元素不会影响容器外部元素 1.3 BFC 的应用 1.3.1 外边距折叠在常规文档流中...；两个子盒子的垂直距离为20px⽽不是30px，因为垂直外边距会折叠，间距以较大的为准。...那么如何让垂直外边距不折叠呢？特性中提到：BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，同样外面的元素不会影响到BFC内的元素。...class="outside"> div class="inside">div> div> 父元素 .outside 没有设置高度且子元素 .inside 都浮动时，父元素 .outside...class="left">div> div class="right">div> div class="center">div> 左右两边固定宽度，中间不设宽，因此中间的宽度⾃适应，随浏览器的大

1381 0

解析 CSS 格式化上下文

每个元素的左侧最外层边界与包含块 BFC 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC 的区域不会与 float box 折叠。... div> 创建 BFC 后避免折叠 ?...gray; margin: 20px 0; } div class="this">1️⃣div> div> div class="this">2️⃣div> div>...水平方向上，当行内元素的总宽度比行盒要小，那么行内元素在水平方向上的分部由 text-align 决定。...水平方向上，当行内元素的总宽度超过了行盒，那么行内元素会被分配到多个行盒中去，如果设置了不可折行等属性，那么行内元素会溢出行盒。

1.1K2 0

CSS专题，熟练布局技巧，需知文档流

自动换行块级元素和行内元素在HTML中，我们已经将标签分为了：文本级、容器级。文本级：p、span、a、b、i、u、em；容器级：div、h系列、li、dt、dd。...CSS标准文档流也将标签分为两种等级： 1)块级元素霸占一行，不能与其他任何元素并列；能接受宽、高；如果不设置宽度，那么宽度将默认变为父亲的100%。...inline就是“行内”，一旦，给一个块级元素设置display: inline; 那么，这个div将立即变为行内元素。...此时它和一个span无异，此时这个div：不能设置宽度、高度；可以和别人并排了。 2. 行内元素可以设置成块级元素语法为：display:block; “block”是“块”的意思。...让标签变为块级元素。此时这个标签，和一个div无异，此时这个span：能够设置宽度、高度；必须霸占一行了，别人无法和他并排；如果不设置宽度，将撑满父亲。

7903 0

BootStrap基础知识

toast.hide() 隐藏一个元素的吐司。您的吐司元件将保留在 DOM 上，但不会再显示。...to 将轮播指向特定的索引。(与数组相同，从 0 开始). 在目标项目显示前回传给调用者 (e.g., 在 slid.bs.carousel 事件发生之前)。 dispose 销毁一个元素的轮播。...类的情况下，宽度都是设置为 100%。...内联表单需要在元素上添加 .form-inline 类所有内联表单中的元素都是左对齐的在荧幕宽度小于 576px 时为垂直堆叠，如果荧幕宽度大于等于 576px 时表单元素才会显示在同一个水平线上...如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 "hover"。 Scroll滚动监听例： <!

3761 0

知识整理之CSS篇

opacity: 0; CSS3属性，设置0可以让元素透明。 filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而让元素消失“”在页面上。...position: absolute; 设置left值负值定位，使元素在可视范围内。 transform: scale(0); 将元素设置无限缩小，元素不可见，元素所在位置被保留。...height: 0; 将元素高度设置为0，并消除边框。 div hidden="hidden">div> HTML5属性，效果与display: hidden;一样。...浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠浮动元素的 margin 在垂直方向上也不会发生 margin 折叠，即使和它相邻的子元素也不会...原理：当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题

1.6K2 0

CSS3学习(一)——基础学习

，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置每一个盒子都由以下几个部分组成：内容区(content) 内边距( padding) 边框(border) 外边距...auto：width、margin-left、maring-right ->如果某个值为auto,则会自动调整为auto的那个值以使等式成立如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大...如果将三个值都设置为auto,则外边距都是0，宽度最大。如果将两个外边距设置为auto,宽度固定值，则会将外边距设置为相同的值。...可选值: inline：将元素设置为行内元素 block：将元素设置为块元素 inline-block：将元素设置为行内块元素，行内块，既可以设置宽度和高度又不会独占一行 table...：将元素设置为一个表格 none：元素不在页面中显示 visibflity：用来设置元素的显示状态可选值: visible：默认值，元素在页面中正常显示 hidden：元素在页面中隐藏不显示

7532 0

由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

div1和div2的垂直距离由大的margin决定，也就是div2的40px而不是二者之和60px。其次，行内元素是会被折断的，当宽度受到限制的时候，它会自动移动到下一行。...如果我们设置div1的position为： 1 #div1 { position: absolute;} 此时，div1 的 containing block 就不再是 body，它变成了初始 containing...在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。即是在BFC中相邻的块级元素的垂直边距会折叠（collapse）。...高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom 那么，什么情况下会创建BFC：浮动元素（float: left...1 .main { 2 overflow: hidden; 3 } 当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。

1.1K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭