CSS三种布局模型及position的区别

在网页中,元素有三种布局模型

文档流(Flow)
层模型(Layer)
浮动模型(Float)
 

1、文档流

特点:默认网页布局模型,块元素自上而下按顺序垂直分布(独占一行),行内元素从左到右水平分布显示。

 

2、层模型

特点:三种形式 1, 相对定位(position:relative) 2,绝对定位(position:absolute)3,固定定位(position:fixed)

 

3、浮动模型

特点:float设置不同浮动的效果(right,left)

 

深入了解:

相对定位

设置position:relative表示相对定位,没有脱离文档流。通过left,right,top,bottom属性确定元素在正常文档流中偏离的位置,相对于元素初始的位置移动,偏移前的位置保留不动。就算元素被偏移了,但是他仍然占据着他没有偏移的空间。

 

绝对定位

设置position:absolute表示绝对定位,脱离文档流。通过left,right,top,bottom属性相对于最近的一个具有定位的父级进行定位,如果没有则相对于文档定位。

 

固定定位

fixed表示固定定位,相对于视图定位,他不会随浏览器窗口的滚动条滚动而变化,不会受文档流的影响。

 

z-index

z-index属性适用于定位元素(position属性值为relative、absolute 或fixed,如果元素没有定位,对其设置z-index是无效的)为了表示三维立体的概念如显示元素的上下层的叠加顺序而引入了z-index属性来表示z轴的区别。z-index值较大的元素叠加在z-index值较小的上面。对于未指定此属性的定位对象,z-index值为正数第对象在其之上,而为负数的对象在下面。

 

浮动元素

浮动元素的定位还是基于文档流定位的,只是改变了文档流的显示,并没有脱离文档流。

所有产生了浮动流的元素块级元素都看不到他们。文本属性(inline)元素以及文本元素和产生了BFC的元素可以看得到浮动元素。

案例1:父级自适应包住子级(子级是浮动元素)

<body>
    <div class=”wrapper”>
        <div class=”content”>1</div>
        <div class=”content”>2</div>
        <div class=”content”>3</div>
    </div>
</body>
.wrapper{
    border: 1px solid black;
}
 
.content{
    float: left;
    background-color: orange;
    width: 100px;
    height: 100px;
}
父级是块元素看不到浮动元素。怎么拿父级包住浮动的子级?

方法一:(可以实现,但不推荐)手动加高度。

方法二:清除浮动流。

伪元素清除浮动

.wrapper::after{
    content:””;
    display:block;/*伪元素天生是行级元素,改成block才生效*/
    clear:both;
}
方法三:父级元素设置成BFC

.wrapper{
    /*不是紧紧包裹子元素,宽度很宽*/
    /*overflow: hidden;*/
 
    /*下面三种方法是紧紧包裹住子元素*/
    /*display: inline-block;*/
    /*float: left;*/
    /*position: absolute;*/
    border: 1px solid black;
}
凡是设置了position:absolute 或者float:left/right 打内部把元素转换成了inline-block。

 

案例2:实现报纸类布局。img设置float属性,实现文字环绕图片效果。

.img{
    float: left;
    margin-right: 10px;

}

    原文作者:虎蔚智客工作室
    原文地址: https://blog.csdn.net/weixin_41380972/article/details/90904647
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞