image

Photo Credit: Pixiv - 七淵

CSS 定位

Posted on   |   In   |  

这篇笔记是我在上Baidu IFE课程进行Task Three时整理的一些资料。

CSS定位

  • 普通流：元素按照其在HTML中的位置顺序决定分布的过程
  • 浮动
  • 绝对布局

img

CSS position属性：

img

普通流

编写html和css代码如下： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="position1"></div>
    <script>
    for (var i = 0; i<100; i++) {
            document.write(i+"<br/>")
        }
    </script>
</body>
</html>

#position1{
    width: 100px;
    height: 100px;
    background-color: aqua;
}

所谓普通流就是指按照html代码里从上到下的顺序布局区块。上面代码的显示效果如下：
img

绝对布局absolute

通过添加style.css文件中position，我们可以改变其布局方式。当position的属性值为absolute时，其相当于不占据浏览器位置，可在其所占位置继续填充内容。代码如下： 

#position1{
    width: 100px;
    height: 100px;
    background-color: aqua;
    position: absolute;
}

在浏览器中显示效果如下：
img

fixed属性：

fixed效果如下：

relative属性：

relative中的top,right,bottom,left是相对于它不添加属性的起始位置所占据的空间而言的。

z-index属性

原本存在这样一种情况，两个relative的方块有部分重合，且红色的位于蓝色之上：

当我们分别在两个position中添加z-index的值之后，我们可以改变两个区块的位置。两个重叠的区块，谁的的z-index的值大，谁就呈现在前面。注意：z-index的值是没有上限的，而且同样适用于绝对布局absolute

CSS float浮动：

float属性可用的值：

  • left: 元素向左浮动
  • right: 元素向右浮动
  • none: 元素不浮动
  • inherit: 从父级继承浮动属性

原本浏览器中存在着如下的布局：

当我们在#fd中添加float: left时，我们可以看到蓝色的正方形块消失了。其实，是蓝色区块被红色区块给挡住了。与绝对布局相似，红色区块不在占用浏览器区域。

当三个区块都设置float: left属性性时，我们可以发现，三个区块并排在顶部左侧，但不会重叠。

当我们在三个左浮动的<div>的外侧在添加一个container，同时这个container的width=200px小于其内部三个<div>的width之后。我们可以看到，绿色的区块换行了。这是因为主容器无法承载了。如果这时红色的height=200px，那么绿色区块出现的位置是在蓝色区块的正下方而非红色区块正下方。

CSS 定位-浮动应用：瀑布流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div1">
      <ul>
      <li><img src="http://7xs1zn.com1.z0.glb.clouddn.com/img%2Fcss%2F1.jpg"></li>
      <li><img src="http://7xs1zn.com1.z0.glb.clouddn.com/img%2Fcss%2F2.jpg"></li>
      <li><img src="http://7xs1zn.com1.z0.glb.clouddn.com/img%2Fcss%2F3.jpg"></li>
      </ul>
      <ul>
      <li><img src="http://7xs1zn.com1.z0.glb.clouddn.com/img%2Fcss%2F4.jpg"></li>
      <li><img src="http://7xs1zn.com1.z0.glb.clouddn.com/img%2Fcss%2F5.jpg"></li>
      <li><img src="http://7xs1zn.com1.z0.glb.clouddn.com/img%2Fcss%2F6.jpg"></li>
      </ul>
      <ul>
      <li><img src="http://7xs1zn.com1.z0.glb.clouddn.com/img%2Fcss%2F7.jpg"></li>
      <li><img src="http://7xs1zn.com1.z0.glb.clouddn.com/img%2Fcss%2F8.jpg"></li>
      <li><img src="http://7xs1zn.com1.z0.glb.clouddn.com/img%2Fcss%2F9.jpg"></li>
      </ul>
</div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
#div1 {
    width: 950px;
    height: auto;
    margin: 20px auto;
}
ul {
    width: 250px;
    float: left;
}

上面代码的执行效果如下：
img