CSS背景、尺寸、显示、盒子模型以及元素的定位

2.3背景相关属性

Background-color 是背景色主要用来设置背景；Background-image 是设定背景图片，需要设定图片的url地址；Background-repeat是图片的复制选项。

Repeat：在水平和垂直方向同时进行复制；而No-erpeat：不复制

Repeat-x和Repeat-y 在水平、垂直方向复制

可以将这一组属性值封装到一个属性background中，这样方便记录和编写

background:  green  url("../pic/山景.jpg")  no-repeat  right;

书写顺序为：背景色、背景图片、重复方式、位置。

2.4尺寸相关的属性

Width、max-width、min-width:宽度、最大宽度和最小宽度

Height、max-height、min-height：高度、最大高度和最小高度

div{

    width:200px;

    height:200px;

    background-color:red;

}

2.5显示相关的属性

隐藏元素的方法有两种，一种的部分隐藏，一种是完全隐藏。

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

（2）      display：none，不仅隐藏内容，所占位置也隐藏了，

 

div{

    height:300px;

    /*visibility:hidden;*/

    display:none;

}

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

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

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

li{

    display: inline-block;

    width:200px;

    background-color: #ffb6e9;

}

span{

    display:block;

    width:100px;

    background-color: #ffb6e9;;

}

2.6盒子模型

Margin：（表示留边）外边距

Margin-top、margin-right、margin-bottom、margin-left

（1）      margin:30px;表示四个边距都是30px，

（2）      margin-left:30px; 也可以分别设置上下左右的外边距

（3）      margin:10px 20px 30px 40px;上左下右的顺序设置外边距，也就是上10px,左20px，下30px。右40px。

Padding ：内边距

也有上左下右边距，与margin类似

 

Border：边框

border-width:边框的宽度
border-style:边框线条类型
border-color: 表框的颜色

Word中设置边框的颜色

border:50px dashed blue;

分别表示线条的宽度、类型、颜色。

Outline：轮廓 

与边框相似

 

2.7元素的定位

定位方式有Static 静态 fixed 固定 relative 相对的 absolute绝对的

Static：静态定位（默认）

无定位，元素正常出现了流中，不受left、right、bottom、top影响。

<styletype="text/css">

    #div1{

        width:200px;

        height:200px;

        background-color:red;

        position:fixed;

        left:30px;

        top:20px;

    }

    #div2{

        width:200px;

        height:200px;

        background-color:aqua;

    }

</style>

红色的被拿出来，然后进行重新的定位，Red定位从“流”中摘出来重新定位，定位取决于left、top属性。

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

Relative 相对定位

<styletype="text/css">

    #div1{

        width:200px;

        height:200px;

        background-color:rgba(255,0,0,1);

        left:30px;

        top:20px;

    }

    #div2{

        width:200px;

        height:200px;

        background-color:aqua;

        position:relative;

        top:20px;

        left:30px;

    }

    #div3{

        width:200px;

        height:200px;

        background-color:deeppink;

    }

</style>

可以得知，相对定位是从原有的位置进行移动，但不影响后面位置的结果

absolute绝对定位

<styletype="text/css">

    #div1{

        width:200px;

        height:200px;

        background-color:rgba(255,0,0,1);

        left:30px;

        top:20px;

    }

    #div2{

        width:200px;

        height:200px;

        background-color:aqua;

        position:fixed;

        top:20px;

        left:30px;

    }

    #div3{

        width:200px;

        height:200px;

        background-color:deeppink;

    }

</style>

绝对定位的元素将从流中摘出来重新定位，定位取决于left、top属性。于fixed类似；