正文
css中常见布局有四种：默认布局，浮动布局，定位布局，伸缩盒布局。下面我将按顺序依次说明四种布局。
默认布局
1.介绍
在我们正常编写html界面的时候，通常都是默认布局。
2.使用
默认布局中，块元素独占一行，他们都遵循盒子模型的特性
补充：
盒子模型:
盒子模型分为标准盒模型和怪异盒模型。
(1).组成
1).外边距 margin(包含上下左右四种，内边距与边框也一样)与内边距相同
2).内边距 padding
0 5px 上下0，左右5
0 5px 10px 上为0，左右5，下10
0 5px 10px 15px 上右下左
3).宽 width
4).高 height
5).边框 border
border-radius:50% //块元素 宽高延伸然后形成弧，也可以是其他单位
由三种属性组成：width、styled、color 1px soild #333; dotted // 点组成的边框
(2).模型
__ 1).标准盒模型(firebox，W3C盒)__
特性： width = width
盒子的大小= width + border + padding + margin
2).怪异盒模型(IE8-)
转换：box-sizing:border-box; // 将标准盒转换成怪异盒。 content-box; //默认就是这个，标准盒模型
width = content.width + padding + border
盒子的大小=width（content.width + border + padding）+ margin
浮动布局
1.介绍
让多个块元素在一行当中显示 。
2.使用
修改块元素的float属性。
float:left;//向左浮动
float:right;//向右浮动。
3.特点
1).块元素脱离文档流，默认宽度为0
文档流：可以理解为整个页面，脱离文档流就是它在整个页面中不会在占据空间。
2).失去了对父元素的支撑能力 ，这时需要伪元素来支撑父类。
伪元素：跟普通元素一样，不过他并不是html代码中书写生成的，而是由css产生。
3).在浮动流中，当一行不能容纳更多的浮动元素时，会自动换行。
4.实例
例1(基本使用)：
<div class = outer>
<div></div>
<div></div>
</div>
操作:
(1)外层div添加伪元素：
div.outer::after{
content: "";
display: block;
clear: both;
}
(2)内层的div添加浮动
div.outer>div{
float:left;
}
例2(实际操作)：
<head>
<title>Document</title>
<style>
html,body,ul,img{
margin: 0px;
}
ul>li{
list-style: none;
}
/* 最外层框架 */
div.container{
height: 100%;
background-color:#123456;
}
div.container::after{
content: "";
display: block;
clear: both;
}
/* 将多个div框起来，并使其居中显示 */
div.outer{
padding: 0px;
width: 212px;
height: 100%;
margin: 0px auto;
}
div.outer::after{
content: "";
display: block;
clear: both;
}
/* 内部div的样式，并设置为怪异盒模型 */
div.outer>div{
box-sizing: border-box;
margin-left: 4px;
border: 3px solid #cccccc;
width
最低0.47元/天 解锁文章
598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
