Html5元素布局
本教程十分简单，适合新手（因为我也是新手）。本教程参考了“菜鸟教程”。
笔者希望做到元素相对于浏览器的角落布局，即九个典型位置：
这个理念其实和UE4中的UMG锚定一样。Html5中以position来决定布局样式。
第一种：static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。所谓的流，其实就像写word一样，按照从左到右，从上到下的顺序写元素。
第二种：fixed定位
使用这种方法可以做到针对浏览器的窗口定位（不管这个页面是否在滚动，位置都不变），适合用来做角落广告。语法如下
.someclass{//注：这个是左下角锚定的例子
position:fixed;
left:0px;
bottom:0px;
}
示例：顶部居中锚定的做法
<!DOCTYPE HTML>
<html>
<head>
<title>
T
</title>
<meta charset = "UTF-8"/>
</head>
<style type="text/css">
.I {
position: fixed;
left: 50%;
transform: translate(-50%, 0%);
}
</style>
<body>
<img class="I" src="c.png"/>
</body>
效果图：
示例：居中锚定
<!DOCTYPE HTML>
<html>
<head>
<title>
T
</title>
<meta charset = "UTF-8"/>
</head>
<style type="text/css">
.I {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<img class="I" src="c.png"/>
</body>
第三种：absolute定位 这种是定位在父元素的相对位置中，也是非常方便的。
第四种：relative定位 这种是定位在原本正常显示的位置后，发生偏移的样式。
Html5元素布局的更多相关文章
- html5 基本布局+新标签+新选择器 + 线性渐变
html5 基本布局+新标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- html5 弹性布局
html5 弹性布局 一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息1.width=device-width: 设置Viewport视口宽度等于设备宽度2.init ...
- HTML5元素背景知识
目录 HTML5元素背景知识 语义与呈现分离 元素选用原则 少亦可为多 别误用元素 具体为佳,一以贯之 对用户不要想当然 元素说明体例 ol元素 元素速览 文档和元数据元素 文档和元数据元素 文本元素 ...
- CSS HTML元素布局及Display属性
本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...
- HTML5元素标记释义
HTML5元素标记释义 标记 类型 意义 介绍 文件标记 <html> ● 根文件标记 让浏览器知道这是HTML 文件 META标记 <head> ● 开头 提供文件整体信息 ...
- 不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2515 如果我们不做什 ...
- html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。
html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素. 各版本html5shiv.js CDN网址:https://ww ...
- html5.js让IE（包含IE6）支持HTML5元素方法
原文地址:http://blog.sina.com.cn/s/blog_62a36ec401018oqb.html html5.js让IE(包含IE6)支持HTML5元素方法 微软的最新浏览器IE8及 ...
- 让更多浏览器支持html5元素的简单方法
当我们试图使用web上的新技术的时候,旧式浏览器总是我们心中不可磨灭的痛!事实上,所有浏览器都有或多或少的问题,现在还没有浏览器能够完整的识别和支持最新的html5结构元素.但是不用担心,你依然可以在 ...
随机推荐
- jquery each 遍历
在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法. $().each 在dom处理上面用的较多.如果页面有多个input标签类型为checkbox,对于这时用$ ...
- nodejs 路径
在学习的时候遇到了 一些路劲方面的疑惑 便查询了一些 module.filename:开发期间,该行代码所在的文件.__filename:始终等于 module.filename.__dirname: ...
- Coursera 机器学习笔记（三）
主要为第四周.第五周课程内容:神经网络 神经网络模型引入 之前学习的线性回归还是逻辑回归都有个相同缺点就是:特征太多会导致计算量太大.如100个变量,来构建一个非线性模型.即使只采用两两特征组合,都会 ...
- Dojo初探之4:dojo的event（鼠标/键盘）事件绑定操作（基于dojo1.11.2版本）
前言: 上一章详解了dojo的dom/query操作,本章基于dom/query基础上进行事件绑定操作 dojo的事件 dojo的事件绑定操作分为鼠标和键盘两种进行详解 1.鼠标事件 我们沿用上一章中 ...
- 基于SSE实现的极速的矩形核腐蚀和膨胀（最大值和最小值）算法。
因未测试其他作者的算法时间和效率,本文不敢自称是最快的,但是速度也可以肯定说是相当快的,在一台I5机器上占用单核的资源处理 3000 * 2000的灰度数据用时约 20ms,并且算法和核心的大小是无关 ...
- HTTP协议 --- 图解三次握手过程
TCP(Transmission Control Protocol) 传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 位码即tcp标志位,有6种标 ...
- logging模块
要想使用好logging模块首先要知道它的使用流程: logging类的实例化:logger=logging.getLogger('') 设置logger的级别,logger.setLevel(log ...
- cat和tac的用法
1.cat和tac的功能 cat从前往后显示文本文件内容tac与cat相反,从后往前显示文本文件内容 2.cat用法 $cat [-AbEnTv] [filename]选项与参数:-A :相当于 -v ...
- Idea 常用功能汇总，工作中常用技巧
1.隐藏没用到的文件 比如 IDEA 的项目配置文件(.iml 和.idea),打开 Settings-File Types, 加入要隐藏的文件后缀. 2.常用技巧 2.1 通过Alt+F8查看变量 ...
- 【转载】Windows系统下删除ubuntu
原始日期:2013-11-02 15:51 以windows7为例: 用MbrFix.exe修复MBR 卸载Windows/Linux双系统中的Ubuntu1.如果你有Windows系统安装盘/启 ...