-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path_index.html
136 lines (136 loc) · 7.14 KB
/
_index.html
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="public/reset.css" media="all" />
<link type="text/css" rel="stylesheet" href="public/index.css" media="all" />
<!--[if lt IE 9]>
<script>
(function() {
var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(',');
var l= e.length;
while (l--){
document.createElement(e[l]);
}
})();
</script>
<![endif]-->
</head>
<body>
<div id="pageWapper">
<header></header>
<section>
<div class="blog-list-wrap container">
<div class="blog-list">
<div class="blog-item">
<h1 class="blog-title">
<a href="/css/understanding-block-formatting-contexts-in-css.html">
理解CSS中BFC
</a>
</h1>
<div class="blog-header clearfix">
<div class="blog-info">
日期：
<span>
2015-08-01
</span>
</div>
<div class="blog-tags">
<a href="/blog/tags/68.html">
CSS
</a>
<a href="/blog/tags/68.html">
BFC
</a>
</div>
</div>
<div class="blog-body">
<p><a href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting" target="_blank">BFC(Block Formatting Context)</a>是Web页面中盒模型布局的CSS渲染模式。它的<a href="http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme" target="_blank">定位体系</a>属于<a href="http://www.w3.org/TR/CSS21/visuren.html#normal-flow" target="_blank">常规文档流</a>。摘自<a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting" target="_blank">W3C</a>：<strong>浮动，绝对定位元素，<code>inline-blocks</code>, <code>table-cells</code>, <code>table-captions</code>,和<code>overflow</code>的值不为<code>visible</code>的元素，（除了这个值已经被传到了视口的时候）将创建一个新的<code>块级格式化上下文</code>。</strong>上面的引述几乎总结了一个<strong>BFC</strong>是怎样形成的。但是让我们以另一种方式来重新定义以便能更好的去理解。</p>
</div>
<div class="blog-more">
<a class="node_read_more" href="/css/understanding-block-formatting-contexts-in-css.html" target="_blank">阅读全文</a>
</div>
</div>
<div class="blog-item">
<h1 class="blog-title">
<a href="/css/understanding-block-formatting-contexts-in-css.html">
理解CSS中BFC
</a>
</h1>
<div class="blog-header clearfix">
<div class="blog-info">
日期：
<span>
2015-08-01
</span>
</div>
<div class="blog-tags">
<a href="/blog/tags/68.html">
CSS
</a>
<a href="/blog/tags/68.html">
BFC
</a>
</div>
</div>
<div class="blog-body">
<p><a href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting" target="_blank">BFC(Block Formatting Context)</a>是Web页面中盒模型布局的CSS渲染模式。它的<a href="http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme" target="_blank">定位体系</a>属于<a href="http://www.w3.org/TR/CSS21/visuren.html#normal-flow" target="_blank">常规文档流</a>。摘自<a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting" target="_blank">W3C</a>：<strong>浮动，绝对定位元素，<code>inline-blocks</code>, <code>table-cells</code>, <code>table-captions</code>,和<code>overflow</code>的值不为<code>visible</code>的元素，（除了这个值已经被传到了视口的时候）将创建一个新的<code>块级格式化上下文</code>。</strong>上面的引述几乎总结了一个<strong>BFC</strong>是怎样形成的。但是让我们以另一种方式来重新定义以便能更好的去理解。</p>
</div>
<div class="blog-more">
<a class="node_read_more" href="/css/understanding-block-formatting-contexts-in-css.html" target="_blank">阅读全文</a>
</div>
</div>
<div class="blog-item" style="margin-bottom:0;">
<h1 class="blog-title">
<a href="/css/understanding-block-formatting-contexts-in-css.html">
理解CSS中BFC
</a>
</h1>
<div class="blog-header clearfix">
<div class="blog-info">
日期：
<span>
2015-08-01
</span>
</div>
<div class="blog-tags">
<a href="/blog/tags/68.html">
CSS
</a>
<a href="/blog/tags/68.html">
BFC
</a>
</div>
</div>
<div class="blog-body">
<p><a href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting" target="_blank">BFC(Block Formatting Context)</a>是Web页面中盒模型布局的CSS渲染模式。它的<a href="http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme" target="_blank">定位体系</a>属于<a href="http://www.w3.org/TR/CSS21/visuren.html#normal-flow" target="_blank">常规文档流</a>。摘自<a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting" target="_blank">W3C</a>：<strong>浮动，绝对定位元素，<code>inline-blocks</code>, <code>table-cells</code>, <code>table-captions</code>,和<code>overflow</code>的值不为<code>visible</code>的元素，（除了这个值已经被传到了视口的时候）将创建一个新的<code>块级格式化上下文</code>。</strong>上面的引述几乎总结了一个<strong>BFC</strong>是怎样形成的。但是让我们以另一种方式来重新定义以便能更好的去理解。</p>
</div>
<div class="blog-more">
<a class="node_read_more" href="/css/understanding-block-formatting-contexts-in-css.html" target="_blank">阅读全文</a>
</div>
</div>
</div>
<ul class="pager">
<li class="pager-current first">1</li>
<li class="pager-item"><a href="/node?page=1" title="到第 2 页">2</a></li>
<li class="pager-item"><a href="/node?page=2" title="到第 3 页">3</a></li>
<li class="pager-item"><a href="/node?page=3" title="到第 4 页">4</a></li>
<li class="pager-item"><a href="/node?page=4" title="到第 5 页">5</a></li>
<li class="pager-item"><a href="/node?page=5" title="到第 6 页">6</a></li>
<li class="pager-item"><a href="/node?page=6" title="到第 7 页">7</a></li>
<li class="pager-item"><a href="/node?page=7" title="到第 8 页">8</a></li>
<li class="pager-item"><a href="/node?page=8" title="到第 9 页">9</a></li>
<li class="pager-ellipsis">…</li>
<li class="pager-next"><a href="/node?page=1" title="去下一个页面">下一页 ›</a></li>
<li class="pager-last last"><a href="/node?page=90" title="到最后一页">末页 »</a></li>
</ul>
</div>
</section>
</div>
<div id="totop" style="position: fixed; bottom: 50px; right: 15px; cursor: pointer; z-index: 999999; display: block; ">
<a title="返回顶部">
返回顶部
</a>
</div>
</body>
</html>