背景，尺寸及显示的相关属性

背景相关的属性

<style>
    body{
        background-color: maroon;
        background-image: url("../chapter2/2.jpeg");
        background-repeat: no-repeat;
        background-position: top;
    }
</style>

background-color:背景色

background-image:设定背景图片，需要设置图片的url地址

background-repeat：图片的复制

no-repeat:不重复平铺

repeat-x: 水平方向重复平铺

repeat-y: 垂直方向重复平铺

repeat：  默认值，在水平和垂直方向重复平铺

round:    自动缩放直到适应且填充满整个容器

background-position：图片的位置

也可以将这一组属性值封装到一个属性background中，书写顺序是：

背景色：background-color

背景图片：background-image

重复方式：background-repeat

位置：background-position

使表达更加简洁：

background:grey url("../chapter2/2.jpeg") no-repeat right;

尺寸相关属性

height：高度

width：宽度

<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        background-color: brown;
    }
</style>

max-width: 最大的宽度

max-height:最大的高度

min-width: 最小的宽度

min-height:最小的高度

显示相关属性

隐藏元素的方法：

（1）visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在；

（2）display：none，不仅隐藏内容，并且位置也消失了。

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

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

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

<style type="text/css">
    li{
        display: inline-block;
        width: 200px;
        background-color: blue;
    }span{
        display: block;
             }
</style>

也可以将内联元素以块级元素形式来显示，即display：block。