可视化格式模型基础应用实例
今天在群里看到一个需求，先放demo
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="keywords" content="可视化格式模型, VISUAL FORMATTING MODEL，练小习">
<meta name="description" content="可视化格式模型基础应用">
<link rel="icon" href="https://www.chengrang.com/wp-content/uploads/2016/04/jZh1VV2Y3I1-150x150.jpg" sizes="32x32" />
<link rel="icon" href="https://www.chengrang.com/wp-content/uploads/2016/04/jZh1VV2Y3I1-300x300.jpg" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="https://www.chengrang.com/wp-content/uploads/2016/04/jZh1VV2Y3I1-300x300.jpg" />
<meta name="msapplication-TileImage" content="https://www.chengrang.com/wp-content/uploads/2016/04/jZh1VV2Y3I1-300x300.jpg" />
<title>练小习的前端技术笔记</title>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?7eb88cdf05da1140776f128a6ad77962";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<style>
*{
margin:0;
padding: 0;
}
.wrap{
margin: 20px;
border:#2176da 1px solid;
text-align: center;
position: relative;
padding: 20px 0;
}
.btn{
height: 33px;
min-width: 24px;
padding: 0 20px;
border: 1px solid #0064b6;
border-radius: 2px;
background: #0070cc;
color: #fff;
font-size: 14px;
line-height: 33px;
text-align: center;
display: inline-block;
cursor: pointer;
outline: 0;
text-decoration: none;
}
.txt{
font-size: 12px;
position: absolute;
top: 30px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<a href="##" class="btn">我是自由伸缩的按钮</a>
<a href="##" class="txt">我是紧随其后的文字长一点就能看出我的位置拉，不信你缩放窗口看看哈哈哈哈！</a>
</div>
</body>
</html>
提示：你可以先修改部分代码再运行。
需求很简单，一个居中的按钮，我一般喜欢用text-align: center，有点特别的是按钮后面跟随一句提示文本。
实现的方式也很简单，文本绝对定位，不写left的值，具体的计算方式为’left’，’right’值均为auto，那么’left’值为元素的静态位置。
这个牵扯到可视化格式模型（ VISUAL FORMATTING MODEL）的基础知识，实现虽然简单，可以说牵扯到的基础知识面非常广，具体的知识部分参照我师傅的博客 http://www.topcss.org/visual-formatting-model/
可视化格式模型（ VISUAL FORMATTING MODEL）再学习