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

一：知识点

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效果如下：

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：解决方式一，写死浮动块显示的区域高度

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

c：在自身清浮动

d：在自身添加 overflow:hidden