css布局模式

最新推荐文章于 2023-04-15 17:09:03 发布

ringtoping

最新推荐文章于 2023-04-15 17:09:03 发布

阅读量510

点赞数

本文链接：https://blog.csdn.net/ring_to_ping/article/details/45537877

版权

1，流动布局模式块级元素(div,p,ul,h1..)和内联元素（a,span,em,strong..）填充页面,默认的布局方式

2，浮动布局模式；float (div,table,img,p都可以设置float)

3，层级布局模式；定位（先设置position：absolute/relative/fixed）

绝对定位：position:absolute然后设置left,right,bottom,top相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在这样的包含块，则相对于body元素

相对定位：position:relative然后设置left,right,bottom,top，偏移前的位置保持不动，偏移指的是相对于本来应该在的位置而偏移，即不加position:relative，该元素在什么位置；

并且设置相对定位不影响兄弟元素和父元素；

<style type="text/css">
#div1{
    width:200px;
    height:200px;
	border:2px red solid;
	position:relative;
    left:100px;
    top:50px;
}

</style>
</head>
<body>
	<div id="div1"></div>
    <span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;"><span style="font-size:18px;">固定定位：position:fixed然后设置left，right，bottom，top相对浏览器位置不变；</span></span>