CSS中的一些背景相关的学习

今天讲了CSS一些相关的属性，其中包括背景相关属性、尺寸相关属性、显示相关属性等，还有盒子模型和定位的一些知识。现在就让我们详细的了解一下吧！

先说背景相关的属性吧，其中就分好多项：

（1）background-color：背景颜色

（2）background-image：设置背景图片，需要设置图片的url地址

（3）background-repeat：图片的复制选项

   ①repeat：在水平和垂直两个方向上进行复制

   ②no-repeat：不复制

   ③repeat-x：在水平方向上复制

   ④repeat-y：在垂直方向上复制

（4）background-position：背景出现的位置

为了方便书写，也可以将这一组属性值都封装到一个background中，这样能使表达简洁。

2、尺寸相关属性，最常见的就要数width和height了，分别是宽度和高度，其他还有：max-width：最大宽度、max-height：最大高度、min-width：最小宽度、min-height：最小高度。

3、显示相关属性

（1）隐藏元素的方法

①  visibility：hidden，仅仅隐藏内容，该元素所站位置依然存在；

②display：none，不仅隐藏内容，且不占位置。

其中display还可以设置元素的显示模式，

（2）inline：将块级元素以内联元素形式显示，此时width和height实行无效，其空间取决于元素的内容

（3）inline-block：将块级元素以内联元素形式显示，同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置大小。

4、下一个内容，它就是盒子模型，

用margin（外边距）来表示，其中还有以下几个属性：

margin-top、margin-right、margin-legt、margin-bottom

使用方式：

（1）margin：30px；表示上下左右外边距都为30px

（2）margin-left：30px。单独设置上下左右外边距

（3）margin：10px、20px、30px、40px；分别设置上右下左四个边距为10px、20px、30px、40px。

padding：内边距，也有上下左右边距，和margin类似

（1）边框也可设置属性，让人看着简单明了：

①border：边框

②border-width：边框宽度

③border-style：边框的线条类型

④border-color：边框用颜色

也可以使用更优化的方式：

border: 50px groove skyblue;

outline：轮廓线，用法同border一样。

5、好了，现在来说说今天的最后一个内容吧，定位。在现实生活中，有GPS定位，在计算机语言中也是有自己定位的语言的。如下：

（1）定位方式有：定位方式有：static（静态的，默认的）、fixed（固定的）、relative（相对的）、absolute（绝对的），还有个无定位，元素正常是出现在流中，是不受left、right、bottom属性的影响的。

就举几个例子看看吧，用fixed来演示：

#div1{

    width: 200px;

    height: 200px;

    background-color: gold;

}
#div2{

    width: 200px;

    height: 200px;

    background-color: aquamarine;

    position: fixed;

    left: 30px;

    top: 20px;

}

这个从显示结果看，fixed定位会将元素从流中“摘”出来单独进行定位，其定位取决于left、top。（因为不知道怎样上传截图，所以没有图片观看结果）

重新定位之后可能会出现重叠，通过z-index可以调整其顺序，但是静态定位z-index无效。

今天就写怎么多了，现在越学习，就感觉计算机的世界也是很复杂的，现在的决定只能是努力学习，打下基础，为以后的未来奠定基石！