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

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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

登录后复制

这个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>

登录后复制

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>

登录后复制

如图

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布局中最基本也是最常用的属性，用于实现多列功能，我们知道

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

3.3.3.clear

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7360

Java教程

1628

CakePHP 教程

1353

Laravel 教程

1265

PHP教程

1214

显示更多

Related knowledge

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？ Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，