前端知识(高度塌陷，background背景图片详解）

程序员文章站 2022-05-24 15:45:29

...

序言：其实小编在一年前就已经开始学习前端了，不过只学习了一个多月，然后今天突发奇想复习了下自己之前学习的HTML和CSS，觉得有几个点当时学习时还挺容易搞混的，所以就出来这篇关于高度塌陷以及background背景图片的详解

1.高度塌陷

产生原因：父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法长期父元素的高度，也就会导致父元素的高度塌陷，导致所有标准流中的元素位置将会上移，导致整个页面布局混乱。
可能这样说对于初学者有点抽象，举个栗子：

<style>
        #box1{
            border: 1px solid red;
        }
        #box2{
            width: 100px;
            height: 200px;
            background-color: royalblue;
            float: right;
        }
        #box3{
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    <div id="box3"></div>
</body>

这样的运行结果就是：
前端知识(高度塌陷，background背景图片详解）
按照理想情况下绿色方块应该是在蓝色方块下面，但是由于高度塌陷，绿色方块跑到上面去了。

解决方案

方案一：开启父元素的BFC，BFC原称为Block Formatting Context，块级格式化环境，这里就不过多介绍（因为这个我也不太懂），BFC是元素的隐含属性，在默认情况下是关闭状态
开启后的BFC所具有的特性：
1.父元素的垂直边外距不会与子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动子元素
这里要用到的特性就是其第三点
上代码：
在父元素中增加了属性：设置overflow为一个非默认值 overflow: hidden;

  <style>
        #box1{
            border: 1px solid red;
            /*开启BFC*/
            overflow: hidden;
        }
        #box2{
            width: 100px;
            height: 200px;
            background-color: royalblue;
            float: right;
        }
        #box3{
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
    <div id="box3"></div>
</body>

方案二：
在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动
清除浮动：可以清除其他元素浮动对当前元素产生的影响，可以使用clear实现

 <style>
        #box1{
            border: 1px solid red;
        }
        #box2{
            width: 100px;
            height: 200px;
            background-color: royalblue;
            float: right;
        }
        #box3{
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
        <div style="clear: both;"></div>
    </div>
    <div id="box3"></div>

方案三： 使用after伪类，向父元素后添加一个块元素，并对其清除浮动，这种方法原理其实和方案二原理差不多，但是不用向页面中添加结构

<style>
        #box1{
            border: 1px solid red;
        }
        #box2{
            width: 100px;
            height: 200px;
            background-color: royalblue;
            float: right;
        }
        #box3{
            height: 100px;
            background-color: green;
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="box1" class="clearfix">
        <div id="box2"></div>
    </div>
    <div id="box3"></div>
</body>

小编在这里通常比较喜欢第一种方式，感觉蛮好理解及记忆

2.background背景图片详解

1.background-color 背景颜色
设置图片背景颜色

2.background-image 设置背景图片

background-image:url(图片的路径)

如果背景图片大于元素，默认会显示图片左上角，如果背景图片小于元素大小，则会默认将背景图片以平铺充满这个盒子
可以同时为一个元素设置背景图片和背景图片，这样背景颜色回作为背景图片的底色。

3.background-repeat 设置背景图片重复方式
可选值：
repeat ：默认值，默认值，背景图片会平铺显示，沿x轴和y轴双方向重复
no-repeat：背景图片不重复
repeat-x：背景图片沿水平方向重复
repeat-y：背景图片沿垂直方向重复

4.background-position 设置背景图片位置

background-position : x轴偏移量  y轴偏移量;

5.background-attachment 设置背景是否随页面滚动
可选值：
scroll 默认值，背景图片会随页面一起滚动
fixed 背景图片不随页面滚动，这种背景一般都是用于设置body

6.background-size规定背景图片的尺寸

background-size: length|percentage|cover|contain;

前端知识(高度塌陷，background背景图片详解）
7.opacity 设置背景的不透明度
0表示完全透明， 1表示完全不透明，0.5半透明