一、什么是盒子模型
-
示例图
盒子模型.png - 盒子模型的两种创建方式，一下将用鞋子与鞋盒来做介绍
- 标准盒子
先制作鞋盒，再塞鞋子，将鞋盒和鞋子制作成一边大小，当放的时候设置一个padding值把鞋盒撑大。
- 标准盒子
.xiezi {
margin: 100 0 100 0;
/*margin-left: 100px;
margin-top: 100px;*/
width: 100px;
height: 100px;
background-color: orange;
}
.xiehe {
margin-left: 100px;
margin-top: 100px;
padding: 10px;
width: 100px;
height: 100px;
background-color: red;
border: 5px solid black;
overflow-y: scroll;
}
- 奇怪盒子模型
这一类盒子的制作方法是，先作鞋盒，再作鞋子。
.xiezi1 {
margin: 100 0 100 0;
/*margin-left: 100px;
margin-top: 100px;*/
width: 100px;
height: 100px;
background-color: orange;
margin: auto;
}
.xiehe1 {
box-shadow: 5px 5px 5px 6px rgba(0,0,0,.6);
margin: 50px;
margin-left: 100px;
padding: 10px;
width: 130px;
height: 130px;
background-color: red;
border: 5px solid black;
box-sizing:border-box;
}
二、弹性盒模型
- 代码
<!DOCTYPE html>
<html>
<head>
<title>弹性盒模型</title>
<meta charset="UTF-8">
<style type="text/css">
.con{
/*设置外部的盒子是弹性的*/
display:-webkit-flex;
-webkit-flex-direction:column;
width: 600px;
height: 600px;
background-color: black;
/*-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;*/
}
.first{
height: 100px;
background-color: red;
/*设置弹性的比例*/
-webkit-flex:1;
-webkit-order:2;
}
#second{
height: 100px;
background-color: green;
-webkit-flex:1;
-webkit-order:3;
}
#three{
height: 300px;
background-color: blue;
-webkit-flex:1;
-webkit-order:1;
}
</style>
</head>
<body>
<div class="con">
<div class="first">第一个</div>
<div id="second">第二个</div>
<div id="three">第三个</div>
</div>
</body>
</html>
-
效果图
弹性盒子.png
