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时：

This is the default value.

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.

元素根据文档的正常流进行定位，然后根据顶部、右侧、底部和左侧的值相对于自身进行偏移。偏移量不影响任何其他元素的位置;因此，页面布局中元素的空间与静态位置相同。

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,

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.

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 最近项目结束,搞了一次代码分享.其中一位同学分享了一下自己在解决问题过程中的一些心得体会,感觉受益匪浅.整理出来,分享给大家. 建议使用自 ...

随机推荐

C++ Primer 笔记——重载运算
1.对于二元运算符来说,左侧运算对象传递给第一个参数,而右侧运算对象传递给第二个参数.除了重载的函数调用运算符operator()之外,其他重载元素运算符不能含有默认实参. class test { ...
httpstatus类的状态有哪些
HTTP Status Code 常见的状态码: HTTP: Status 200 – 服务器成功返回网页HTTP: Status 404 – 请求的网页不存在HTTP: Status 503 – 服 ...
caffe入门-人脸检测1
最近刚入门caffe,跟着视频做了一个简单人脸检测.包括人脸二分类模型+方框框出人脸. 人脸二分类模型 1. 收集数据我用的是lfw数据集,总共有13233张人脸图片.非人脸数据有两种选择.1. 用 ...
20165328 预备作业3 Linux安装及命令
Linux安装及学习 Linux安装遇到的问题: 问题:在我开始安装虚拟机的时候,在安装过程中总会出现初始界面,且无法跳过,陷入死循环. 解决方法:我在网上百度搜索该问题之后得到了答案,第一个界面是要 ...
笔记本如何设置插入USB鼠标自动禁用触摸板
Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Synaptics\SynTPEnh] [HKEY_LOCAL_MAC ...
.Net页面缓存OutPutCache详解
一它在Web.Config中的位置 <system.web>  <caching> <outputCacheSettings> ...
c++ char数组形式的字符串与输入输出
1. c风格字符串,和strlen函数 #include "stdafx.h" #include <iostream> using std::cout; using s ...
CallContext
1.线程本地存储区的专用集合对象,并提供对每个逻辑执行线程都唯一的数据槽.2.数据槽不在其他逻辑线程上的调用上下文之间共享. class Program { static Jason_TestEnti ...
[转] react-router4 + webpack Code Splitting
项目升级为react-router4后,就尝试着根据官方文档进行代码分割.https://reacttraining.com/react-router/web/guides/code-splittin ...
2. ELK 之kibana 简介、获取、安装
简介 kibana是什么?简单理解就是一种可视化工具,比如日志记录之后的可视化操作工具,支持折线图,饼状图,表格等,支持按时间维度等自定义维度角度数据搜索.分析等等. 2. 获取 https: ...

Change position in observation

Change position in observation的更多相关文章

随机推荐

热门专题