bfc | 易学教程

BFC、IFC、FFC、GFC

阅读更多关于 BFC、IFC、FFC、GFC

FC（Formatting Context）它是W3C CSS2.1规范中的一个概念，定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFC（block formatting context）直译为“块级格式化上下文” W3C原文： Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents. In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The

选择器的级别、浮动的深入理解、定位的使用

阅读更多关于选择器的级别、浮动的深入理解、定位的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位排版属性</title> <style type="text/css"> .b1,.b2,.b3{ width:200px; height:200px; display: inline-block; } .b1{ background-color: red; } .b2{ background-color: black; } .b3{ position: relative; bottom:-100px; background-color: blue } </style> </head> <body> <!-- static 静态定位（默认属性值） relative 相对定位相对于自身的位置相对定位的特点：元素移动后原始位置会被保留下来（不脱离文档流）同时提升元素层级相对自身偏移位置如果祖先元素只是用于子元素定位可以设置相对定位即可 absolute 绝对定位相对于其最近的已经定位的父元素如果没有这样的祖先元素则找最外层的包含框进行定位绝对定位的特点：脱离文档流（被后边的元素占用了其原来的位置）提升层级相对于定位了的祖先进行偏移不设置宽度时候宽度由内容撑开行内元素设置为绝对定位后可以设置宽高

BFC和清浮动问题

阅读更多关于 BFC和清浮动问题

BFC 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。让浮动内容和周围的内容等高创建一个会包含这个浮动的BFC，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。外边距塌陷创建新的BFC避免两个相邻div之间的外边距合并问题使用display: flow-root 一个新的 display 属性的值，它可以创建无副作用的BFC。在父级块中使用 display: flow-root 可以创建新的BFC。给div加display: flow-root 属性后，div中的所有内容都会参与BFC，浮动的内容不会从底部溢出。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 /**创建一个会包含这个浮动的BFC，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。**/ 8 .box { 9 background-color

【css】浅谈BFC

阅读更多关于【css】浅谈BFC

定义：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 BFC的布局规则如下： 1.内部的盒子会在垂直方向，一个个地放置； 2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠； 3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； 4.BFC的区域不会与float重叠； 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此； 6.计算BFC的高度时，浮动元素也参与计算。以下行为会触发BFC 官方：根元素(<html>) 浮动元素（元素的 float 不是 none）绝对定位元素（元素的 position 为 absolute 或 fixed）行内块元素（元素的 display 为 inline-block）表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group

css — 权重、继承性、排版、float

阅读更多关于 css — 权重、继承性、排版、float

目录 1. 继承性 2. css中的权重 3. 常用格式化排版 4. 浮动布局float 1. 继承性继承性：在css有某些属性是可以继承下来，如 color,text-xxx,line-height,font-xxx,letter-spacing,word-spacing是可以继承下来，但有些属性是不可以继承下来的，如 border:1px solid green; 2. css中的权重继承来的属性权重值约为0 权重比较规则: 如果选中了标签： 1.数选择器数量： id 类标签，谁大它的优先级越高，如果一样大，后面的会覆盖掉前面的属性 2.选中的标签的属性优先级用于大于继承来的属性，它们是没有可比性 3.同是继承来的属性 1.谁描述的近，谁的优先级越高 2.描述的一样近，这个时候才回归到数选择器的数量 !important 它设置当前属性的权重为无限大，大不过行内样式的优先级注意：!important要写在分号的前面使用!important是一个坏习惯，应该尽量避免，因为这严重破坏了样式表中固有的权值比较规则，使得在调试bug变得更加困难。 3. 常用格式化排版 3.1 字体属性 1.字体语法： /*网页中的文字设置字体为微软雅黑*/ body{font-family:"Microsoft Yahei"} 2.备选字体语法： body{font-family:

前端基础精简总结

阅读更多关于前端基础精简总结

更好阅读移步这里 1. JavaScript 1.1. 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等 1.1.1. 变量声明 ES5： var //普通变量 function //函数 ES6新增: let //普通变量 const //常量 -- 声明的同时初始化，不可重新赋值，不能重复声明 import //模块 class //类 1.1.2. 数据类型 -- 类型介绍 ES5: String、Number、Boolean、Null、Undefined、Object ES6增: Symbol 其中，object为引用，其他为基本类型基本类型占据空间固定，是简单的数据段，将其存储在栈 (stack)中(按值访问) 便于提升变量查询速度为了便于操作这类数据，ECMAScript提供了 3 个基本包装类型：Boolean、Number 和 String 基本包装类型一种特殊的引用类型，每当读取一个基本类型值的时候，JS内部就会创建一个对应的包装对象，从而可以调用一些方法来操作这些数据引用类型由于其值的大小会改变，所以不能将其存放在栈中，否则会降低变量查询速度将其存储在堆 (heap)中，存储在变量处的值是一个指针，指向存储对象的内存处(按址访问) 可以为其添加、改变和删除属性和方法；但基本类型不可以添加属性和方法 -- 类型判断原始类型

CSS基础知识（定位、浮动）

阅读更多关于 CSS基础知识（定位、浮动）

12 、浮动特点：将当前元素脱离文档流 float: left 即左浮动 float: right 即右浮动注：*父与子元素，设置子元素浮动不能超出父元素的范围 *多个元素均设置为浮动时，将自动排列(水平方向) *兄弟元素，后一个元素设置为浮动，前一个元素不浮动，后一个元素的位置不能超过前一个元素的位置 *文字内容不会被浮动元素所覆盖，而是环绕在浮动元素的周围。 i 清除浮动 clear none - 不清除 left - 清除左浮动 right - 清除右浮动 both - 清除两侧的浮动 i 高度塌陷设置：父级元素- 未设置高度；子级元素- 设置高度，且浮动结果: 父级的显示高度为 0 默认情况下，未设置宽高；默认宽度是当前页面整个宽度；高度是0或子元素高度的总和 u 解决方案 (1)为父元素设置高度(所有子元素高度的总和) 问题：人为为父级元素设置 height 属性；父级元素的 height 属性值，计算得来的 (2)将父和子元素同时设置为浮动父元素未设置宽度和高度结果: 父级的宽度和高度分别所有子元素的宽度和高度的总和 (3)clear属性来清除浮动 l BFC块极格式化环境全称：Block Formatting Context，是元素的隐含属性。默认情况下BFC是关闭的，当元素开启BFC以后，将会具有如下特性：

项目属性集合 BFC IFC

阅读更多关于项目属性集合 BFC IFC

【前言】2019.9.10 【内容】项目属性 BFC IFC FFC GFC 文档流脱离文档流… [主体]order、flex-grow、flex-shrink、flex-basis、flex、align-self… 项目属性：设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。项目元素属性集合： order、flex-grow、flex-shrink、flex-basis、flex、align-self 项目属性： ①沿主轴方向上的排列顺序order: 0（默认值） | <integer整数> ②项目的收缩因子flex-shrink: 1（默认值） | ③项目的扩张因子flex-grow: 0（默认值） | ④项目width属性替代品flex-basis: auto（默认值） | px ⑤flex-grow、flex-shrink、flex-basis的简写方式：flex 属性 ⑥项目在行中交叉轴方向上的对齐方式align-self: auto（默认值） | flex-start | center | flex-end | baseline |stretch order属性作用：设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前，属性值为整数。 flex-shrink属性作用：时当项目在主轴方向上溢出，通过设置项目收缩因子来压缩项目适应容器

Web开发（三）CSS

阅读更多关于 Web开发（三）CSS

概述基本概念层叠样式表（ Cascading Style Sheets ） , 负责网页三要素的表现 , 为网页创建样式表，通过样式表对网页进行装饰层叠：将网页想象成多层的结构，高层次的覆盖低层次， CSS 为各个层次设置样式样式表：各种样式的集合，如字体，颜色，背景，定位等样式语法样式表有一个一个样式构成，一个样式包括选择器和声明块选择器{ 样式名：样式值；样式名：样式值；样式名：样式值； } 选择器　　通过选择器可以选中指定的元素，并将声明块中的样式应用到选择器对应的元素声明块　　紧跟在选择器后面，用一对 { } 括起来　　在一个声明块中可以写多个声明，声明之间用分号 ; 隔开　　样式名和样式值用冒号：连接　　实际上就是一组一组的名值对结构注释　　/* 注释内容 */ 　　css 的注释只能写在 style 标签或 css文件中　　在 style 标签（style标签是head的子标签）中只能存放css代码内联元素、块元素使用原则一般使用块元素包含内联元素，而不使用内联元素去包含块元素 a标签可以包含任何元素（除了本身） p标签不可以包含任何块元素引入方式内联样式表将样式直接编写到元素的style属性中，不用填写选择器，直接编写声明即可内联样式只对当前元素的内容起作用内联样式属于结构与表现耦合，不方便后期维护，不推荐使用

BFC的作用以及原理介绍

阅读更多关于 BFC的作用以及原理介绍

BFC布局规则内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box重叠。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算。生成BFC的元素 1.根元素 2.float属性不为none 3.position为absolute或fixed 4.display为inline-block, table-cell, table-caption, flex, inline-flex 5.overflow不为visible <template> <div class="parent"> <div class="child1">1</div> <div class="child2">2</div> <div class="child3">3</div> </div> </template> <script> export default { name: "HelloWorld", data() { return {}; }, methods: {}

订阅 bfc