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

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

相关文章

来自专栏前端架构

小议前端在360极速官网的创新运用

话说离上次官网改版有段时间了,里面的一些CSS3的运用我想看过上篇文章也有所了解。本文再谈谈此次改版中HMTL5、CSS3运用和性能优化等一些总结。还望大家别取...

682
来自专栏程序猿的那些趣事

前端学习之CSS(二)

(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览...

602
来自专栏腾讯大讲堂的专栏

关于“吴亦凡入伍”H5背后的技术—兼容android【 前端篇】

作者:nicky, 腾讯Tgideas 前端开发工程师 在“吴亦凡入伍”H5刷爆朋友圈之后,看到网上有较多同学对背后的技术感兴趣,正好借着机会跟大家分享一下。如...

2049
来自专栏JackieZheng

自己动手写可视化软件(代码已开源)

  一年多前,那时候我还在实习,正好上一个项目接近的尾声,紧随而来的就是一个大数据一体化的项目,包括了数据的采集、处理、计算、整合以及数据展示等。   而可视化...

2019
来自专栏DeveWork

让WordPress 在RSS 中Feed 输出支持“More”标签

如果你的主题支持“more”标签,在写文章的时候加上“more”标签,首页就可以截断显示。“more”标签截断文章的意义在于能够随心所欲,想断就断(汗,越写越废...

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

【C语言练手】C语言画太极图

呵呵昨天花了一个圆,今天想画个太极图,我知道没啥技术含量,但是挺有意思的,希望各位看官不要鄙视我不务正业,画完此图,不再做这些事情。 先展示下画出来的图像的情况...

3255
来自专栏编程

canvas 入门实战-邀请卡生成与下载

来源:守候 https://segmentfault.com/a/1190000012418898 1.前言 写了很多的javascript和css3的文章,是...

19510
来自专栏CoXie带你学编程

初学Python:写码时应该缩进使用 tab 还是空格?

在不同的编辑器里tab的长度可能不一致,所以在一个编辑器里用tab设置缩进后,在其它编辑器里看可能缩进就乱了。空格不会出现这个问题,因为空格就占一个字符的位置。

771
来自专栏田超学前端

微信小程序 购物车代码

在判断加减数量的时候,minusStatus 这个属性是被我写在了产品的外面,所以,没做减到1的的时候,减号改变颜色,需要的可以把minusStatus 这个属...

953
来自专栏破晓之歌

可视化展示js插件 原

http://echarts.baidu.com/echarts2/doc/example.html

783

扫码关注云+社区