展开

关键词

小结BFC的基本知识与应用

属于同一BFC的相邻的Box的margin会发生; 可应用到解决margin的问题中: 可在其中一元素外包裹一层容器,并触发该容器生成BFC(overflow:hidden;),这样元素就不属于同一 (3)生成BFC元素的元素中,每一元素的margin与包含块的左边界border相接触(对于从左到右的格式化,否则相反),即使存在浮动也是如此; (4)BFC的区域不会与float元素区域 可应用到栏布局中 由于“BFC的区域不会与float元素区域”,因此可以实现栏布局。下面应用中会举例阐述。 (5)BFC就是页面上的一隔离的独立容器,容器里面的元素不会影响到外面的元素,反之亦然。 overflow: hidden; } 效果: bfc解决栏.png 不过我人觉得这样做只是让BFC的区域不会与float元素区域,实现了栏布局效果,但并不是自适应的栏布局,上述例只是刚好父容器的宽度 如果把父容器的container的宽度,设为一小于左的宽度+右边的宽度值(200px+300px),如400px时,就会看到这样的效果: 栏.png 说明左右并不会自动调整宽度来自适应的布局

2.1K651

关于 CSS margin,一些让你模糊的点

margin 发生时,它们将组合在一起,元素之间的空间取较大的一。 较小的 margin 在较大的里面。 在以下情况下,margin 会: 相邻的兄弟姐妹 完全空 父元素和第一或最后一元素 依次来看看这些场景。 如果一是空的,那么它的顶部和底部 margin 可能会相互。 这是由于 margin 造成的。如果向空中放入内容就会阻止 margin 合并。 然而,假设你遇到了上面示例中的几种情况,那么如何才能阻止 margin 呢? 例如,一完全空的,如果它有border或padding,它的上下 margin就不会

31420
  • 广告
    关闭

    腾讯云618采购季来袭!

    一键领取预热专享618元代金券,2核2G云服务器爆品秒杀低至18元!云产品首单低0.8折起,企业用户购买域名1元起…

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    关于css margin,你需要知道的一切

    margin 发生时,它们将组合在一起,元素之间的空间取较大的一。 较小的 margin 在较大的里面。 在以下情况下,margin 会: 相邻的兄弟姐妹 完全空 父元素和第一或最后一元素 依次来看看这些场景。 如果一是空的,那么它的顶部和底部 margin 可能会相互。 这是由于 margin 造成的。如果向空中放入内容就会阻止 margin 合并。 然而,假设你遇到了上面示例中的几种情况,那么如何才能阻止 margin 呢? 例如,一完全空的,如果它有border或padding,它的上下 margin就不会

    27740

    【CSS】309- 复习 CSS模型

    点击上方“前端自习课”关注,学习起来~ 一、概念 CSS模型本质上是一,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content 2.4 实例题(根据模型解释边距) 例:父元素里面嵌套了一元素,已知元素的高度是 100px,元素与父元素的上边距是 10px,计算父元素的实际高度。 ? 2.5 BFC(边距解决方案) 2.5.1 BFC基本概念 BFC: 块级格式化上下文 BFC基本概念:BFC 是 CSS 布局的一概念,是一块独立的渲染区域,是一环境,里面的元素不会影响到外部的元素 父元素和兄弟元素边距原则取最大值。空元素的边距是取 margin 与 padding 的最大值。 3、可以让父元素的高度包含浮动元素,清除内部浮动(原理:触发父 div 的 BFC 属性,使下面的 div 都处在父 div的同一 BFC 区域之内) 4、去除边距现象,分属于不同的 BFC

    29830

    Android开发人员一次搞懂前端BFC原理

    而块级格式化上下文(BFC)是页面中一相对独立的模块,它定义了它内部的块级(块级元素的模型)如何排布和布局。html的根元素<html></html>标签就会产生一BFC区域。 BFC规则 1、内部的块级会在垂直方向,一接一地放置。 2、块级垂直方向的距离由margin决定。属于同一BFC的相邻块级的margin会发生。 其实我们会发现我们当初学习HTML和CSS时,很多块级元素的规则其实就是BFC的规则。 2、块级垂直方向的距离由margin决定。属于同一BFC的相邻块级的margin会发生。 这就是BFC中经常发生的边距的情况。而且的情况会根据的块级的margin值有关,在这里即:div1的margin-bottom和div2的margin-top值有关系。 如何解决margin边距 根据BFC规则:属于同一BFC的相邻块级的margin会发生。因此我们只要使div1与div2不属于同一BFC即可: 1<!

    33820

    什么是BFC?看这一篇就够了

    BFC的布局规则 内部的Box会在垂直方向,一接一地放置。 Box垂直方向的距离由margin决定。属于同一BFC的相邻Box的margin会发生。 每(块与行)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box。 >   页面生成的效果就是这样的: 根据第二条,属于同一BFC的相邻的Box会发生margin,所以我们可以设置,不同的BFC,也就是我们可以让把第二p用div包起来,然后激活它使其成为一 > 2.自适应栏布局 根据: 每的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。 避免margin也是这样的一道理。

    6320

    CSS 布局

    模型 #组成 模型主要包含四部分: margin border padding content #模型 W3C 标准模型:context = width IE 模型:border + padding 通俗一点讲,可以把 BFC 理解为一封闭的大箱,箱内部的元素无论怎样翻江倒海,都不会影响到外部。 #BFC 特点 BFC 垂直方向边距(margin) BFC 是一独立的容器,外面的元素不会影响到里面的元素 BFC 的区域与会与浮动元素的 box 计算 BFC 高度的时候浮动元素也会参与计算 如设置:overflow:hidden; 避免外边距折 块同在一 BFC 会造成垂直方向的外边距折,但如果对这块分别设置 BFC,那么边距的问题就不存在了。 不和浮动元素 在一BFC中使用BFC可以做列布局时使用 #水平居中布局 #空间居中布局 Grid 布局 .container { display: grid; place-items

    14520

    CSS进阶07-浮动Floats

    因此,在之前的例中, p 和 img 浮动的垂直外边距不会折。 当发生时,浮动会被渲染在非定位文档流内块 Non-positioned In-flow Blocks 之上,文档流内行内之下。 这有,演示了浮动与常规流中元素的边框的情况。 ? 浮动图片挡住了与其的块的边框。 下面的例演示了使用 clear 属性阻止内容紧邻浮动。 假设规则如下: p { clear: left } 格式化结果可能如下所示: ? 左浮动的右外边缘不可在其旁边的右浮动的左外边缘之右。右浮动元素亦是。 浮动的上外边缘不可高于其包含块的顶部。当浮动出现外边距之间时,浮动会如同它有一参与标准流的空匿名父块一样来定位。 来看: eg1:假设(为简单起见)有三,顺序如下: B1 块的下外边距bottom margin为 M1 ( B1 没有元素也没有padding和border);浮动块 F 的高度为 H

    40340

    关于BFC的整理

    通俗的来说:BFC是一独立的布局环境,我们可以理解为一(实际上是看不见摸不着的),箱内部的元素无论如何翻江倒海,都不会影响到外部。 转换为BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这特性来消除浮动元素对其非浮动的兄弟元素和其元素带来的影响。) 并且在一BFC中,块与行(行由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。 3.BFC生成的条件是? 1.防止margin <! > 发现同级的块级在垂直方向上margin值应该是20px,但是却只有10px,发生了 于是我使用BFC的一条规则 " overflow: hidden; "来去除问题 <!

    9010

    一文掌握 CSS 的 BFC 知识点

    BFC 下外边距会发生折 计算 BFC 的高度时,浮动元素也参与计算 BFC 的区域不会与浮动(清除浮动原理) 示例 1)同一 BFC 下外边距会发生折 属于同一 BFC 的相邻 Box (如果想要避免外边距的,可以将其放在不同的 BFC 容器中) 如下示例,因为 div 元素都处于同一 BFC 容器下 (这里指 display: flow-root 的元素) ,所以第一 div 的下边距和第二 div 的上边距发生了之间的距离是 10px 而非累加的 20px。 3)BFC 的区域不会与浮动(清除浮动原理) 先来看一文字环绕效果: 这时候其实第二元素有部分被浮动元素所覆盖(但是文本信息不会被浮动元素所覆盖),如果想避免元素被覆盖,可触第二元素的 BFC 该属性总是会创建一新的格式化上下文,即便具有 column-span: all 的元素并不被包裹在一多列容器中) BFC 的应用 利用 BFC 避免 margin 自适应栏布局 清除浮动 -

    19230

    【CSS】410- 关于CSS模型、BFC及其应用

    关于CSS的模型,正确的解释应该是这样的: 把所有 HTML 元素都看作是一 (Box), 这包着一层又一层, 这就是模型. Box垂直方向的距离由margin决定,在一BFC中,相邻的块级的垂直外边距会产生折。 在BFC中,每一的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘) 形成了BFC的区域不会与float box 计算BFC BFC主要的作用: 清除浮动 防止同一BFC容器中的相邻元素垂直方向的外边距问题 举例 1. 同一 BFC 下的块级元素之间的外边距会发生折. ? 这是因为它们之间的外边距折了. 你可以这样理解, 只有一外边距起作用了. 如果有另外一种场景, 元素的外边距长短不一样, 那会是外边距较长的那一起作用. ? 就是这样.

    23320

    CSS进阶04-块格式化上下文BFC

    BFC渲染规则 CSS2.2中规定BFC具有如下特征: 在一块格式化上下文中,从包含块顶部开始一接一地垂直摆放。同胞间的垂直距离取决于 margin 属性。 同一块格式化上下文中的相邻块级的垂直外边距将折。 下面,我们详细举例说明这条规则: 3.1 在一块格式化上下文中,从包含块顶部开始一接一地垂直摆放。同胞间的垂直距离取决于 margin 属性。 同一块格式化上下文中的相邻块级的垂直外边距将折。 <! 4.2 BFC可以用来防止margin折。 看下面这: <!

    22730

    CSS(三)

    CSS 将 HTML 文档中的每元素视为一”框”或””,其中包含一系列不同的属性,用于确定它在页面上的显示位置。 Block 元素和 Inline 元素 屏幕上呈现的每 HTML 元素都是一框,它们有种形式: Block boxes 和 Inline boxes。 或者更确切地说,一和它周围的之间的空间。 p { margin-bottom: 50px; } margin 和 padding 有一样的速记形式。 但是,它不会影响周围的垂直布局。 垂直边距折 模型的另一怪癖是”垂直边距折”。当你有垂直边距彼此相邻的时,它们会折。不是将边距加到一起,而是仅显示最大的边距。 垂直外边距折最可能发生的种简单情况: 紧邻的兄弟元素的外边距发生折元素的外边距发生折元素与父元素的上外边距发生折元素与父元素的下外边距发生折 预防边距折 有时我们确实希望防止边距折

    14620

    CSS篇-面试题4-外边距问题

    float 的,都是左浮动,外边距问题 float的,都是左浮动, A 的margin-right为 100px, B 的margin-left为 200px,问 A 与 /div> css 代码 .box-a, .box-b { width: 100px; height: 100px; float: left; // 都浮动 } .box-a { 答案:A-B 之间的间距是 300px 结论:当元素横向方向外边距时,不会出现外边距迭代的问题 外边距加的问题 普通的, A 的margin-bottom为100px, B 的margin-top 为200px,问 A 与 B 之间的距离是多少 html 代码

    三. CSS layout(布局)

    ,每一都由一下几部分组成: 内容区(content) 内容区(content),元素中的所有的元素和文本内容都在内容区中排列 内容区的大小由width 和 height属性来设置: 一从上面撞进去了,他于是遇到火,而且我以为这火是真的。却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的痕,一角还画出一枝猩红色的栀

    </body> </html> 2.6 模型 外边距的折 垂直外边距的(折):相邻的垂直方向外边距会发生现象 兄弟元素 兄弟元素间的相邻垂直外边距会取者之间的较大值 (者都是正值) 特殊情况: 如果相邻的外边距一正一负,则取者的和 如果相邻的外边距都是负值,则取者中绝对值较大的 兄弟元素之间的外边距的,对于开发是有利的,所以我们不需要进行处理 (折) - 相邻的垂直方向外边距会发生现象 - 兄弟元素 - 兄弟元素间的相邻垂直外边距会取者之间的较大值

    18040

    一篇文章带你了解css z-index(顺序)

    div cssz-index层顺序 div层、span层等html标签层顺序样式z-index,平时CSS使用较少,但也会难免会碰到CSS z-index使用。 通常CSS让不同的对象以不同顺序排列,CSS就是要z-index样式属性。 三、案例 1. z-index顺序案例 为了方便观察,设置3DIV,分别设置不同css背景颜色,设置相同CSS高度、CSS宽度。分别设置背景颜色)为黑色、红色、蓝色。 Div css5-1 背景为黑色, z-index:10 Div css5-2 背景为红色, z-index:20 Divcss5-3背景为蓝色 , z-index:15 为可以看见第一 z-index:10,所以在最下层,而第二z-index:20,值最大所以最上层,第三设置z-index:15,居中。

    16830

    1.5 万字 CSS 基础拾遗(核心知识、常见需求)

    图来源于 yachen168 BFC 渲染规则 内部的会在垂直方向,一接一地放置; 垂直方向的距离由 margin 决定,属于同一 BFC 的相邻的 margin 会发生; 每元素的 margin 的左边,与包含块 border 的左边相接触(对于从左往右的格式化,否则相反),即使存在浮动也是如此; BFC 的区域不会与 float ; BFC 就是页面上的一隔离的独立容器 浮动非定位的节点 标准流内行内非定位的节点 z-index: auto/0 的节点 z-index > 0的节点 如何比较元素的层等级? 在同一上下文中,比较元素就是按照上图的介绍的层顺序进行比较。 如果不在同一上下文中的时候,那就需要比较元素分别所处的层上下文的等级。 如果元素都在同一上下文,且层顺序相同,则在 HTML 中定义越后面的层等级越高。

    13320

    相关产品

    • 云服务器

      云服务器

      云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。 腾讯云服务器(CVM)为您提供安全可靠的弹性云计算服务。只需几分钟,您就可以在云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券