Change position in observation
HTML
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset=" UTF-8">
<title>position</title>
<link rel="stylesheet" type="text/css" href="indextype.css">
</head>
<body>
</form>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
<br>
</body>
</HTML>
CSS
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
/*position:static;*/
top: 20px;
left: 20px;
background: blue;
}
CSS代码，当改变position的值时：
0 没position时：
1 
This is the default value.
2 
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
元素根据文档的正常流进行定位，然后根据顶部、右侧、底部和左侧的值相对于自身进行偏移。偏移量不影响任何其他元素的位置;因此，页面布局中元素的空间与静态位置相同。
3 
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport,
4 
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
5
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
由于有些效果一样，于是我增加网页显示的长度，出现了其他的效果，
我把box加在在以前写过的html后面，出现了下面的效果：
传视频在博客上，利用优酷的话，要先认证。我还在认证，过几天再传视频的效果图啦。
0000
<!DOCTYPE html> <!--浏览器得知自己的处理内容是html-->
<!--<!DOCTYPE html>-->
<!--注释-->
<!--<html lang="en">
<!--文档中html部分的开始，en英语zh中文-->
<html>
<head> <!--提供有关文档的内容和注释信息的-->
<meta charset="UTF-8"> <!--一种编码方式-->
<title>blogs</title> <!--head里面必须有title元素-->
<link rel="stylesheet" type="text/css" href="indextype.css">>
</head>
<body>
<!--hypertext reference-->
<a href="https://www.cnblogs.com/" target="_blank">blogs a</a>
<a href="https://www.cnblogs.com/"> blogs b</a>
<a href="https://www.cnblogs.com/" target="_self">blogs c</a> ***************************************
<!--bold type-->
<b>blogs</b>
<!--emphasis-->
<em>blogs</em>
<!--下划线-->
<u>blogs</u>
<!--中间横线-->
<s>blogs</s>
<hl>
啦啦啦啦啦啦啦啦
</hl> ******************************************
<table border="1px" align="center">
<thead>
<tr> <!--加粗居中-->
<th>用户名</th>
<th>性别</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>Admin</td>
<td>man</td>
<td>123</td>
</tr>
<tr>
<td>Admin12334567</td>
<td>man</td>
<td>123</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>用户名</td>
<td>性别</td>
<td>密码</td>
</tr>
</tfoot>
</table>
<br> <!--换行--> <table border="1px">
<tr>
<th rowspan="2">444</th> <!--行row-->
<th>444</th>
<th>444444</th>
<th>444</th>
</tr>
<tr>
<td colspan="2">sdsd</td> <!--合并列单元格column -->
<td>sdss</td>
</tr>
<tr>
<td>sdsds</td>
<td>sdsd</td>
<td>sdsd</td>
<td>sdsd</td>
</tr>
</table> ******************************
<ol>
<li>a</li>
<li>a</li>
<li>a</li>
</ol>
<ol reversed>
<li>a</li>
<li>a</li>
<li>a</li>
</ol>
<ol type="a"><!--a A I -->
<li>a</li>
<li>a</li>
<li>a</li>
</ol>
<ol>
<li>何将用户选择的内</li>
<ol type="a">
<li>他们会提到Flash</li>
<li>中关键技术的支持的改进</li>
</ol>
</ol> <ul>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
********************************************************************************
<!-- 表单 -->
<for method="get" action="6htmlform.php">
<input type="text">
<!--=<input>-->
<br><br>
<input type="text" value="blogs"><!--占位符-->
<br><br>
<input type="text" placeholder="blogs"><!--不占文本框内-->
<br><br>
<input type="text" placeholder="blogs" maxlength="8"><!--最大能输入的字符-->
<br><br>
<input type="text" placeholder="blogs" size="50"><!--拓宽单行文本框-->
<br><br>
<input type="text" value="blogs" readonly><!--只读-->
<br><br>
<input type="password" placeholder="密码"> <textarea rows="20">aaaaaaaaaaadddddddddddddddggggggggggggggggggggggggaaa</textarea>
<input type=button value="按钮">
<button>按钮</button> <!--js合作并且作为绑定事件的-->
<input type="submit" value="提交"><!--提交表单-->
<!--button>input button>input submit-->
<input type="rang" min="-100" max="200" step="100">
<input type="rang" min="-100" max="200" step="100" value="-100"><!--数字滑动-->
<input type="number" min="-100" max="200" value="-100"><!--手动输入数字-->
<input type="checkbox">选择1<!--选择1-->
<input type="radio">选择2
你喜欢什么？
<br>
<input type="radio" name="d" checked>苹果
<input type="radio" name="d">葡萄
<input type="radio" name="d">琵琶
<select>
<option>苹果</option>
<option>苹果2</option>
<option>苹果3</option>
</select> <input type="text" list="datalist111">
<datalist id="datalist111">
<option>苹果</option>
<option>苹果2</option>
<option>苹果3</option>
</datalist> <br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> <!--<input type ="email">
<input type="tel">
<input type="url">
<input type="date">
<input type="color">
<input type="hidden" value="123">--> <input type="image" src="111.png" witn="80px"><!--图片按钮-->
<input type="file" multiple><--上传多个文件-->
<br>
<br> <div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
<br>
<br>
<br>
<br>
<!--
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>-->
</body>
</html>
</form>
Change position in observation的更多相关文章
- 使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: <div id="test"> <img src="/CSS3/img/ ...
- transitionend的运用案例
transitionend事件代表着过渡动画结束后 原生的绑定方法 obj.addEventListener('transitionEnd', function(){ //do soming }) 我 ...
- matlab文件操作及读txt文件(fopen,fseek,fread,fclose)
文件操作是一种重要的输入输出方式,即从数据文件读取数据或将结果写入数据文件.MATLAB提供了一系列低层输入输出函数,专门用于文件操作. 1.文件的打开与关闭 1)打开文件 在读写文件之前,必须先用f ...
- u11-nav02
header:before, header:after ,.navigation:before, .navigation:after,.nav-row:before, .nav-row:after,. ...
- new-nav-css
header:before, header:after ,.navigation:before, .navigation:after,.nav-row:before, .nav-row:after,. ...
- u1-nav-css
header:before, header:after ,.navigation:before, .navigation:after,.nav-row:before, .nav-row:after,. ...
- nav ccsss
/*header: Navigation public style*/header:before, header:after ,.navigation:before, .navigation:afte ...
- G-nav-03
/*dele masthead.css style*/.masthead .navigation .btn.btn-masthead.btn-apply:after { content: ''; di ...
- Android viewPage notifyDataSetChanged无刷新
转载 http://www.67tgb.com/?p=624 最近项目结束,搞了一次代码分享.其中一位同学分享了一下自己在解决问题过程中的一些心得体会,感觉受益匪浅.整理出来,分享给大家. 建议使用自 ...
随机推荐
- ShadingJdbc学习
可参考:https://blog.csdn.net/jadebai/article/details/86716082 https://blog.csdn.net/jadebai/article/det ...
- Nginx详解十七：Nginx深度学习篇之动静分离
动静分离:通过中间件将动态请求和静态请求分离 作用:分离资源,减少不必要的请求消耗,减少请求延时 动静分离还有个好处就是,当动态请求的后端服务出问题了,只会影响动态的部分,静态资源不影响,照样加载 如 ...
- Python os.walk() 方法遍历文件目录
概述 os.walk() 方法用于通过在目录树中游走输出在目录中的文件名,向上或者向下. os.walk() 方法是一个简单易用的文件.目录遍历器,可以帮助我们高效的处理文件.目录方面的事情. 在Un ...
- Mac OS X10.8.3-bash基本命令失效后的修复
-bash基本命令都失败了. 比如: -bash: ls :command not found 顿时心都凉了. 想要找到.bash_profile文件也不是那么容易的. step1. 在t ...
- 爬虫基础以及 re,BeatifulSoup,requests模块使用
爬虫基础以及BeatifulSoup模块使用 爬虫的定义:向网站发起请求,获取资源后分析并提取有用数据的程序 爬虫的流程 发送请求 ---> request 获取响应内容 ---> res ...
- layui简单例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- SignalRMvc的简单例子
1.介绍 我们知道传统的http采用的是“拉模型”,也就是每次请求,每次断开这种短请求模式,这种场景下,client是老大,server就像一个小乌龟任人摆布,很显然,只有一方主动,这事情就没那么完美 ...
- 键盘Hook【Delphi版】
原文:https://www.cnblogs.com/edisonfeng/archive/2012/05/18/2507858.html 一.钩子的基本概念 a) Hook作用:监视windows消 ...
- 【Android】GestureDetector类及其用法
当用户触摸屏幕的时候,会产生许多手势,例如down,up,scroll,filing等等. 一般情况下,我们知道View类有个View.OnTouchListener内部接口,通过重写他的onTouc ...
- django源码分析
原文网址 https://www.jianshu.com/p/17d78b52c732?utm_campaign=maleskine&utm_content=note&utm_medi ...