1.0.9CSS_脱离标准流

Author Avatar
NENEIIII Nov 23, 2022
  • Read this article on other devices

img

行内元素和块级元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

块级元素可以转换为行内元素：

一旦，给一个块级元素（比如div）设置：

display: inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

  • 此时这个div不能设置宽度、高度；
  • 此时这个div可以和别人并排了。

行内元素转换为块级元素：

同样的道理，一旦给一个行内元素（比如span）设置：

display: block;

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

  • 此时这个span能够设置宽度、高度
  • 此时这个span必须霸占一行了，别人无法和他并排
  • 如果不设置宽度，将撑满父亲

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

  • （1）浮动
  • （2）绝对定位
  • （3）固定定位

浮动

使用属性float的元素性质：

脱标：一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。所有标签，浮动之后，已经不区分行内、块级了。

浮动的元素互相贴靠

浮动的元素有“字围”效果

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .header{
            width: 970px;
            height: 103px;
            /* 居中的意思 */
            margin: 0 auto;
        }
        .header .hd1{
            width: 277px;
            height: 103px;
            background-color: red;
            float: left;
        }
        .header .hd2{
            width: 679px;
            height: 46px;
            background-color: greenyellow;
            float: right;
        }
        .header .hd3{
            width: 137px;
            height: 49px;
            background-color: rebeccapurple;
            float: right;
            margin-bottom: 8px;
        }
        .content{
            width: 970px;
            height: 435px;
            margin: 0 auto;
            margin-top: 10px;            
            margin-bottom: 10px;            
        }
        .content .cnt1{
            width: 310px;
            height: 435px;
            margin-right: 10px;
            background-color: darkcyan;
            float: left;
        }
        .content .rightp{
            width: 650px;
            height: 435px;
            float: left;
        }
        .content .rightp .cnt2{
            width: 450px;
            height: 240px;
            /* margin-right: 10px; */
            background-color: salmon;
            /* float: left; */
            margin-bottom: 10px;
        }
        .content .rightp .cnt3{
            width: 450px;
            height: 110px;
            /* margin-right: 10px; */
            background-color: salmon;
            /* float: left; */
            margin-bottom: 10px;
        }
        .content .rightp .cnt4{
            width: 450px;
            height: 30px;
            /* margin-right: 10px; */
            background-color: salmon;
            /* float: left; */
            margin-bottom: 10px;
        }
        .content .rightp .cnt6{
            width: 190px;
            height: 400px;
            /* margin-right: 10px; */
            background-color: cornflowerblue;
            float: right;
            margin-left: 10px;
        }
        .content .cnt5{
            width: 650px;
            height: 25px;
            /* margin-right: 10px; */
            background-color: blue;
            float: left;
            margin-bottom: 10px;
        }
        .footer{
            height: 35px;
            width: 970px;
            background-color: blueviolet;
            margin: 0 auto
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="hd1"></div>
        <div class="hd3"></div>
        <div class="hd2"></div>
        
    </div>
    <div class="content">
        <div class="cnt1"></div>
        <div class="rightp">
            <div class="cnt6"></div>
            <div class="cnt2"></div>
            <div class="cnt3"></div>
            <div class="cnt4"></div>
            <div class="cnt5"></div>
        </div>       
    </div>
    <div class="footer"></div>
</body>
</html>

浮动的清除

方法1：给浮动元素的祖先元素加高度

如果一个元素要浮动，那么它的祖先元素一定要有高度。

有高度的盒子，才能关住浮动。

img

img

方法2：clear:both;

img

这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。读者可以试试看。

margin失效的本质原因是：上图中的box1和box2，高度为零

方法3：隔墙法

上面这个例子中，为了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法

img

** 内墙法：**

img

与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。

而外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content

方法4：overflow:hidden

这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。

但是，前端开发工程师发现了，它能做偏方。如下：

一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。

总结

1、加高法

工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。

<div>     //设置height
    <p></p>
    <p></p>
    <p></p>
</div>

<div>    //设置height
    <p></p>
    <p></p>
    <p></p>
</div>

#2、clear:both;法

最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

<div>   //clear:both;
    <p></p>
    <p></p>
    <p></p>
</div>

浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。

#3、隔墙法

在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。 墙用自己的身体当做了间隙。

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

<div class="cl h10"></div>

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动根据自己的儿子撑出高度，我们就要想一些“小伎俩”。

内墙法：

<div>
    <p></p>
    <p></p>
    <p></p>
    <div class="cl h10"></div>
</div>

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。

#4、overflow:hidden;

这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。 我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方。 并且,overflow:hidden;能够让margin生效。