CSS中的三种基本的定位机制和使用场景

番外

最近降温了,开始爱上化妆,以前是个化妆小白,就是单纯的觉得画完装精致,但是想要画好真的是太考验手法了,特别是眉毛的画法。今天早上没有人给我开服务,那就学习学习,顺带记录记录生活吧!

CSS 定位机制

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

一、普通流

除非专门指定,否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。

二、定位

为什么需要定位

大家先考虑下面情况使用标准流以及浮动是否能实现吗?
某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子。
当我们滚动窗口的时候,盒子是固定在屏幕的某个位置的。
很明显,以上效果,在标准流和浮动都无法快速实现,此时需要定位来实现。

定位模式

定位模式决定元素的定位方式,它通过CSS的position属性来设置:

属性值	描述
static	静态定位(默认定位方式)
relative	相对定位
absolute	绝对定位(相对于 static 定位以外的第一个父元素进行定位。脱离文档流,不占据空间,元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定)
fixed	固定定位(脱离所有元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。)
sticky	粘性定位

使用场景

CSS中的三种基本的定位机制和使用场景_第1张图片

相对定位

被看作普通流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。如”left:20px” 会使元素的left距离原来的位置添加 20 像素

<html>
<head>
<style type="text/css">
    .box1{
        background-color: red;
        width:100px;
        height:100px;
    }
    .box2{
        background-color: yellow;
        width:100px;
        height:100px;
        position: relative;
        left: 20px;
    }
    .box3{
        background-color: blue;
        width:100px;
        height:100px;
        position: relative;
        right: 20px;
    }
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>

效果如下图所示:

CSS中的三种基本的定位机制和使用场景_第2张图片

绝对定位

相对于已定位的最近的祖先元素,如果没有已定位的最近的祖先元素,那么它的位置就相对于最初的包含块(如body)。绝对定位的框可以从它的包含块向上、右、下、左移动。
  绝对定位的框脱离普通流,所以它可以覆盖页面上的其他元素,可以通过设置Z-Iindex属性来控制这些框的堆放次序。

<html>
<head>
<meta charset="utf-8">
<style>
*{margin: 0; padding: 0;}
#div1 {
    width: 200px;
    height: 200px;
    background: yellow;
}
#div2 {
    width: 50%;
    height: 50%;
    background: red;
    top: 100px;
    left: 100px;
    position: absolute;
}
</style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
</div>
</body>
</html>

CSS中的三种基本的定位机制和使用场景_第3张图片

固定定位

相对于浏览器窗口,其余的特点类似于绝对定位。

粘性定位(新属性值)

粘性定位可以被认为是相对定位和固定定位的混合。
粘性定位的特点:
以浏览器的可视窗口为参照系移动元素(固定定位特点)
粘性定位占有原先的位置(相对定位特点)
必需添加top、left、right、bottom中的一个才有效
缺点:兼容性差,IE不支持
使用场景:当滚动条到达某一位置时,这个粘性定位的容器才不随滚动条移动而移动。

三、浮动

浮动的框可以在左右移动,直到它的外边框边缘碰到包含框或另一个浮动框的边缘。浮动的框脱离普通流。
如果包含块太窄,无法容纳水平排列的浮动元素,那么其他浮动块向下移动,直到有足够多的空间。如果浮动元素的高度不同,那么当它们向下移动时可能会被其他浮动元素卡住。(后面还有一部分没写完,下次补上)

你可能感兴趣的:(css)