background-color：背景颜色(颜色值、十六进制颜色值、rgb函数)
background-image：背景图像(url(图像路径))
background-repeat：背景图像的平铺属性
属性值描述
repeat 默认值，表示水平方向、垂直方向都平铺
no-repeat 不平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
background-position：背景图像的位置
background-attachment：背景图像固定

属性值	描述
repeat	默认值，表示水平方向、垂直方向都平铺
no-repeat	不平铺
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

强调：
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和

盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

其他属性

颜色透明度：rgba(r,g,b,alpha) alpha表示透明度取值在0.0~1.0(0表示完全透明，1表示完全不透明、0.5是半透明)
圆角：border-radius
阴影：box-shadow
渐变：linear-gradient(第一个颜色，第二个颜色)

我们来看一张官网图

布局

版心：“版心”是指网页中主体内容所在的区域，一般在浏览器窗口中水平居中显示。

分析页面中的模块

根据上面西安邮电大学官网图可以看到，我们的页面布局主要由头部（header）、导航（nav）、焦点图（banner）、内容（content）、页面底部（footer）五部分组成。

我们可以将每个页面用盒子模型来处理，通过div+css布局来控制网页的各个模块。

布局的常用属性

标签的浮动

浮动：所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

基本语法格式：选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

清除浮动

原因：由于浮动元素不再占用原文档流中的位置，所以会对页面中其他元素的排版产生影响，如果要避免这种影响，就需要对元素清除浮动。

基本语法格式：选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

说明：清除左浮动则是清除此div左边的所有浮动，但div左边其他的div仍然是浮动状态，只是不影响此div的位置，在清除之前前面的div下面可以放置其他的东西，清除之后不可以放置。

标签的浮动属性

空标签：在浮动元素之后添加空标签，并对该标签应用“clear:both”样式，可清除浮动。这个空标签可以为<div>、<p>、<hr />等任何标签。

over-flow：“overflow:hidden;”样式，也可以清除浮动对该元素的影响，该方法弥补了空标签清除浮动的不足。

after伪对象：使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。

浮动实例

分析：制作一个简单的盒子模型，将网页分为几个板块，点击文字可跳转到相应的网站，并将其放在盒子中间位置。

<html>
<style>
    *{
        padding:0px;
        margin: 0px;;
    }
    #top{
        width: 1200px;
        height:120px;
        margin: auto;   /*使页面可以自动居中，保证左右边距相同*/
        background-color: bisque;
    }
    #middle{    /*设置middle使得页面间距可以自动居中*/
        width:1200px;
        height:500px;
        margin: auto;
    }
    #m_left{
        width:150px;
        height:500px;
        background-color: cadetblue;
        float:left;  /*向左浮动可以使m_right向上与其平行*/
    }
    #m_right{
        width:1050px;
        height:500px;
        background-color: darkslateblue;
        margin-left: 150px;   /*与左边间距为150px是因为m_left的宽度为150px*/
    }
    #bottom{
        width:1200px;
        height:100px;
        background-color: coral;
        margin: auto;
    }
    ul{
        margin-left: 0px;   
        margin-top: 0px;
    }
    li{
        list-style-type: none;  /*去掉li标签内容前面的标号*/
        padding-top: 25px;
    }
    a{
        text-decoration: none;   /*去掉下划线*/
    }
    #if{
        width:1050px;
        height:500px;
        margin: auto;
    }
</style>
<body>
    <div id="top"></div>
    <div id="middle">
        <div id="m_left">
            <ul>
                <li>
                    <!-- target的内容必须与显示框中的name保持一致 -->
                    <a href="http://www.baidu.com" target="if">百度</a>
                </li>
                <li>
                    <a href="http://www.ifeng.com" target="if">凤凰网</a>
                </li>
            </ul>
        </div>
       
        <div id="m_right">
            <!-- iframe是使点击m_left中的文字使m_right中显示相对应的东西 -->
            <iframe src="#" frameborder="0" id="if" name="if"></iframe>
        </div>
    </div>
    <div id="bottom"></div>
</body>
</html>

实现结果：

标签的定位属性

浮动布局无法对元素位置进行准确的控制，我们可以通过定位属性实现网页中元素的精确定位。

定位模式：position属性其基本语法格式为：选择器{position:属性值；}

属性值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

边偏移：通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比。

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

强调：任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

相对定位：是将元素相对于它在标准文档流中的位置进行定位。（在文档流中的位置仍然保留）

绝对定位：是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。（在文档流中的位置没被保存）

固定定位：是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

布局的其他属性

over-flow属性

可以解决溢出问题，基本语法格式为：选择器{overflow:属性值;}

属性值	描述
visible	内容不会被修剪，会呈现在元素框之外（默认值）
hidden	溢出内容会被修剪，并且被修剪的内容是不可见的
auto	在需要时产生滚动条，即自适应所要显示的内容
scroll	溢出内容会被修剪，且浏览器会始终显示滚动条