Table of Contents

1.理解盒模型

1.1什么是盒模型

1.2.盒模型知识点分析

1.2.1.content

1.2.2.padding

3.3.1.border

1.2.4.margin

1.3盒模型的高宽

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

1.3.2.盒子实际的高宽

2.元素的布局模型

2.1.流动模型(flow)

2.1.1.流动模型简介

2.1.2.什么是流动模型

2.2.浮动模型(float)

2.2.1浮动模型定义

2.2.2为什么需要浮动模型

2.2.3浮动模型用法

2.3.层模型

2.3.1.什么是层模型

2.3.2绝对定位(absolute)

2.3.3.相对定位(relate)

2.3.4.固定定位(fixed)

3.用div来布局页面

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

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

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

3.3.2.float

3.3.3.clear

Home

Web Front-end

HTML Tutorial

基础页面布局之div+css_html/css_WEB-ITnose

Jun 21, 2016 am 08:59 AM

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

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为什么需要浮动模型

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

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;}

Copy after login

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

2.3.3.相对定位(relate)

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

2.3.4.固定定位(fixed)

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

3.用div来布局页面

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

<body>    <div id="container">        <div id="header">头部</div>            <div id="sidebar">侧栏</div>           <div id="content">文本主体</div>            <div id="footer">尾部</div   </div></body>

Copy after login

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

<style type="text/css">     body{         margin: 0px;      }          div#container{                 overflow: auto;-------------容器大小自适应         }           div#header{           width: 1421px;              border: 1px solid red;               height:100px;         }           div#sidebar{              width:300px;            height:520px;           border: 1px solid red;------------简写            float: left;        }        div#content{           width:1119px;           height:520px;              border: 1px solid green;               float: right;-------------浮动        }        div#footer{          height: 89px;            border: 1px solid yellow;            clear: both;--------------清除左右侧浮动        }</style>

Copy after login

如图

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;

Copy after login

3.3.2.float

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

标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。

3.3.3.clear

使用float属性设置一行有多个div后（多列），最好在下一行开始之前使用clear属性清楚一下浮动，否则上面的布局会影响到下面。常用属性：clear:left/right/both 分别对应左侧/右侧/左右两侧不允许出现浮动元素

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn