十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要为大家展示了“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-color:#CCF;
border:1px #0000A8 dashed;
}
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
}
绝对定位
absolute属性值
偏移设置: left、right、top、bottom
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。绝对定位的元素从标准文档流中脱离,其后的元素会占据其原有的位置。
以上是“html5定位的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!