html5定位的示例分析

这篇文章主要为大家展示了“html5定位的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“html5定位的示例分析”这篇文章吧。
　　定位
　　position属性
　　static：默认值，没有定位
　　relative：相对定位
　　absolute：绝对定位
　　fixed：固定定位
　　标准文档流
　　标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。
　　一般在HTML元素分为两种：块级元素和行内元素。像div,p这些的元素属于块级元素，块级元素是从上到下一行一行的排列；默认一个块级元素会占用一行，而跟在后面的元素会另起一行排列；
　　行内元素是在一行中水平布置，从左到右的排列；span,strong等属于行内元素。
　　TitleDocument
　　我是块级元素，我单独占一行 我单独占一行 我单独占一行
　　我是块级元素，我一行一行的排列，我一行一行的排列，我一行一行的排列
　　我的行内元素，我水平的排列，我水平的排，我水平的排，我水平的排列，我水平的排列
　　我是行内元素，没有那么霸道，没有那么霸道，没有那么霸道，没有那么霸道，没有那么霸道
　　static定位
　　position:static
　　元素没有定位，以标准流方式显示
　　position属性
　　第一个盒子
　　第二个盒子
　　第三个盒子
　　@charset “gb2312”;
　　div {
　　width: 300px;
　　margin:10px;
　　padding:5px;
　　font-size:12px;
　　line-height:25px;
　　}
　　#father {
　　width: 500px;
　　margin: 50px auto;
　　border:1px #666 solid;
　　padding:10px;
　　}
　　#first {
　　background-color:#FC9;
　　border:1px #B55A00 dashed;
　　}
　　#second {
　　background-color:#CCF;
　　border:1px #0000A8 dashed;
　　}
　　#third {
　　background-color:#C5DECC;
　　border:1px #395E4F dashed;
　　}
　　相对定位
　　relative属性值
　　相对自身原来位置进行偏移
　　偏移设置：top、left、right、bottom可以用left来描述盒子向右移动；
　　可以用right来描述盒子向左的移动；
　　可以用top来描述盒子向下的移动；
　　可以用bottom来描述盒子的向上的移动；
　　如果是负数就是相反的方向。
　　相对定位的盒子，不脱离标准流，老家保留位置，其后的元素不能占用其原有位置。
　　相对定位的主要用途是作为其内部元素绝对定位时的参照标准，有相对于我之义。
　　position属性
　　第一个盒子
　　第二个盒子
　　第三个盒子
　　@charset “gb2312”;
　　div {
　　width: 300px;
　　margin:10px;
　　padding:5px;
　　font-size:12px;
　　line-height:25px;
　　}
　　#father {
　　width: 500px;
　　margin: 50px auto;
　　border:1px #666 solid;
　　padding:10px;
　　}
　　#first {
　　background-color:#FC9;
　　border:1px #B55A00 dashed;
　　position:relative;
　　top:10px;
　　left:50px;
　　}
　　#second {
　　background-col免费云主机、域名or:#CCF;
　　border:1px #0000A8 dashed;
　　}
　　#third {
　　background-color:#C5DECC;
　　border:1px #395E4F dashed;
　　}
　　绝对定位
　　absolute属性值
　　偏移设置： left、right、top、bottom
　　使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。绝对定位的元素从标准文档流中脱离，其后的元素会占据其原有的位置。以上是“html5定位的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云技术行业资讯频道！

相关推荐: Python程序控制结构是什么

这篇“Python程序控制结构是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“P免费云主机、域名ython程序控制结构是什么”文章吧。非空与…