盒模型与流动模型详解-优快云博客

第一:盒模型：
盒模型包括内容（width和height），填充（padding），边框（border），外边距（margin）
除了内容之外，填充，边框和外边距都可以设置top，left，right，bottom四个方向的值，而整个实际的宽度为width + padding left + padding right + border left + border right + margin left + margin right，高度同理。
理解盒模型，先看下面一段代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.a{
width:20px;
height:20px;
margin:20px;
border:#E51A1D solid 10px;
padding:20px;
background-color:#5BE31B;
}
</style>
</head>
<body>
<div class="a">演示</div>
</body>

</html>

盒模型背景颜色设置是只在内容和填充（padding）以及边框设置的，边距是没有颜色的。

第二：流动模型：
流动模型是默认的网页布局模式，其中的网页标签分为块状元素（<div>,<p>,<h1>,<from> <ul>,<il>）和内联元素（<span> ,<a>,<lable>,<strong>,<em>）以及内联块状元素（<img>、<input>）；块状元素的特点是默认情况下，他们的宽度都是100%，独自霸道占了一行，并且可以对标签设置宽和高等属性。例如以下代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.a{
width:200px;
height:50px;
background-color:#EF292D;
}
.b{
width:200px;
height:50px;
background-color:#51C52E;
}
.c{
width:200px;
height:50px;
background-color:#7E36E3;
}
.d{
width:200px;
height:50px;
background-color:#36FCF9;
}</style>
</head>

<body>
<div class="a">演示1</div>
<div class="b">演示2</div>
<div class="c">演示3</div>
<div class="d">演示4</div>
</body>

</html>

内联元素的特点是从左到右水平分布，并且不可以设置宽和高。看下面代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.a{
width:200px;
height:50px;
background-color:#EF292D;
}
.b{
width:200px;
height:50px;
background-color:#51C52E;
}
.c{
width:200px;
height:50px;
background-color:#7E36E3;
}
.d{
width:200px;
height:50px;
background-color:#36FCF9;
}
</style>
</head>

<body>
<a href="#" class="a">例子1</a>
<a href="#" class="b">例子2</a>
<a href="#" class="c">例子3</a>
<a href="#" class="d">例子4</a>
</body>
</html>

内联元素和块状元素都可以互相转换，用display就可以实现；块状转为内联是在其css样式中加入display：inline 而内联转成块状是用 display：block；想要有内联元素和块状元素的特点就设置为display：inline—block；如以下代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.a{
width:200px;
height:50px;
background-color:#EF292D;
display:inline-block;
}
.b{
width:200px;
height:50px;
background-color:#51C52E;
display:inline-block;
}
.c{
width:200px;
height:50px;
background-color:#7E36E3;
display:inline-block;
}
.d{
width:200px;
height:50px;
background-color:#36FCF9;
display:inline-block;
}
</style>
</head>

<body>
<a href="#" class="a">例子1</a>
<a href="#" class="b">例子2</a>
<a href="#" class="c">例子3</a>
<a href="#" class="d">例子4</a>
</body>
</html>