文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

理解 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.4K00

理解 CSS 布局和 BFC

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

1.1K00
您找到你想要的搜索结果了吗？
是的
没有找到

盒模型

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

1.8K20

【愚公系列】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是什么,有什么优缺点？ 概念：将多个小图片拼接到一个图片中。

3K20

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。

4.9K50

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比设置的大。

1K10

三. CSS layout（布局）

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

2.1K40

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

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

1.3K20

寒假提升 ｜ 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.3K20

可视化格式模型-浮动

浮动元素会缩短行框 由于浮动框并不在常规流中，在该浮动框之前或之后创建的非定位框垂直排列，就好象浮动框并不存在一样。然而，浮动框之后创建的行框 会被缩短，比便为浮动元素的 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.2K100

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：能够设置宽度、高度；必须霸占一行了，别人无法和他并排；如果不设置宽度，将撑满父亲。

75530

BootStrap基础知识

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

23210

知识整理之CSS篇

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

1.5K20

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：元素在页面中隐藏不显示

72020

由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.1K50

HTML和CSS

盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。...最基本的： 设置display属性为none，或者设置visibility属性为hidden 技巧性： 设置宽高为0，设置透明度为0，设置z-index位置在-1000em 20....即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明...给div设置一个宽度，然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 居中一个浮动元素...最基本的： 　　设置display属性为none，或者设置visibility属性为hidden 　　技巧性： 　　设置宽高为0，设置透明度为0，设置z-index位置在-1000 55.

5.3K30

前端学习(13)~css学习(七)：浮动

标准文档流的特性 （1）空白折叠现象： 无论多少个空格、换行、tab，都会折叠为一个空格。...默认的宽度，就是文字的宽度。 块级元素： 霸占一行，不能与其他任何元素并列； 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。...性质4：收缩 收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。...iv本身是块级元素，如果不设置width，它会单独霸占整行；但是，设置div浮动后，它会收缩 浮动的补充（做网站时注意） ? 上图所示，将para1和para2设置为浮动，它们是div的儿子。...解决办法很简单，就是将盒子的字号大小，设置为小于盒子的高，比如，如果盒子的高为5px，那就把font-size设置为0px(0px < 5px)。

87210
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券