BFC 基本概念

Box: CSS 布局的基本单位

Box 是 CSS 布局的对象, 和基本单位, 直观点来说, 就是一个页面是由很多个 Box 组成的. 元素的类型和 display 属性, 决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器), 因此 Box 内的元素会以不同方式渲染.
盒子的类型:

  • block-level: display:block的 block, list-item, table 元素会形成 block-level box, 并参与 Block formatting context.
  • inline-level box: display:inline的 inline-block, inline-table 元素会形成 inline-level box, 并参与 inline formatting context;
  • run-in box: CSS3才有, 略;

Formatting Context

Formatting Context 是 W3C CSS2.1规范中的一个概念, 是页面中的一块渲染区域, 并有一套渲染规则, 决定了其子元素如何定位, 以及其他元素的关系和相互作用. 最常见的的 Formatting Context 有 Block Formatting Context(BFC) 和 Inline Formatting Context(IFC).
CSS2.1中只有 BFC 和 IFC, 在 CSS3中添加了 GFC 和 FFC

BFC 的定义

BFC 直译为”块级格式上下文”, 是一个独立的渲染区域, 只有 Block-level Box 可以参与, 他规定了内部的 Block-level Box 如何布局, 并且与这个区域外部毫不相干.

BFC 布局规则

  • 内部的 Box 会在垂直方向依次排列
  • Box 垂直方向的距离由 margin 决定, 属于同一个 BFC 的两个相邻的 Box 的 margin 会发生坍塌
  • BFC 内部不会发生 float box 重叠
  • BFC 就是页面上的一个隔离的独立容器, 容器内的子元素不会影响到外部的元素, 反之亦然
  • 计算 BFC 高度的时候, 浮动元素也参与计算(使用 border 消除父元素坍塌的原理)
  • BFC 内部每一个 Box 的左外边缘(margin-left)会碰触容器的左边缘(border-left)(如果是从右向左的格式, 则是碰触右边缘)

BFC 的通俗理解

BFC 容器是一个独立的箱子, 里面的元素的布局不受外部元素影响.
我们往往利用这个特性来消除浮动元素对其他非浮动的兄弟元素及其子元素带来的影响.
并且在一个 BFC 容器中, 块盒和行盒都会沿其父元素的边框排列

BFC 成因

  • float 属性不为 None;
  • position 为 Absolute 或 Fixed
  • display 为 inline-block, table-cell, table-caption, flex, inline-flex
  • overflow 不是 visible

BFC 的作用与原理

自适应两栏布局

Mix-Blend-Mode之 Multiply, Screen, Difference

语法

mix-blend-mode: <mode>

normal: 默认值, 正常

multiply: 正片叠底 - 查看对应像素的颜色信息, 并将基色和混合色复合, 结果色总是比较暗的颜色, 任何颜色与黑色正片叠底都产生黑色, 任何颜色与白色正片叠底都保持不变. 正片就是常见的幻灯片, 正片叠底的效果就是把基色和混合色的图像都做成幻灯片, 把他们叠放在一起, 凑近亮处显示的效果, 由于两张幻灯片都有内容, 所以重叠起来的图像比单张要暗

screen: 滤色 - 滤色原理和显示器成像原理相同, 将两副幻灯片分别放在不同投影仪上, 打向同一个屏幕, 由于光线的叠加效应, 得到的是一个更明亮的图像. 基色的反相与混合色的反相相乘, 得到的结果除以255后再反相.

overlay: 叠加

lighten: 变量

darken: 变暗

color-dodge: 颜色减淡

color-blur: 颜色加深

hard-light: 强光

soft-light: 柔光

difference: 差值 - 混合色与基色相减后取绝对值

exclusion: 排除

hue: 色相

saturation: 饱和度

color: 颜色

luminosity: 亮度

Box-Shadow小用法

box-shadow 常规用法

基础语法

box-shadow 属性向边框添加一个或多个阴影;

box-shadow: (inset) x-offset, y-offset, blur, spread color;

模拟多边框

div{
  width: 100px;
  height: 100px;
  margin: 100px;
  border:5px solid ;
  box-shadow: inset 0 0 0 5px #ccc,
    0 0 0 5px #333;
}
`</pre>

要注意: box-shadow 毕竟不是实际边框, 不占据实际空间, 也不属于 `box-sizing`范围

### 模拟半透明遮罩层

<pre>`#foo{
  width:200px;
  height:200px;
  background:#FFF;
  box-shadow:0 0 0 1920px rgba(0,0,0,.5);
}
`</pre>

### 多重 box-shadow 绘制简图案

<pre>`&lt;div class="bg"&gt;
  &lt;div class="cloud"&gt;&lt;/div&gt;
&lt;/div&gt;

.bg{
  width: 100%;
  height: 100px;
  padding: 10px;
  background-color: #00bcd4;
}
.cloud{
  width: 50px;
  height: 50px;
  margin: 20px auto;
  background-color: #FFF;
  border-radius:50%;
  box-shadow:80px 10px 0 10px #FFF,
    50px 0 0 20px #FFF, 10px -10px #FFF, -10px 10px 0 10px #FFF;
}
`</pre>

### 多重 shadow 实现立体感

<pre>`&lt;div&gt;Solid&lt;/div&gt;

div{
  width: 200px;
  line-height: 68px;
  font-size: 48px;
  text-align: center;
  color:rgba(0,0,0,.3);
  text-shadow: 1px 1px 0 rgba(0,0,0,.55),
    2px 1.5px 0 rgba(0,0,0,.25),
    3px 2px 0 rgba(0,0,0,.2),
    4px 2.5px 0 rgba(0,0,0,.15),
    5px 3px 0 rgba(0,0,0,.1);
}
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×