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

今天在群里看到一个需求,先放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 条评论
登录 后参与评论

相关文章

来自专栏天天

css3动画代替js脚本实现欢迎页面动画

两者都能实现类似效果,但是在css3动画中可以实现跟多的细节,通过transition-timing-function是不是可以做跟多的改变呢,现在流行的趋势中...

1142
来自专栏DeveWork

WebFont 三宗罪之二:吹毛求疵的WebFont 渲染差异

话说上次发了篇危言耸听的“WebFont 三宗罪”系列之一,今日来讲三宗罪之二:吹毛求疵的WebFont 渲染差异。为什么用上“吹毛求疵”这个修饰词呢?因为Je...

1715
来自专栏知晓程序

如何用 1 张图说 100 次我爱你?这个小程序帮你搞定

本期,知晓程序推荐的「字云」小程序,就能帮你用文字一键生成「图文并茂」的个性图片。

864
来自专栏芋道源码1024

Github改版,宣布放弃jQuery || 你的青春里,是否有过 JQuery 的身影?

2018年7月25日,Mislav Marohnić在推文中宣布GitHub前端已经彻底删除jQuery依赖,并全部依赖原生API。

1050
来自专栏社区的朋友们

AfterEffect 从零开始 篇一 : 了解软件界面,掌握基础操作

这个系列会分享一些我在日常使用中有意思的小技能以及一些软件的基础使用,半个月一更。 AE零基础篇是为了让有 ps 基础的同学也能简单使用AE,除此之外也会分享一...

3970
来自专栏有趣的Python和你

python爬虫之MQL5爬虫

873
来自专栏walterlv - 吕毅的博客

WPF/UWP 的 Grid 布局竟然有 Bug,还不止一个!了解 Grid 中那些未定义的布局规则

发布于 2018-05-05 07:43 更新于 2018-08...

431
来自专栏WebHub

简单了解下无障碍设计模式

一款设计良好的产品可供所有能力的用户使用,包括视力低下、失明、听力障碍、认知障碍或运动障碍的用户。改进产品的无障碍功能可以增强所有用户的可用性,这是非常值得做的...

1084
来自专栏HTML5学堂

技术新手,从何下手HTML5?

HTML与CSS的学习顺序 你曾经有没有这样的感受呢?虽然HTML5学堂中关于HTML与CSS的文章不少的,但是却不知从何下手? 这样的日子,将从今天一去不复返...

3626
来自专栏数据小魔方

Xcelsius(水晶易表)系列15——动态交互地图的案例

今天接着上一篇继续跟大家分享关于水晶易表动态交互地图的案例操作。 之前曾说过,数据地图作为一种特殊的统计图,在水晶易表中具有与其他普通统计图一样的钻取、动态可见...

3238

扫码关注云+社区