BFC - 之css布局大世界


0x01.BFC的介绍

一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元素,它们将会建立一个新的块级格式化上下文(Block Formatting Context),也就是我们所说的BFC。

形成

BFC也是HTML中的一个盒子(看不见而已),只有满足至少下列条件之一才能形成BFC:

  • float属性不为none.
  • position属性不为static和relative.
  • display属性为下列之一:table-cell,table-caption,inline-block, flex,inline-flex.
  • overflow属性不为visible.

布局规则

  • 内部的Box会在垂直方向,一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
  • 计算BFC的高度时,浮动元素也参与计算
  • 有些规则可能不太理解,看完下面的内容就会理解。

0x02.BFC作用

  • 消除Margin Collapse
  • 在正常情况下,在一个容器内的所有box将会由上至下依次垂直排列,即我们所说的一个元素占一行,并切垂直相邻的距离(即margin)是由各自的margin决定的,而不是两个margin的叠加。

html代码:

1
2
3
4
5
<div class="container">
<p>条目 1</p>
<p>条目 2</p>
<p>条目 3</p>
</div>

css代码:

1
2
3
4
5
6
7
8
9
10
11
.container {
width: 300px;
background-color: black;
overflow: hidden;
}

p {
background-color: white;
margin: 10px 0;
text-align: center;
}

理想情况下,我们会认为p标签之间的margin应该是它们的和(20px),但实际上却是10px.这其实是collapsing margins(外边距坍塌)。其中flex布局不存在collapsing margins,水平方向上也不存在collapsing margins。

利用BFC能消除collapsing margins。紧记只有当元素在同一个BFC中时,垂直方向上的margin才会clollpase。如果它们属于不同的BFC,则不会有margin collapse。因此我们可以再建立一个BFC去阻止margin collpase的发生。
所以为了让他们的margins变成20,我们只需要用div,建立一个BFC,令p元素处于不同BFC即可。

0x03.总结

虽然float的应用比较多,但它做为web初期就保留下来的老规范,在现代web开发中,其实坑很多. /捂脸 逃

WEB - 个性化定义之Mate标签


小图标的由来

从阿里云的iconfont到各种开源icon库,可见图标在web领域的影响力。而且结构简单,主题鲜明。
遂突发奇想,也在这里加一个,瞬间你感受到了什么?

什么都逃不过程序猿的自动化工具(手动擦汗.jpg) ~~o(≧v≦)o~~

最近要做IE浏览器兼容,Mate标签也是一个重要的元素之一,整理待用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
1.功能性Mate标签
<meta name="msapplication-TileImage" content="1.png">
<meta name="msapplication-TileColor" content="#000">
<meta name="theme-color" content="#000">
<meta name="msapplication-config" content="browserconfig.xml">

2.浏览器的兼容性之Mate标签

以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=7">

以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=8">

以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">

上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

是否启用WebApp全屏模式,删除苹果默认的工具栏
<mate name="apple-touch-fullscreen" content="yes" />

启用360极速模式
<mate name="renderer" content="webkit" />

针对老的手持设备优化,不识别viewport
<mate name="HandheldFriendly" content="true" />

uc强制竖屏
<mate name="screen-orientation" content="portrait" />

QQ强制竖屏
<mate name="x5-orientation" content="portrait" />

UC强制全屏
<mate name="full-screen" content="yes" />

qq强制全屏
<mate name="x5-fullscreen" content="true" />

UC应用模式
<mate name="browsermode" content="application" />

QQ应用模式
<mate name="x5-page-mode" content="app" />

windows phone 点击无高光
<mate name="msapplication-tap-highlight" content="no" />

不被显示为拨号连接
<mate name="format-detection" content="telephone=no" />

优先使用IE最新版本和chrome
<mate http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >

浏览器页面头像
<link rel="shortcut icon" href="图片路径" type="image/x-icon"/>