如果文章对你有帮助，请点喜欢并关注，这将是我最大的动力。
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:absolute
2).相对定位 position:relative
3).固定定位 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布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。
3.3.3.clear
使用float属性设置一行有多个div后（多列），最好在下一行开始之前使用clear属性清楚一下浮动，否则上面的布局会影响到下面。
常用属性：clear:left/right/both 分别对应左侧/右侧/左右两侧不允许出现浮动元素
网友评论