本文详情:https://www.cnblogs.com/chen-... 第一种 BFC中的盒子对齐 <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div&
一、BFC简介 BFC全称：Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则 （可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素） 二、BFC的触发条件（只要元素满足下面任一条件即可触发 BFC 特性） body 根元素； 浮动元素：floa
一、块级格式化上下文（BFC） 1、什么是块级格式化上下文？ Block Formatting Contexts (BFC，块级格式化上下文)就是一个块级元素 的渲染显示规则 （可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素） 2、触发BFC的条件如下： 根元素 float的值不为none。 ov
基本概念 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒
一、盒模型的概念 CSS中每一个元素都是一个盒模型(Box Model)，包括HTML和body标签元素。一般称之为box model。它的本质就是一个盒子，它的属性有margin,border,padding,content,background。下图有一个标准盒模型(content)。 盒子的长=margin-left+border-left+padding-left
学习目标 能够理解什么是精灵图及优点（将很多小图片放到一张图片上，减少对服务器请求次数，减轻服务器压力） 能够使用精灵图设置背景图片 能够使用字体图标 能够完成滑动门案例 能够写出常用的样式初始化 能够了解BFC以及触发BFC的几种方式 。。。。。。 双伪元素清除浮动 伪
BFC(block formatting context): 块级格式化上下文 表现形式是：元素形成了一个封闭空间，其内的子元素和外部文档流互不影响。 主要可以解决两个问题：浮动影响、父子元素上下margin合并。 产生方式： 1、根元素自带； 2、float属性计算值为：left、right； 3、overflow属性计算值为： aut
BFC 是页面元素的隐藏属性，全称 : Block Formatting Context 作用： 可以清除子元素浮动后不良效果在线效果地址：https://codepen.io/flyingliao/pen/VwwmaqK?editors=1100 效果图(未开启BFC)： 效果图（开启BFC）: 代码： <div id="father"> <div class="son"></div></div>
什么是BFC BFC是什么并不重要。重要的是开启它干嘛？以及如何开启它 根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块级 格式化 环境）简称BFC 开启元素的BFC后，元素会有如下特性： 1.父元素的垂直外边距不会和子元素重叠。 2.开启BFC的元素不会被浮动的元素所
本文将从以下四个方面展开介绍： 选择器 样式表继承 css3部分特性 BFC css选择器优先级策略 先附上个链接：css选择器参考手册 内联>id>class=属性选择器=伪类选择器>tag=伪元素选择器 优先级的特殊情况：!important 当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何
一、何为BFC BFC（Block Formatting Context）格式化上下文，是web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 二、形成BFC的条件 1、浮动元素：float除none以外的值。 2、定位元素：position（absoluted,fixed） 3、display为以下其中之
FC（Formatting Context） 它是W3C CSS2.1规范中的一个概念，定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFC（block formatting context） 直译为“块级格式化上下文” W3C原文： Floats, absolutely positioned elemen
BFC 块级格式化上下文 BFC是一个独立的渲染区域，只有block-level box参与，它规定了block-level box如何布局，并且与这个区域的外部毫不相干 属性为block list-item table的元素 会产生BFC 触发BFC float属性不为none position为absolute或fixed display为inline-block，table-cell，t
一、什么情况下发生外边距的合并 1）必须处于普通文档流中(不能脱离文档流)，并且处于同一个BFC中 2）相邻的外边距，不能有间隙和边框 3）垂直方向上 二、如何合并 1）兄弟元素之间，外边距合并会去最大的那个外边距而不是取和 2）父子元素之间，外边距合并
原文链接：https://www.mk2048.com/blog/blog.php?id=1iabh2kj&title=%E6%B5%85%E8%B0%88%EF%BC%8Chtmlcss%E8%84%B1%E7%A6%BB%E6%A0%87%E5%87%86%E6%96%87%E6%A1%A3%E6%B5%81%E7%9B%B8%E5%85%B3 （个人知识有限，难免有误，请见谅） 标准文档流，顾名思
BFC 的概念 BFC 是一个容器，是一个独立的布局环境，决定了元素如何对其内容就行定位，以及与其他元素的关系和相互作用；BFC 中的子元素的布局不会受到外界的影响； BFC 的布局规则： 1)、在 BFC 下，内部的 box 会在垂直方向，一个接一个的放置； 2)、Box 垂直方向的距离
如何让盒子水平垂直居中： 1、设置margin自动auto 上下左右margin都为0 position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; 2、 position: absolute; top: 50%; left: 50%; margin-left: -w/2px;/负数，数值是宽度的一半/ margin-top: -h/2px;/负数，数值
Cascading Style Sheet 层叠样式表 CSS选择器 盒模型 盒模型有两种， IE 怪异盒子模型、W3C标准盒子模型； 盒模型是由： 内容(content)、内边距(padding)、边框(border)、外边距(margin) 组成的。 标准模型的宽高是指的content区宽高； IE盒模型的宽高是指的content+padding+border的
1、常用那几种浏览器测试？有哪些内核(Layout Engine)? 答： (1) 浏览器：IE，Chrome，FireFox，Safari，Opera。 (2) 内核：Trident，Gecko，Presto，Webkit。 2、 说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下） 答： (1) 行内元素：会在水平方向排列
BFC（Block Formatting Context）直译为“块级格式化范围”。 一、常见定位方案 在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到
浮动 1 浮动概念 如果想实现网页中排版布局，比如一行内显示对应的标签元素，可以使用浮动属性。浮动可以实现元素并排。 块转行内日块也可以实现一行显示,不过存在空白折叠现象 float 浮动 属性值 描述 none 表示不浮动，所有之前讲解的HTML标签默认不浮动 left 左浮动 righ
css Cascading Style Sheet 层叠样式表 css 选择器分类 标签选择器 id选择器 class选择器 后代选择器（div a） 子代选择器（div > p） 相邻选择器（div + p） 通配符选择器（*） 属性选择器 伪类选择器 伪元素选择器::before{} css3属性选择器 选择器 描述 [attribute] 用于选取带有指
本文转载：https://segmentfault.com/p/1210000011625576/read 本文介绍了四种清除浮动的方法，并尝试解释其原理。在理解了各种清除浮动的原理之后，你会发现，很多清除浮动的方法本质上其实是一样的。掌握这些原理，相信你可以根据场景和需求，灵活运用原则发展出不同的清除浮动的方法，而
1.BFC定义和布局规则 BFC（Block formatting context）译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level如何布局，并且与这个区域外部毫不相干。 BFC布局规则 （1）内部的box会在垂直方向，一个接一个地放置 （2）Box垂直方向
BFC（Block formatting context）块级格式化上下文，是一个独立的渲染区域。 一、如何触发BFC： 1、根元素（html）; 2、设置float除none意外的值（left ,right）; 3、设置overflow 除visible 以外的值（hidden,auto,sroll）； 4、设置display （table-cell,inline-block,flex）; 5、设置position(absol
