如果文章对你有帮助，请点喜欢并关注，这将是我最大的动力。

1.理解盒模型

1.1什么是盒模型

如图：

upload/attachment/zhishi/upload/20160115/5698a2b319b6a.jpg

1.2.盒模型知识点分析

1.2.1.content

文档的主体部分，可以是文字图片，或者是标签

1.2.2.padding

填充，也就是content和border之间的距离填充距离也可以使用简写 padding：10px 20px 5px 15px 从上开始顺时针上右下左

1.2.3.border

边框，就是这个盒子的外壳，当然他也有自己的宽度常见样式： 1.width：1px-------边框宽度 2.style:solid-----边框样式，常见的有solid(实线)/dashed(虚线)/dotted(点线) 3.border-color:red-----------边框颜色

立即学习“前端免费学习笔记（深入）”；

1.2.4.margin

盒模型与盒模型之间的距离margin距离同样也可以使用简写 margin：10px 20px 5px 15px 从上开始顺时针上右下左

1.3盒模型的高宽

1.3.1.css定义的高（hright）宽（width）

指的是padding以内的高宽，也就是content的高宽。

1.3.2.盒子实际的高宽

盒子高度=(margin-top)+(padding-top)+content+(padding-bottom)+(margin-bottom)盒子宽度=(margin-left)+(padding-left)+content+(padding-right)+(margin-right)

2.元素的布局模型

2.1.流动模型(flow)

2.1.1.流动模型简介

是默认的网页布局模式。也就是说，默认状态下网页都是根据流动模型来分布网页内容的。

2.1.2.什么是流动模型

流动模型具有以下特点：1).块状元素都会在父元素内自上而下按顺序垂直延伸（默认独占一行），因为块状元素默认宽度100%。2).内联元素都会在父元素内水平方向从左到右分布。

2.2.浮动模型(float)

2.2.1浮动模型定义

float 属性定义元素在哪个方向浮动。

2.2.2为什么需要浮动模型

在流动模型中，块状元素都是独占一行的，如果想要让两个块状元素并排显示，就需要使用浮动模型。

nitc企业模版免费下载3.2

网站设计精美：前台页面全部采用DIV+CSS架构，设计严格规范，页面精美大气，布局合理。 管理操作方便：后台管理界面友好，使用方便，功能强大，系统安全，性能稳定。用户使用 全自动化控制，功能模块可扩展性强。 搜索引擎优化：经多位网络营销专家制定，严格按照搜索引擎规范进行优化，以致在最短 的时间内提升网站的曝光率。 企业办公应用：提拱相关的询盘/订单管理、业务管理、客户管理等企业常用办公基础应用 服

下载

2.2.3浮动模型用法

用法：float:left/right/inherit-------分别是元素向左浮动，向右浮动，以及继承父元素。

2.3.层模型

2.3.1.什么是层模型

层模型就像photoshop中的图层编辑功能，对每个图层都可以精准定位操作。层模型有三种形式：1).绝对定位 position:absolute2).相对定位 position:relative3).固定定位 positoin:fixed

2.3.2绝对定位(absolute)

直接看代码：

div{     position:absolute;     left:20px;     top:30px;}

这个div元素就会在其最接近的父元素内进行绝对定位，使其left的值直接设置为为20px，top的值直接设置为30px；

2.3.3.相对定位(relate)

定义：生成相对定位的元素，相对于其正常位置进行定位。因此，left:20 会向元素的left位置增加20px;

2.3.4.固定定位(fixed)

定义：生成绝对定位的元素，相对于浏览器窗口进行定位。因此，如果设置bottom:0;那么该元素会始终显示在浏览器底部。

3.用div来布局页面

3.1.用div元素代表各个区域：

    
        
头部
            
侧栏
           
文本主体
            
尾部

3.2.用css来设定区域大小（这里用边框加以区分）：

如图

upload/attachment/zhishi/upload/20160115/5698a899378c3.jpg

3.3.对例子中div代码知识点分析

3.3.1.border

这里的border:1px solid red;是简写，他等价于

border-width:1px; border-style:solid; border-color:red;

3.3.2.float

float属性是div布局中最基本也是最常用的属性，用于实现多列功能，我们知道