浅谈BFC

Posted 2020-08-13

Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页?面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作?用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
　BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
计算BFC的高度时，浮动元素也参与计算
IFC(inline formatting context),即行内格式化上下?文，与之对应的是BFC(block formating context),块格式化上下文，见本博客锋利的BFC一文。它和BFC一样，既不是属性也不是元素，而是一种环境，一种上下文。
IFC不需要触发
Fliter模糊度0-100，opcity在0-1之间
导航：用于网页中首页的导航
语法规则：nav{
border: 1px solid black;
height: 50px;
}
ul{
border: 1px solid red;
overflow: hidden;
/*margin: 0;*/
/*padding: 0;*/
}
li{
list-style: none;
float: left;
padding: 0 20px;
line-height: 50px;
}
CSS3扩展各浏览器使用前缀
-webkit-谷歌或苹果 -o-欧朋 -moz-火狐 -ms-IE9
边框属性：border-radius将边框的直角变为圆角
Box-shadow：向 div 元素添加 box-shadow，用于管理系统。
h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。
2、2D转换
Transform：（translate 偏移，可接负值，方向相反）
（rotate看顺时针旋转，可接负值，方向相反）
（scale按倍数增加/减少元素的尺寸，可接负值，方向相反）
（skew翻转，）