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

╰+哭是因爲堅強的太久メ 2022-01-22 07:45 213阅读 0赞

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

文档流（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;