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

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

相关文章

来自专栏落花落雨不落叶

canvas画简单电路图

84611
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

4229
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2782
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

3005
来自专栏杨龙飞前端

scrollto 到指定位置

2944
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2936
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4395
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

7166
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4224
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2787

扫码关注云+社区