可视化格式模型基础应用实例

今天在群里看到一个需求,先放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)再学习

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HT

基于HTML5 Canvas的工控SCADA模拟飞机飞行

昨天看到一篇文章说是学习如何开飞机的,然后我就想,如果我也可以开飞机那就好玩了,每个人小时候都想做飞行员!中国飞行员太难当了,再说也不轻易让你开飞机!后来我就想...

2319
来自专栏简书专栏

基于turtle的Python作画

pendown()的作用是落笔,只有落笔才能作画。 当不作画却想移动画笔的时候要提笔,用函数penup() forward是画笔向前移动,函数当中参数为移动...

5921
来自专栏葬爱家族

Android高级动画(3)

上一篇文章我们讲了Android中的矢量动画,虽然文中展示的Demo并不多,但是相信大家还是体会到了矢量动画的强大。这里再做一个温故总结:

1761
来自专栏程序员互动联盟

【专业文章】六种常见的HTML5写法误用(二)

四、figure元素的常见错误 figure以及figcaption的正确使用,确实是难以驾驭。让我们来看看一些常见的错误, 不是所有的图片都是figure 上...

2935
来自专栏静晴轩

Vue 各类数据绑定

『天下武功,唯快不破』√,这一直是对武学造诣方面的追捧,虽然对于这个丝毫不会;更是对待现实工作不懈渴求,乃至苛求。因为这已不是遁隐修行,而是职场卖命,唯有先快速...

3957
来自专栏hightopo

原 荐 基于HTML5 Canvas的工控S

1263
来自专栏逍遥剑客的游戏开发

Introduction to RenderMonkey

28910
来自专栏流媒体人生

mpg文件切片之后,不能播放问题分析

对于大部分mpg文件切片都能正常播放,而少部分mpg切片之后只有第一个切片能播放,后续的切片视频播放均失败,只能播放视频。

992
来自专栏Android机动车

Android中的Vector

随着 Android 的碎片化越来越严重,适配成为一个开发中一个痛点。如果 UI 只切一套图,但是在一些特定机型上难免会出现模糊或者变形的情况,如果切多套不同分...

1574
来自专栏华章科技

10个非常实用的Excel技巧

Excel可以说是MS Office系列中最神奇也最重要的软件。对于专业的职场人士,工作中经常需要用到Excel来分析数据。亲们别再傻傻地用鼠标点来点去啦,用这...

1598

扫码关注云+社区

领取腾讯云代金券