CSS学习笔记四---背景属性 & 浮动属性

最新推荐文章于 2022-07-11 22:57:34 发布

阿茶阿茶

最新推荐文章于 2022-07-11 22:57:34 发布

阅读量349

点赞数

分类专栏： CSS 文章标签：学习

本文链接：https://blog.csdn.net/Flora_hsx/article/details/125586762

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一：知识点

1：背景属性总结

2：background-color：rgba（255，0，0，0.5）；

a：透明度（0.1~1）

3：background-image：效果默认平铺，

background-repeat可以设置平铺效果，x轴平铺（repeat-x），y轴平铺（repeat-y），不平铺（no-repeat），默认平铺效果。

4：background-position：20px 20px（可负数）

background-position：10% 10%（应用较少）

background-position：水平方向（left，right，center）垂直方向（top，center，bottom）

5：background-size：400px 400px；设置背景图片像素，图片会被拉伸变形

background-size：100% 100%；

background-size：cover（把图片扩展到足够完全覆盖背景区域，也许无法显示在背景定位区域中）；

contain（把图片扩展至最大尺寸，以使其宽度和高度完全适应背景区域，铺不满的地方，留白）

6：background-attachment：fixed（固定在浏览器里面，滚动滚动条，图片会一直保持在当前浏览器页面），scroll（默认效果）小心使用。

7：背景属性复合写法（以下为例），顺序可以更换。

background：yellow url(1.jpg) no-repeat center top fixed;

color image repeat position attachment

position的值不能换顺序。

8：background-size属性只能单独写，不能复合写

9：复合写法可以只写某些属性，但是如果不写的属性在之前有定义，那会覆盖之前的设置。

background-color:yellow;
background；url(img/i.jpg) no-repeat;

第二个复合写法中没有设置颜色值，默认的白色或覆盖掉之前写的黄色。

10：浮动属性---能让默认是竖着的东西横着来排列

11：默认div效果如下：

<head>  
  <style>
        div{
            width: 100px;
            height: 100px;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</body>

a：代码中设置红色div块浮动，效果如下：（绿色div被盖在红色div下面）

        .red{
            background-color: red;
            float: left;
        }

b：设置三个div色块都为浮动，显示效果如下：

        .red{
            background-color: red;
            float: left;
        }
        .green{
            background-color: green;
            float: left;
        }
        .blue{
            background-color: blue;
            float: left;
        }

如果浮动的比较多，一行排不开就换行显示。

12：

13：浮动块会覆盖之后的一部分的内容，会影响继续往下的布局，所以需要避免这样的情况。

a：解决方式一，写死浮动块显示的区域高度

<head>
    <style>
        .box{
            height: 100px;<!-- 此处指定第一个div的高度，限定浮动块显示的区域，就不会覆盖后面的模块 -->
        }
        .red{
            background-color: red;
            float: left;
            width: 100px;
            height: 100px;
        }
        .green{
            background-color: green;
            float: left;
            width: 100px;
            height: 100px;
        }
        .blue{
            background-color: blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box"><!-- 对应此处 -->
        <div class="red"> </div>
        <div class="green"> </div>
    </div>
    <div class="blue"> </div> 
</body>

b：在被影响的内容上清浮动 clear

<head>
    <style>
        .red{
            background-color: red;
            float: left;
            width: 100px;
            height: 100px;
        }
        .green{
            background-color: green;
            float: left;
            width: 100px;
            height: 100px;
        }
        .blue{
            background-color: blue;
            width: 200px;
            height: 200px;
            clear：left；<!-- 对应此处 -->
        }
    </style>
</head>
<body>
    <div>
        <div class="red"> </div>
        <div class="green"> </div>
    </div>
    <div class="blue"> </div> <!-- 对应此处 -->
</body>

c：在自身清浮动

<body>
    <div>
        <div class="red"> </div>
        <div class="green"> </div>
        <div style="clear:left;"><div><!-- 对应此处 -->
    </div>
    <div class="blue"> </div> 
</body>

d：在自身添加 overflow:hidden

<head>
    <style>
        .box{
            overflow: hidden;<!-- 对应此处 -->
        }
        .red{
            background-color: red;
            float: left;
            width: 100px;
            height: 100px;
        }
        .green{
            background-color: green;
            float: left;
            width: 100px;
            height: 100px;
        }
        .blue{
            background-color: blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box"><!-- 对应此处 -->
        <div class="red"> </div>
        <div class="green"> </div>
    </div>
    <div class="blue"> </div> 
</body>