CSS基础知识（二）

1.背景相关属性：
background-color：背景颜色

background-image：设定背景图片，需要设置图片的URL地址。

background-repeat：图片的复制选项

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

norepeat:不复制

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

repeat-y:在垂直方向上复制
也可以将这些属性封装到一个属性background中，使代码更加简洁：

background: greenurl("../img/index.jpg")  no-repeatright top;

书写按照一定的顺序：

background-color（背景色）

background-image（背景图片）

background-repeat（重复方式）

background-position（位置）

2.尺寸的相关属性：

常见的height--高度     width--宽度

而max-width表示最大宽度

max-height表示最大高度

min-width表示最小宽度

min-height表示最小高度

3.显示的相关属性

隐藏元素

方法：visibility：hidden；仅仅隐藏内容，该元素所占的位置依然存在

display：none；不仅隐藏内容，而且不占位置

例：

div{

    /*visibility: hidden;*/

    height: 200px;

    display: none;

}

display：可以设置元素的显示模式

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

inline：将块级元素以内联元素形式显示，此时width和height属性无效，起空间取决于元素的内容。

li{

    /*块级元素转换为内联元素*/

    display: inline-block;

    width: 200px;

    background-color: red;

}

span{

    /*内联元素转换为块级元素*/

    display: block;

}

4.盒子模型

盒子模型可以理解为一个大盒子里面放着一个小盒子，而小盒子又不是紧贴着大盒子，之间保留着一些距离。

margin：外边距

margin-top、margin-right、margin-bottom、margin-left  分别为上、右、下、左的边距表示

使用方式：

margin：30px；表示上下左右外边距都是30px；

margin-left：30px；单独设置上下左右外边距；

而同时，四种边距也可以简写：

margin: 10px 20px30px 40px;

顺序依次是：上右下左

内边距：padding；和margin类似

border：边框

broder-width：边框宽度

broder-style：边框线条类型

broder-color：边框的颜色

outline-轮廓线。用法同border

内边距也可以用简写的方式：

border: 4px dashedblue;