正文
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