CSS 定位机制小结:文档流、浮动和层定位

CSS 定位机制小结:文档流、浮动和层定位

文章目录

 

目录

CSS 定位机制小结:文档流、浮动和层定位

文章目录

前言

一、Flow

1.block元素：

2. inline元素：

 3.inline-block元素

二、Float

1.float属性

2.float特点

3.清除浮动

三、Layer

1.position:fixed;

2.position:relative;

3.position:absolute;

4.position:static;

5.position:sticky;

总结

---

 

---

---

前言

css定位机制：①文档流flow （display属性）②浮动float （float和clear属性）③层定位layer（position属性）

---

 

一、Flow

文档流定位方式：block、inline、inline-block

1.block元素：

块元素特点：独占一行 以矩形区域显示，可以设置元素的height、width、margin、padding

常见的block元素：<div>\<p>\<h1>~<h6>\<ol>\<ul>\<table>\<form>

display属性：eg：将a元素显示为block元素,从而使a元素具有块元素的特点

a{
    display:block;
}

2. inline元素：

内联元素特点：不单独占一行 不能设置width、height（width就是它包含的文字和图片的宽度不能改变）

常见的inline元素：<span>\<a>

display属性：eg：将div显示为inline元素

div{
    display:inline;
}

inline元素的间距问题：

先设置两个橙色span元素ex1和ex2，如下图所示，发现两元素之间有间距。

解决方法：

①在<span>标签外面加上<p>标签或者<ul><li>等处理（这种方式会换行）

②使用浮动

span{
            float: left;
}

③font-size=0； 

html部分代码：

<div class="flow_eg3">
    <span class="ex1">ex1</span>
    <span class="ex2">ex2</span>
</div>

css部分代码：

.flow_eg3{
    font-size: 0;
}
span{
    /* float: left; */
    display: inline-block;
    font-size: 20px;
    /* font-size必须要设置(大小随意），否则将不显示 */
}
.ex1{
    background-color: coral;
}
.ex2{
    background-color: coral;
}

 3.inline-block元素

内联块元素特点：不用单独占一行 可以设置width、height、margin、padding

常见的inline-block元素：<img>

display属性：css设置display:inline-block;即可

注意：设置display:none；那么这个元素隐藏，不占位

二、Float

1.float属性

①向左浮动float:left;

html部分代码：

    <div class="float_father">
        <div class="box1"><h3>1号块</h3></div>
        <div class="box2"><h3>2号块</h3></div>
        <div class="box3"><h3>3号块</h3></div>
        <!-- 注意如果设置了h3标签，h3边距会使box之间产生间距，记得消除 -->
    </div>

css部分代码：

*{
            margin: 0;
            padding: 0;
        }
        div>div{
            width: 60px;
            height: 60px;
        }
        .float_father{
            width: 200px;
            height: 200px;
            background-color: black;
            margin: 0 auto;
        }
        .box1{
            background-color: brown;
            /* float: none; */
            float: left;
            /* float: right; */
        }
        .box2{
            background-color: aqua;
            /* float: none; */
            float: left;
            /* float: right; */
        }
        .box3{
            background-color: chartreuse;
            /* float: none; */
            float: left; 
            /* float: right; */
        }

②向右浮动float:right;

③不浮动float:none;

 

应用于图文混排和多列布局

2.float特点

①浮动元素生成块级框（相当于一个inline-block 也解释了上面为什么解决了行内元素间隙的问题），向左向右浮动直到块级框外边缘碰到包含框或其他浮动框为止。

②脱离文档流，不占据文档流中位置。

③相邻浮动的块元素并在一行，超出父级宽度会换行。

④浮动元素后面没有浮动的元素会占据浮动元素的位置，其元素里的文字会避开浮动元素，形成文字环绕效果。效果如图。

⑤父元素如果没有设置尺寸（如高度没有设置），父元素内浮动的元素无法撑开父元素，父元素需要清除浮动。

⑥浮动元素之间没有垂直的margin的合并。

3.清除浮动

①父级元素上加overflow属性，设置为hidden

②额外标签法\隔墙法：最后一个子元素的后面加一个空的块级元素，给它的样式属性clear： both；（不建议，添加了很多无意义标签）

③成熟的清除浮动样式类：clearfix

/*父级添加双伪元素*/
.clearfix:after,.clearfix:before{
    content:"";
    display:table;
    clear:both;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    zoom:1;
}

/*父级添加after伪元素*/
.clearfix:after{
    content:"";
    display:block;
    heght:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    zoom:1;
}

clear属性：

 both，清除左右两边的浮动

left和right只能清除一个方向的浮动

none为默认值，只需要移除已指定的清除值时使用

三、Layer

1.position:fixed;

固定定位元素，元素脱离文档流，不占据文档流位置。相对于浏览器窗口进行定位。块元素和行内元素会自动转化为行内块元素。

html部分代码

<div class="float_father">
        <div class="box1"><h3>1号块</h3></div>
    </div>

css部分代码：

        .float_father{
            width: 200px;
            height: 200px;
            background-color: black;
            margin: 0 auto;
        }
        .box1{
            background-color: brown;
            position: fixed;
            left: 100px;
            top: 50px;
        }

 

2.position:relative;

相对定位元素，元素占据的文档流的位置保留。元素相对于自身原位置（直接父元素，不论父元素是什么定位）进行偏移。

3.position:absolute;

绝对定位元素，元素脱离文档流，不占据文档流位置。相对于上一个设置了定位（最近的定义为absolute或relative的，不一定是直接父层）的父级元素进行定位。如果找不到则相对于body元素进行定位。块元素和行内元素会自动转换为行内块元素。

html部分代码：

<div class="float_father">
        <div class="box1"><h3>1号块</h3></div>
    </div>

css部分代码：

 这里的父级元素设置了相对定位，效果图如下。

        .float_father{
            width: 200px;
            height: 200px;
            background-color: black;
            margin: 0 auto;
            position: relative;
        }
        .box1{
            background-color: brown;
            position: absolute;
            left: 100px;
            top: 50px;
        }

如果父级元素不设置position，效果如图。

 

4.position:static;

静态定位，默认值没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。

5.position:sticky;

粘性定位，相对定位和固定定位的结合，在元素到达某个位置时固定他。以浏览器窗口为参照点移动元素，占有原位置，需要设置left、right、top、bottom中的至少一个。

定位元素的偏移：定位元素还要用left、right、top、bottom来设置新昂对于参照元素的偏移。

定位元素的层级：定位元素浮动在正常的文档流上，可以用z-index属性来设置元素层级（值大的在上面，值相同的话按照写入顺序，在后面的放上面）

 

---

总结

：）