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的更多相关文章

  1. 使用CSS3动画属性实现360°无限循环旋转【代码片段】

    使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: <div id="test"> <img src="/CSS3/img/ ...

  2. transitionend的运用案例

    transitionend事件代表着过渡动画结束后 原生的绑定方法 obj.addEventListener('transitionEnd', function(){ //do soming }) 我 ...

  3. matlab文件操作及读txt文件(fopen,fseek,fread,fclose)

    文件操作是一种重要的输入输出方式,即从数据文件读取数据或将结果写入数据文件.MATLAB提供了一系列低层输入输出函数,专门用于文件操作. 1.文件的打开与关闭 1)打开文件 在读写文件之前,必须先用f ...

  4. u11-nav02

    header:before, header:after ,.navigation:before, .navigation:after,.nav-row:before, .nav-row:after,. ...

  5. new-nav-css

    header:before, header:after ,.navigation:before, .navigation:after,.nav-row:before, .nav-row:after,. ...

  6. u1-nav-css

    header:before, header:after ,.navigation:before, .navigation:after,.nav-row:before, .nav-row:after,. ...

  7. nav ccsss

    /*header: Navigation public style*/header:before, header:after ,.navigation:before, .navigation:afte ...

  8. G-nav-03

    /*dele masthead.css style*/.masthead .navigation .btn.btn-masthead.btn-apply:after { content: ''; di ...

  9. Android viewPage notifyDataSetChanged无刷新

    转载 http://www.67tgb.com/?p=624 最近项目结束,搞了一次代码分享.其中一位同学分享了一下自己在解决问题过程中的一些心得体会,感觉受益匪浅.整理出来,分享给大家. 建议使用自 ...

随机推荐

  1. C++ 使用LockWorkStation()的过程遇到的问题

    关于函数“LockWorkStation()”,参见:https://msdn.microsoft.com/en-us/library/windows/desktop/aa376875.aspx Ho ...

  2. CentOS6.8安装MySQL5.7.20时报Curses library not found解决

    报错如下: CMakeErroratcmake/readline.cmake:83(MESSAGE): Curseslibrarynotfound.Pleaseinstallappropriatepa ...

  3. pycharm导入本地py文件时，模块下方出现红色波浪线时如何解决

    有时候导入本地模块或者py文件时,下方会出现红色的波浪线,但不影响程序的正常运行,但是在查看源函数文件时,会出现问题 问题如下:  解决方案: 1. 进入设置,找到Console下的Python Co ...

  4. ubuntu 手动更新源 以及使用sudo update与upgrade的作用及区别

    一.今天更新一下我的ubuntu系统,用了几个源发现不怎么好用 上网查了一下发现有说阿里云的源挺好用 然后我试了一下 下载速度还挺快,下面分享一下怎么手动添加源列表 1.最好先做一下备份 sudo c ...

  5. Ubuntu16.04安装vim8

    Ubuntu16.04安装vim8 在Ubuntu16.04下编译安装vim8,并配置vim-plug插件管理器,以及安装YouCompleteMe等插件. 安装依赖 sudo apt-get ins ...

  6. zeromq的安装，部署（号称最快的消息队列，消息中间件）

    1:Storm作为一个实时处理的框架,产生的消息需要快速的进行处理,比如存在消息队列ZeroMQ里面. 由于消息队列ZeroMQ是C++写的,而我们的程序是运行在JVM虚拟机里面的.所以需要jzmq这 ...

  7. [转] 【Monogdb】MongoDB的日志系统

    记得前几天有个小伙伴要查看mongodb的日志,从而排查问题,可能总找不到日志放在何处,今天就系统说一下mongodb的日志系统.mongodb中主要有四种日志.分别是系统日志.Journal日志.o ...

  8. [转] 前后端分手大师——MVVM 模式

    之前对 MVVM 模式一直只是模模糊糊的认识,正所谓没有实践就没有发言权,通过这两年对 Vue 框架的深入学习和项目实践,终于可以装B了有了拨开云雾见月明的感觉. Model–View–ViewMod ...

  9. HTTP max-age与Expires的分别

    主要重点在于我们要明白一个相对(Expires)一个绝对(max-age). 分别 max-agemax-age是HTTP/1.1中,他是指我们的web中的文件被用户访问(请求)后的存活时间,是个相对 ...

  10. 【译】学习JavaScript中提升、作用域、闭包的终极指南

    这似乎令人惊讶,但在我看来,理解JavaScript语言最重要和最基本的概念是理解执行上下文.通过正确学习它,你将很好地学习更多高级主题,如提升,作用域链和闭包.考虑到这一点,究竟什么是"执 ...