您的位置：首页 > Web前端 > CSS

CSS(04) 定位

2016-02-01 22:43 483 查看

布局常用的三种:标准流、定位、浮动；

1、文档流-标准流

窗体自上而下分成一行行（元素在 (X)HTML 中的位置），并在一行行中从左到右排放元素；

2、CSS 定位 Position 属性（绝对定位、固定定位、相对定位、静态（默认））

可以设置左右上下偏移；

绝对定位：脱离了文档流，位置是相对与父元素或者浏览器左上角（也可以理解为Body），并且父元素是设置了Position 为固定/绝对/相对，如果父元素中找不到就会以浏览器左上角为位置；

固定定位：脱离了文档流，位置是由浏览器左上角为启始点；

相对定位：没有脱离文档流，位置是相对与本来该在的位置的偏移；

静态：默认值，没有脱离文档流，位置由XHTML从上至下左到右解析；

实战总结：

定位来说占位置的有 static 静态定位和relative相对定位，没有脱离文档流，不占位置的有 absolute绝对定位和fixed固定定位，脱离了文档流。这个很重要，对我们布局标准流，有很大的影响。

我们一定要记住的口诀就是，子级绝对，父级相对。这样对我们布局来说，是最合适的布局理念。

亲测代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>

#div1,#div2{
width: 100px;height: 100px; border: dashed #ff0000 1px;
float: right;
}
#div3:after{

clear: both;
}

</style>
</head>

<body>

<div id="content">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

</div>
</body>
</html>

View Code

其他实现方式：

tag:after{ content: "";     clear: both;     display:table;

20160201

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航