各位小主们，很抱歉，小编这次报道迟到了，7月8号我大学舍友来公司报道啦，小编非常开心，舍命陪君子，所以耽误了更新进度，各位小主请见谅~接下来，我们书接上回，继续我们css的征程
2.6 盒模型
盒模型是我们设计当中常用到的一个思维模型，我们所见到的每一个页面都是由无数个盒子堆叠起来的，所以盒模型对我们的页面设计尤为重要，各位小主一定要重视哦~
2.6.1 盒模型的分类
盒模型分为两类，一类是标准盒模型，另一类是怪异盒模型
1.标准盒模型
标准盒模型由外边距，边框，内边距和内容组成
真实容器宽度=左边框+左内边距+内容+右边框+右内边距
真实容器高度=上边框+上内边距+内容+下边框+下内边距
2.怪异盒模型
怪异盒模型又叫IE盒模型
真实容器宽度就是width设置的多少就是多少
真实容器高度就是height设置的多少就是多少
这里是什么意思呢 我们分别来举个例子说明一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: pink;
border: 3px solid blue;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">明天就放假了</div>
</body>
</html>
各位小主可以看到，我们设置的宽高200*200其实并不是我们box的宽高，而是我们内容的宽高，而我们真正box的宽高是 内容（200）+padding（10）+border（2.667），我们把这样的盒子叫做标准盒模型
那么在我们网页设计过程中，我们往往需要的是这个盒子的宽高，而不是盒子里面内容的宽高，所以我们往往采用的是IE盒模型，如何将一个标准盒模型转化成一个IE盒模型呢？
只需要 box-sizing：border-box 这一行代码哦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background-color: pink;
border: 3px solid blue;
padding: 10px;
margin: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">明天就放假了</div>
</body>
</html>
各位小主可以看到，此时我们的内容宽高变成174.667*174.667，而不再是我们上面的那种情况，此时我们box的宽高才是我们所设置的宽高200*200
另外，可能很多小主对margin，padding，border这些属性还不太了解，没关系，小编这就为各位小主说道说道~~~（ps: 终于说上啦，老早之前就做宣传O(∩_∩)O哈哈~）
2.6.2 margin
margin 外边距 是容器与容器或者容器与页面之间的距离
接下来我们来看一看margin的写法
写法1 margin:上边距 右边距 下边距 左边距 （按照顺时针方向）
margin:10px 20px 30px 40px
写法2 margin:上下边距 左右边距
margin:10px 20px
写法3 margin:上下左右边距
margin:20px
或者我们可以直接写成margin-top，margin-left ， margin-right ， margin-bottom
接下来，小编要给各位小主展现两种神奇的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.one{
width: 300px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}
.two{
width: 300px;
height: 100px;
background-color: yellow;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="one">1111</div>
<div class="two">22222</div>
</body>
</html>各位小主来猜猜看，我们的one盒子和two盒子之间的间距应该是多少呢？各位小主是不是认为one盒子的底部外边距是10px，two盒子的上部外边距是50px所以两个盒子之间的间距是10px+50px=60px啊？如果有的小主是这么想的，那么奇迹来喽
各位小主当地个当~~~两个盒子之间的间距是50px哦
这是怎么回事呢？这就是margin的塌陷造成的
上面这个例子是margin的同级之间塌陷，就是说如果上面的盒子和下面的盒子外边距相遇，则取最大值，而不是两者外边距相加
接下来我们再来看另外一种神奇的现象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
background-color: pink;
margin-top: 30px;
}
.child{
width: 100px;
height: 100px;
background-color: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
各位小主是不是心存疑惑我们在child的盒子上设置margin-top，按理来说应该是距离box有100px的上边距，可是呢，我们的child盒子带动着我们box盒子一起向下移动100px，这种想象就是margin的第二个塌陷：发生在父子之间的塌陷
父子之间的margin塌陷：父元素的第一个子元素的上边距如果碰不到有效的border或者padding，就会不断地一层一层向外影响父级元素，父级的父级等
！！！大重点 解决margin塌陷问题 ！！！
方法1：设置有效的内边距或是边框即可
padding:1px 或者border:1px solid black
方法2：超出隐藏 限制有效空间
overflow:hidden
下面给各位小主运用一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
background-color: pink;
margin-top: 30px;
padding: 1px;
}
.child{
width: 100px;
height: 100px;
background-color: red;
/*margin:0 auto;*/
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
这样我们margin的塌陷问题就解决啦，border和overflow:hidden这两个就留给各位小主自行尝试啦，嘿嘿小编偷个懒~~~
另外呢，小编多说一嘴，各位小主们知道如何让一个块级元素居中显示吗？就用到了margin这个属性哦~小主们开动小脑筋好好思考一下，我们下期来揭晓答案
2.6.3 padding
padding 内边距 是内容与容器之间的间距
padding这里的写法同margin类似，只需要把上面的margin改成padding就好啦，小编就不啰嗦啦
这里给各位小主说明一点
兄弟元素我们常常用margin，父子元素我们常常采用padding
2.6.4 border
border 边框
写法 border：边框的宽度 边框的类型 边框的颜色
我们先来说一下边框的类型
solid 实线 dashed 虚线 double 双实线 dotted 点状虚线
如果我们只是单纯地想设置边框的其中一个属性，比如宽度/类型/颜色
我们采用的是border-width/border-style/border-color
这里给各位小主分别演示一下边框的类型
dotted dashed double solid
2.7 修改元素特性
！！！！！五星级大重点！！！！！
前方高能，前方高能，各位小主一定聚精会神哦!!!
什么叫做修改元特性呢？就是将一个块级元素，行内元素，行内块元素三者转换，其实方法多种，小编在这里先介绍一种方法，后期会有这一部分的合集，各位小主敬请期待~~~
首先先来说方法
display:block; 变成块级元素
display:inline; 变成行内元素
display:inline-block; 变成行内块元素
接着小编来给各位小主举个小例子
例1
span{
height: 100px;
width: 100px;
background-color: pink;
display: block;
}
<span>我是span</span>
我们看到原本span是行内元素，不能设置有效宽高，但我们将其变为块级元素之后就可以设置有效宽高啦（ps：这里有些懵的小主一定要翻看前期的内容哦，前期小编有提到过有效宽高的）
例2
div{
width: 300px;
height: 300px;
background-color: red;
display: inline;
}
<div>我是div</div>
我们看到原本可以设置有效宽高的div在display:inline 下变成了不能设置有效宽高的行内元素
接下来，我们通过一个练习来说一些重点内容
<div style="width: 1000px;" class="box">
<div class="one">1</div>
<div class="two" >2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
各位小主们，我们想实现上面的样式该怎么做呢？html部分已经给出，我们需要写出css部分
这里面我们最先想到的是不是给one，two，three，four，five的div变成行内块元素，让它们在一行展示，同时给他们换上背景颜色
.one,.two,.three,.four,.five{
width: 200px;
background-color: skyblue;
display: inline-block; 变为行内块元素
}
.two{
background-color: yellow;
}
.three{
background-color: red;
}
.four{
background-color: green;
}
.five{
background-color: grey;
}
那么现在小编给各位小主展现一下这个效果
各位小主可以看到，我们明明是平均分的长度，为什么会不够用了呢？
这是因为行内块元素也是文本的一种，所以会被我们html里面的空格影响
解决方案：给其共同的父级设置字体大小为0，这时空格会消失， 同时文字也会消失，不过没关系，我们在重写文字大小即可
.box{
font-size: 0;
}
.one,.two,.three,.four,.five{
width: 200px;
background-color: skyblue;
display: inline-block;
font-size: 16px; /*因为继承了父级的字体大小 导致文字消失 重写文字大小，覆盖继承过来的样式*/
}
这时我们再来看一下我们的效果
这样我们就成功啦O(∩_∩)O哈哈~
这里再给各位小主说的细致一些，上面小编说的html里面的空格指的是什么，我们html修改一下写法
<div style="width: 1000px;" class="box">
<div class="one">1</div><div class="two" >2</div><div class="three">3</div><div class="four">4</div><div class="five">5</div>
</div>
然后我们再采用之前的css写法
.one,.two,.three,.four,.five{
width: 200px;
background-color: skyblue;
display: inline-block; 变为行内块元素
}
.two{
background-color: yellow;
}
.three{
background-color: red;
}
.four{
background-color: green;
}
.five{
background-color: grey;
}
我们来看一下效果
叮铃铃，小主们请看，我们就达到了我们想要的效果，所以现在小主们明白了html里面的空格在哪里了吧，当然小编不建议各位小主这么写，因为这样代码并不美观
这里给各位小主留一道思考题
我们如何实现下面的样式呢，html部分已经给出
<div style="width: 1000px;" class="box">
<div class="one">1</div>
<div class="two" >2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five"></div>
</div>
我们five的盒子没有文字哦~~~
下期我们来揭晓，这里要新增一个属性哦罒ω罒
2.8 版心
版心指的是页面布局中外面最大的盒子，比较常见的版心是1200px或者填充整个浏览器的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
height: 45px;
background-color: pink;
}
.nav{
width: 800px;
height: 100%;
margin: 0 auto;
background-color: black;
}
.content{
width: 800px;
height: 500px;
margin: 0 auto;
background-color: red;
}
</style>
</head>
<body>
<div class="header">
<div class="nav"></div>
</div>
<!-- 内容 -->
<div class="content"></div>
</body>
</html>
版心这里各位小主只需要了解即可，不必过于纠结~~~（ps：这里透露了如何让块级元素居中哦）
本期内容到这里就和各位小主说再见啦，本期内容的重点在于margin塌陷和修改元素特性，各位小主，愿你们心中有梦，眼中有光，征途皆是星辰大海！！！我们下期再见~~~（ps：从今日起小编结尾开始走文艺风，让各位小主看看小编积累多年的文采吧，就是不知道够不够用┭┮﹏┭┮）
