CSS 浮动与定位

程序员文章站 2024-01-26 10:10:43

...

文档流

文档流处在网页的最底层，它表示的是一个页面的位置。我们所创建的元素默认都处在文档流中。

元素在文档流中的特点

块级元素
1. 块元素在文档流中会独占一行，块元素会自上向下排列
2. 块元素在文档流中默认宽度是父元素的100%
3. 块元素在文档流中的高度默认被内容(子元素)撑开
内联元素
1. 内联元素在文档流中只占自身的大小，会默认从左向右排列。如果一样中不足以容纳所有的内联元素，则会换到下一行，下一行也是从左向右排列。
2. 内联元素的宽度和高度默认都被内容撑开，前提是在文档流中。

浮动

浮动的特点

当为一个元素设置浮动以后，float 属性是一个非 none 的值，元素会立即脱离文档流。
元素脱离文档流以后，它下边的元素会立即向上移动。
元素浮动以后，会尽量向页面的左上或者右上漂浮，直到遇到父元素的边框或者其他的浮动元素。
如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。
如果在一行中不能容下所有的浮动元素，则其他的浮动元素会自动换行。
浮动的元素不会超过它上边的兄弟元素，最多一边齐。
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以通过浮动来设置文字环绕图片的效果。
块元素脱离文档流后，宽度和高度都被内容撑开。
内联元素脱离文档流以后会变成块元素。
浮动元素会比文档流高一层。

float 属性

float 属性有三个常用值
none 默认值，不浮动，默认垂直排列
left 元素会立即脱离文档流，向页面左侧浮动。
right 元素会立即脱离文档流，向页面右侧浮动。

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

CSS 浮动与定位

.box1 {
	width: 200px;
	height: 200px;
	background-color: deeppink;
	float: left;  /* box1 左浮动*/
}

CSS 浮动与定位

.box2,.box3{
	float: left;
}

CSS 浮动与定位

.box1,.box2,.box3{
	float: left;
}

CSS 浮动与定位

浮动带来的问题（高度塌陷）

关于网页中的元素高度塌陷的问题请查看解决网页中的元素高度塌陷的问题

清除浮动

有时希望清除其他元素浮动对当前元素所产生的影响，这时可以使用clear来完成功能。

clear可以用来清除其它浮动元素对当前元素的影响。

可选值：

left：清除左侧浮动元素对当前元素的影响
right：清除右侧浮动元素对当前元素的影响。
both：清除两侧浮动元素对当前元素的影响。（清除对他影响最大的那个元素）
none :默认值，不清除浮动

清除浮动以后，元素会回到其他元素浮动之前的位置。

<style>
.box1 {
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
        float: right;  /* 设置 box2 向右浮动*/
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
        clear: right;  /*清除box2右浮动对box3 的影响*/
   }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

清除浮动前
CSS 浮动与定位
清除浮动后

定位

定位指的就是将指定的元素摆放到页面的任意位置。

通过定位可以任意摆放元素。通过 position 属性来设置元素的定位类型。

当开启了元素的定位(position 的属性值是一个非 static的值）时，可以通过 left、right、top、bottom 四个属性来设置元素的偏移量。

left 元素相对于其定位位置的左侧偏移量。
right 元素相对于其定位位置的右侧的偏移量。
top 元素相对于其定位位置上边的偏移量。
bottom 元素相对于其定位置止下边的偏移量。

通常偏移量只需要使用2个就可以对元素进行定位了。一般会选择一个水平方向的偏移量和垂直方向的偏移量来进行定位。

position 的可选值
static 默认值，表示元素没有开启定位
relative 表示开启了元素的相对定位
相对定位的特点：

当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化。
相对定位是相对于元素在文档流中原来的位置进行定位。
相对定位的元素不会脱离文档流。
相对定位会提升一个层级。
相对定位不会改变元素的性质，块还是块，内联还是内联。

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
	}
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body

定位前
CSS 浮动与定位

.box2{
	position: relative;
	top: 50px;
	left: 50px;
}

CSS 浮动与定位
absolute 表示开启了元素的绝对定位
绝对定位的特点：

开启绝对定位会使元素脱离文档流
开启绝对对位以后，如果不设置偏移量，则元素的位置不会发生变化。
绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的。
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。
绝对定位会使元素提升一个层级。
绝对定位会改变元素的性质
- 内联元素变成块元素，
- 块元素的宽高被默认被内容撑开。

.box2{
	position: absolute;
	top: 50px;
	left: 50px;
}

CSS 浮动与定位
fixed 表示开启了元素的固定定位

固定定位也是一种绝对定位。它的大部分特点都和绝对定位一样。

不同的是：

固定定位永远都会相对于浏览器窗口进行定位的。
固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动。

修改 style 标签中的代码

body {
	height: 5000px;
}

.box1 {
	width: 200px;
    height: 200px;
    background-color: deeppink;
    position: fixed;
    top: 100px;
}

CSS 浮动与定位
IE6不支持固定定位。

元素的层级

如果定位元素的层级是一样的，在结构上，下边的元素会盖住上边的。

通过 z-index 属性可以用来设置元素的层级。
可以为 z-indx 指定一个正整数作为值，该值将会作为当前元素的层级。层级越高，元素越优先显示。

注意：父元素的层级再高，也不会盖住子元素。

对于没有开启定位的元素，z-index无效。

<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: darkgoldenrod;
        position: absolute;
        top: 100px;
        left: 100px;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
        position: absolute;
        top: 200px;
        left: 200px;
            
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: deeppink;
        position: absolute;
	}
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

初始状态
CSS 浮动与定位
提升 box1 的层级

.box1{
	z-index:3;
}

CSS 浮动与定位
提升 box2 的层级

.box2{
	z-index:6;
}

CSS 浮动与定位

上一篇：初识jQuery

下一篇：数据库的优化之索引！

CSS 浮动与定位

文档流

浮动

浮动的特点

float 属性

浮动带来的问题（高度塌陷）

清除浮动

定位

元素的层级