在写css样式时,可能是添加了一个样式后就达到了预期效果。有没有想过,是我们在不经意间触发了什么,帮助我们达到了效果?本文就快速介绍下css样式中经常使用的BFC,主要包括以下几个方面:
当我们学习CSS时,我们大多数人学到的第一件事是CSS中盒子的各个部分的细节,这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin,即盒子周围的透明区域,它会将其他元素从盒子内容中推开。
BFC全称是Block Formatting Context,即块格式化上下文。它是CSS2.1规范定义的,关于CSS渲染定位的一个概念。
属性选择器 , 伪类选择器 的 权重 , 与 类选择器 权重相同 , 都是 10 ;
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。 CSS盒模型:标准模型 + IE模型
1、translate(x,y) 设置盒子位移 2、scale(x,y) 设置盒子缩放 3、rotate(deg) 设置盒子旋转 4、skew(x-angle,y-angle) 设置盒子斜切 5、perspective 设置透视距离 6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示 7、translateX、translateY、translateZ 设置三维移动 8、rotateX、rotateY、rotateZ 设置三维旋转 9、scaleX、scaleY、scaleZ 设置三维缩放 10、tranform-origin 设置变形的中心点 11、backface-visibility 设置盒子背面是否可见
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是
在解释什么是BFC之前,我们需要先知道Box、Formatting Context的概念。
把所有 HTML 元素都看作是一个 盒子(Box), 这个盒子包着一层又一层, 这就是盒模型.
盒子模型又称为框模型,HTML页面所有的元素都具有盒子模型,该模型用于设计HTML页面和实现HTML页面布局。
一个盒子由四个部分组成:conent, padding, border, margin
其实我们大家都能经常看见它,尤其是我们前端的小伙伴们,在浏览器中打开f12就能看见这样一个动态变化的图。
margine 正常情况下使用 , 设置 float 浮动 , 使得相邻的盒子模型紧贴在一起 ;
HTML→head→tittle→text(网页标题)→style→加载样式→解析样式→link→加载外部样式表文件→解析外部样式表文件→script→加载外部脚本文件→执行外部脚本→body→div→script→加载脚本→解析脚本→执行脚本→img→script→加载脚本→解析脚本→执行脚本→加载外部图像文件→页面初始化完毕
一个HTML元素要创建BFC,则满足下列的任意一个或多个条件即可: 下列方式会创建块格式化上下文:
(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)
position属性取值:static(默认)、relative、absolute、fixed、inherit、sticky。 float属性取值:none(默认)、left、right、inherit。 display属性取值:none、inline、inline-block、block、table相关属性值、inherit。 固定定位 fixed: 元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关,因此不占据空间。 Fixed 定位的元素和其他元素重叠。(脱离文档流) 相对定位 relative: 如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直 或水平位置,让这个元素“相对于”它的起点进行移动。 在使用相对定位时,无论是 否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。 绝对定位 absolute: 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那 么它的位置相对于 。absolute 定位使元素的位置与文档流无关,因此不占据空间。absolute 定位的元素和其他元素重叠。(脱离文档流) 粘性定位 sticky: 元素先按照普通文档流定位,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。而后,元素定位表现为在跨越特定阈值前为相对定 位,之后为固定定位。 默认定位 Static: 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声 明)。 inherit: 规定应该从父元素继承 position 属性的值。
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。
在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。
写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin collapse,base line,writing mode,bidi,这样一路问下去的,奈何第一个问题(亲我真的只问了position有哪些取值和行为啊)就悲剧了…… 说到position,那么稍微对c
浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式化上下文)。
大家好,我是HoMeTown,今天想聊一聊CSS中的BFC,很多朋友应该都听过这个名词,搞懂BFC可以让我们理解CSS中一些很诡异的地方,话不多说,直奔主题!
div层、span层等html标签层重叠顺序样式z-index,平时CSS使用较少,但也会难免会碰到CSS z-index使用。
原文:clearfix Reloaded + overflow:hidden Demystified clearfix 和 overflow:hidden 可算得上是不增加额外标签清除浮动的两个最流行的技术了。 这篇短文介绍了如何改进clearfix进行增强,同时对overflow:hidden进行了深入的解释。 clearfix 曾经在网上流行的一种clearfix的方法: .clearfix:after { content: "."; display: block; height
网页是一个多层的结构,一层摞着一层,通过CSS可以分别为每一层来设置样式,作为用户来讲只能看到最顶上一层,这些层中,最底下的一层称为文档流,文档流是网页的基础, 我们所创建的元素默认都是在文档流中进行排列,
网页看着不方便,想要文档可以私聊我。要是有错别字和错误的地方,请各位大佬直接指出,谢谢啦!!
CSS中有个重要的概念BFC,搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介 在解释BFC之前,先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其
标准盒子模型:宽度=内容宽度(content)+ border + padding + margin IE盒子模型:宽度=内容宽度(content + border + padding)+ margin
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。
BFC(Block Formatting Context)格式化上下文,是盒模型的一种渲染布局,简言之可以理解为 一个独立的容器,不受外部影响,不影响外部。
工作中其实经常用到一些span标签和div标签来进行内容的显示,但涉及到文本标签的换行,总得多花那么一两分钟多写一下,今天就专门来瞅一瞅。
如果没有给一个盒子指定宽度, 此时,如果给这个盒子指定padding, 则不会撑开盒子。
标准文档流 指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的 流式排列方式 。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。
如果你在日常工作中使用CSS,那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。
HTML5学堂-码匠:W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少? 有不少前端开发工程师,可能并不清楚下面的部分词语,但是在实战中其实都在使用着它们。 明确一
CSS 是层叠样式表(Cascading Style Sheets)的简写,它是一种用于定义网页和网页应用程序外观的标准格式语言。
z-index是一个用于控制文档中图层顺序的属性。具有较高z-index值的元素将会出现在具有较低值的元素之上。就像页面上的x轴和y轴决定一个元素在水平和垂直方向上的位置一样,z-index控制它们在z轴上相互层叠的方式。
margin-right 规定该属性用于设置与元素相关联的盒子模型的右外边距,可为负值。
CSS 1.1 CSS 编写的位置 使用CSS来修改元素的样式 第一种方式:内联样式/行内样式 第二种方式:内部样式表 第三种方式:外部样式表(最佳实践) 1.1.1 内联样式 在标签内部通过style属性来设置元素的样式 问题: 使用内联样式,样式只能对一个标签生效, 如果希望影响到多个元素必须在每一个元素中都复制一遍 并且当样式发生变化时,我们必须要个一个的修改, 非常的不方 便 注意:开发时绝对不要使用内联样式 <p style="color: red; fon
margin-left 该属性用于设置与元素相关联的盒子模型的左外边距。这个值可以为负值。
流动布局有3种布局模型,分别是流动布局(常规默认时)、定位布局(relative)以及浮动布局,其中所述的流动布局、定位布局已在第一点讲解,接下来咱们查看浮动布局。
CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣,可移步至:知识整理之HTML篇
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文” BFC元素特性表现原则就是:内部子元素不会影响外部的元素。
在进入BFC话题前,先来捋一下常见的定位方案,定位方案是控制元素的布局,主要有三种常见的方案:
内容区(content) 内容区是盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。内容区有三个属性,width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度,当内容信息太多,超出内容区所占范围时,可以使用overflow 溢出属性来指定处理方法。当overflow 属性值为hidden时,溢出部分将不可见;为visible时,溢出的内容信息可见,只是被呈现在盒子的外部;当为scroll时,滚动条将被自动添加到盒子中,用户可以通过拉动滚动条显示内容信息;当为auto时,将由浏览器决定如何处理溢出部分。
盒模型(Box Model) (opens new window),包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)。
在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案:
领取专属 10元无门槛券
手把手带您无忧上云