bfc

解决 外边距折叠问题

佐手、 提交于 2020-04-08 13:06:15
当两个元素 垂直相邻 时,如果两个元素分别向同一方向设置了各自的外边距,那么会产生合并,取其中最大正值。 如果其中一个元素是负的呢? 答案: 正值 - 负值 得 正值 如果两个元素都是负值呢? 答案:负值 - 负值 得 负值 总结: 1.如果存在负值,会是减法 2.如果是正值,则直接取大值 博主建议:上面的了解一下就行,知道这么一个问题,然后知道怎么解决就行。 解决办法: 只给 一个元素设置外边距 就好了,或者触发 BFC 但不推荐。 为什么触发 BFC 能解决外边距折叠? 答:因为外边距折叠只会发生在属于同一BFC的块级元素之间。 如果你不知道什么是 BFC , 可以看这篇来自 MDN 的文章 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context 还有参考文献: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing https://drafts.csswg.org/css-display/#valdef-display-flow-root 来源: https://www.cnblogs.com/xiaolantian/p/12658885.html

前端面试题CSS

会有一股神秘感。 提交于 2020-04-02 06:13:28
文章目录 万能居中 BFC优化 盒模型哪两种模式?什么区别?如何设置 常用清除浮动的方法,如不清除浮动会怎样? 删格化的原理 纯css实现三角形 高度不定,宽100%,内一p高不确定,如何实现垂直居中? 至少两种方式实现自适应搜索 设置一段文字的大小为6px css菊花图 关于em 关于vh, vw Flex布局 overflow原理 实现自适应的正方形: 标准模式和怪异模式 CSS3实现环形进度条 css优先级 万能居中 1.margin: 0 auto;水平 2.text-align: center;水平 3.行高,垂直 4.表格,center,middle;水平垂直 5.display:table-cell;模拟表格, 6.绝对定位,50%减自身宽高 7.绝对定位,上下左右全0,margin:auto 8.绝对定位加相对定位。不需要知道宽高 9.IE6,IE7:给父元素设一个font-size:高度/1.14,vertical-align:middle BFC优化 块格式化上下文, 特性: 使 BFC 内部浮动元素不会到处乱跑; 和浮动元素产生边界。 盒模型哪两种模式?什么区别?如何设置 标准模式: box-sizing: content-box; 宽高不包括内边距和边框 怪异模式: box-sizing: border-box ​ 常用清除浮动的方法,如不清除浮动会怎样?

浅析CSS里的 BFC 和 IFC

匆匆过客 提交于 2020-03-31 13:56:19
前端日刊 登录 浅析CSS里的 BFC 和 IFC 2018-01-29 阅读 1794 收藏 3 原链: segmentfault.com 分享到: 前端必备图书《Web安全开发指南 掌握白帽子的Web安全技能 从源头消除安全隐患 打造安全无虞的Web应用》 >> >> 前言 之前一直听到有人提到 CSS里的BFC,正巧在 IFE的练习里遇到了外边距折叠的问题,所以正好弄清楚BFC的机制。 (参考来源 见文末的 Reference) 一 什么是 BFC 和之前所有博文一样,还是先从What的角度开始介绍,由浅入深的理解BFC。 所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。 它是页面中的一块渲染区域,并且有一套渲染规则. 它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。 而 Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则。通俗一点讲,可以把 BFC 理解为一个封闭的大箱子,,容器里面的子元素不会影响到外面的元素,反之也如此。 BFC的布局规则如下: 1 内部的盒子会在垂直方向,一个个地放置; 2 BFC是页面上的一个隔离的独立容器; 3 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ; 4 计算BFC的高度时

学习笔记-CSS-盒模型、BFC

大城市里の小女人 提交于 2020-03-30 23:59:26
先看一道题目:谈谈你对CSS盒模型的理解,思考应该如何回答... 涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别) JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 基本概念 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model): 不同部分的说明: margin(外边距) - 清除边框外的区域,外边距是透明的。 border(边框) - 围绕在内边距和内容外的边框。 padding(内边距) - 清除内容周围的区域,内边距是透明的。 content(内容) - 盒子的内容,显示文本和图像。 盒子在标准流中的定位原则: margin控制的是盒子与盒子之间的距离,padding存在于盒子的内部它不涉及与其他盒子之间的关系和相互影响问题,因此要精确控制盒子的位置,就必须对margin有更深入的了解。 (1)行内元素之间的水平margin 当两个行内元素紧邻时,它们之间的距离为第一个元素的右margin加上第二元素的左margin。 (2)块级元素之间的竖直margin

BFC和IFC

喜你入骨 提交于 2020-03-28 15:18:50
IFC IFC(inline formatting context),即⾏内格式化上下⽂,与之对应的是BFC(block formating context),块格式化上下⽂ 在IFC中,框(boxes)⼀个接⼀个地⽔平排列,起点是包含块的顶部。⽔平⽅向上的margin,border和padding在框之间得到保留。框在垂直⽅向上可以以不同的⽅式对⻬:它们的顶部或底部对⻬,或根据其中⽂字的基线对⻬。包含那些框的⻓⽅形区域, 会形成⼀⾏,叫做⾏框(line box)。 ⼀个⾏框的宽度由包含它的元素的宽度和包含它的元素⾥⾯有没有float元素来决定,⾼度的确定由⾏⾼度计算规则决定。 ⾏框的⾼度⾜以包含他的内部容器,也可能⽐它包含的容器们都⾼(⽐如在基线对⻬的时候),当他包含的内部容器的⾼度⼩于⾏ 框的⾼度时,内部容器的垂直位置由⾃⼰的vertical(默认值是 baseline)这个属性来确定。(这个性质可以⽤来实现垂直居中) eg:<p style="background:silver;width:400px;"> <span style="font-size:50px;border:1px solid yellow;">你好</span><em style="border:1px solid yellow;">我好</em><span style="vertical-align

盒模型

爱⌒轻易说出口 提交于 2020-03-27 06:39:44
1. box-sizing: 默认取值content-box,width对应内容区content的宽度。 当box-sizing取值为border-box时,给出padding, border后,width对应的是content的宽度+padding(左右)+border(左右) 2. 元素width的单位为%时,是相对于其父元素width的百分比; * 上下方位的padding,margin单位为%,是相对于包含块的 width 来计算 。 包含块:如果元素的 position是static(默认值)或者relative【这两种属于常规文档流】 , 则包含块的边界计算到最近一个父元素;该元素的display属性必须能够提供类似块级上下文,如:block, inline-block, table-cell, list-item等。默认情况下,width, height, padding, margin的值为百分比时,以父元素的尺寸为依据。 脱离常规文档流: position: absolute 浮动 块级格式化上下文(BFC): 满足以下条件可以创建自己的BFC position: absolute display: inline-block, table-cell float: 不是none overflow: 不是visible BFC规则: 自动包含浮动的元素

那些年我们一起清除过的浮动

与世无争的帅哥 提交于 2020-03-27 05:53:43
浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器)。也许很多人都有这样的疑问, 浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么? 本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)? 很多人都已经习惯称之为清除浮动,以前我也一直这么叫着,但是确切地来说是不准确的。我们应该用严谨的态度来对待代码,也能更好地帮助我们理解开头的三个问题。 1)清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:left | right | both | none; 2)闭合浮动:更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。 两者的区别 请看优雅的 Dem o 通过以上实例发现,其实我们想要达到的效果更确切地说是闭合浮动,而不是单纯的清除浮动,在footer上设置clear:both清除浮动并不能解决warp高度塌陷的问题。 结论:用闭合浮动比清除浮动更加严谨,所以后文中统一称之为:闭合浮动。 二、为何要闭合浮动? 要解答这个问题,我们得先说说CSS中的定位机制:普通流,浮动,绝对定位 (其中

那些年我们一起清除过的浮动

人走茶凉 提交于 2020-03-27 05:45:56
浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器)。也许很多人都有这样的疑问, 浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么? 本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)? 很多人都已经习惯称之为清除浮动,以前我也一直这么叫着,但是确切地来说是不准确的。我们应该用严谨的态度来对待代码,也能更好地帮助我们理解开头的三个问题。 1)清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:left | right | both | none; 2)闭合浮动:更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。 通过以上实例发现,其实我们想要达到的效果更确切地说是闭合浮动,而不是单纯的清除浮动,在footer上设置clear:both清除浮动并不能解决warp高度塌陷的问题。 结论:用闭合浮动比清除浮动更加严谨,所以后文中统一称之为:闭合浮动。 二、为何要清除浮动? 要解答这个问题,我们得先说说CSS中的定位机制:普通流,浮动,绝对定位 (其中"position:fixed" 是

BFC(block formatting context)

依然范特西╮ 提交于 2020-03-25 17:48:02
BFC(block formatting context):块级格式化上下文 触发BFC: 1.根元素 2.float; 3.overflow:auto,scroll,hidden; 4.display:table-cell、table-caption、inline-block、flex、inline-flex; 5.position:absolute、fixed; 注: 一、没有父级的元素为根元素 二、浮动会触发BFC 三、overflow 属性规定当内容溢出元素框时发生的事情: overflow:hidden;1.子集margin-top把父级一起往下带;2.子级浮动导致高度塌陷,可以自动找回高度;3.子级超出父级容器范围 overflow:scroll;多用于留言板类型 来源: https://www.cnblogs.com/YYouyang/p/7470717.html

IE的特有属性hasLayout和BFC

你。 提交于 2020-03-25 17:37:55
IE多数的bug源于hasLayout属性,这个属性在IE8及以后的浏览器中被抛弃 IE7及以下版本不支持BFC 块级格式化上下文BFC# BFC是W3C CSS 2.1 规范中的一个概念,它决定了元素如何 对其内容进行定位 ,以及与 其他元素的关系和相互作用 。当涉及到可视化布局的时候, Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局 。一个环境中的元素不会影响到其它环境中的布局。 也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器,并且这个容器的里box的布局,与这个容器外的毫不相干。 BFC的规则# 1、在创建了 Block Formatting Context 的元素中,其子元素按文档流一个接一个地放置。 垂直方向上他们的起点是一个包含块的顶部 ,两个相邻的元素之间的 垂直距离 取决于 ‘margin’ 特性。 根据 CSS 2.1 8.3.1 Collapsing margins 第一条,两个*相邻的普通流中的块框*在垂直位置的空白边会发生折叠现象。也就是*处于同一个BFC中的两个垂直窗口的margin会重叠。* 根据 CSS 2.1 8.3.1 Collapsing margins 第三条,*生成 block formatting context 的元素不会和在流中的子元素发生空白边折叠。