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. 初始化不是赋值,初始化的含义是创建变量时赋予其一个初始值,而赋值的含义是把对象的当前值擦除,而以一个新值来代替. 2.使用列表初始化内置类型的变量时,如果初始值存在丢失信息的风险,则编译器将报错 ...
论文阅读笔记七：Structure Inference Network:Object Detection Using Scene-Level Context and Instance-Level Relationships(CVPR2018)
结构推理网络:基于场景级与实例级目标检测原文链接:https://arxiv.org/abs/1807.00119 代码链接:https://github.com/choasup/SIN Yong ...
WCF寄宿IIS
1.创建一个简单的wcf项目创建完成后直接运行,结果然后进行发布在IIS上新建一个网站,直接进行发布即可遇到的问题请求与通配符 mime 映射相匹配.请求映射到静态文件处理程序. 需要注意的 ...
Personal小金库(避免遗忘，优秀的网址会保存于此方便自己查看)
由于记性不好,~.~,所以整理了一下一些自己经常看的网址或者博客......不断更新中,如果对您造成了侵权,我立马删除.谢谢~.~ 1:个人的一些link~.~ 博客园名称:别先生博客园网址:htt ...
EF分别使用IQueryable和IEnumerable实现更新和删除
缺点使用IQueryable无法跟踪,无法监控sql,无法使用SaveChanges(). 优点使用IQueryable简单粗暴. class Program { static void Main ...
【BZOJ4715】囚人的旋律
题解: 思考了很久这个图的特点没有发现看了题解瞬间醒悟原来要在序列上做还原出这张图显然是O(N^2)可以做的然后其实就比较简单了首先为了满足独立集,我们需要保证所取元素递增为了满足覆盖集,我 ...
Tychonov Theorem
(Remark: The proof presented in this post is a reorganization and interpretation of that given by Ja ...
python全栈开发day99-DRF序列化组件
1.解释器组件源码分析 https://www.processon.com/view/link/5ba0a8e7e4b0534c9be0c968 2.基于CBV的接口设计 1).django循环que ...
rem布局js设置，设置网页文档参考字体闭包函数
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ...
websocket/dwebsocket 实现前后端的实时通信
1. 用bottle框架,自己写一个服务端实现: 转载 :http://www.linuxyw.com/813.html 功能:用websocket技术,在运维工具的浏览器上实时显示远程服务器上 ...

Change position in observation

Change position in observation的更多相关文章

随机推荐

热门专题