Web前端从入门到精通-9 css简介——盒模型1
欢迎大家回来，前段时间给大家介绍了浮动以及清除浮动的相关内容
上节课到最后我们留了一个小问题
如果所有的子元素都没有加浮动，父级不设置高度时，父级的高度会不会随子级的高度自动撑开
我们可以通过下面的代码来测试
.ul1{ width:102px; border:2px solid red;} .ul1 li{ width:100px; height:100px; border:1px solid black;}
<ul class="ul1"> <li></li> <li></li> <li></li> </ul>
效果自然不用多说，父级一定随着子级高度撑高
实际上这个问题我们可以再往更深一个层次考虑
加了浮动的元素的确使父级“塌陷”了
但是更准确的说法应该是加了浮动之后，元素飞到了天上，脱离了文档流
所以父级才塌陷了
为什么格外强调脱离文档流呢？
因为让元素脱离文档流的方式并不仅仅是给元素加浮动这一种
在我们后面讲到的定位也是可以让元素脱离文档流的
所以我们应该看清事物的本质：是因为脱离了文档流才导致父级高度塌陷
好的，上节课的问题说道这里
这节课我想给大家说一下另外一个重要概念——盒模型
废话不多说，我们先看一个简单到不能再简单的布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型</title> <style> #div1{ width:200px; height:200px; background: gray; color:white;} </style> </head> <body> <div id="div1"></div> </body> </html>
相信大家不预览页面也基本上知道是什么样子了
就是一个灰色的div
那么我们不妨在div里面加点内容
预览之后发现
挺正常的
但问题是我们的文字和这个div的边界靠的也有点太近了
我们平时不管是写一篇文章或者是画一幅画
总会自觉的让文字或图画的周围留出一定距离
那我们如何让div里面的文字或者图片和div的边界有些距离呢？
这时我们给div1再加一条样式padding:10px;
预览之后看到
我们的文字距离边界就有一定距离了
那么距离具体是多少呢？
就是我们刚才设置的10px
padding:10px意思就是给这个div的四周加一圈10px的内边距
通过查字典我们也可以得知，padding是填充的意思
这里出现了一个新名词：内边距，所谓内边距，就是块元素的内容到边界的距离
这个地方一定需要注意的是：这个距离是在块元素宽和高的基础上再加上去的
说的明白点，就是我们给div设置的width和height，是多少就是多少
再加上padding之后和没加padding之前相比，div看起来就变大了
变到了多少呢？
"宽"增加了2倍的padding，"高"也增加了2倍的padding
为什么我把宽和高都加了引号呢？
因为只是表面上看起来的宽和看起来的高增加了，但是实际上width和height还是200px
这一点一定要搞清楚
好的，到这里之后，内容与div边界距离太近的问题已经解决了
但是我们不能到这里就满足
我们再想想实际的情况
任何时候四周的padding都相等吗？
不见得吧？
所以我们接下来说一说padding不一致的情况
假如我们需要上面距离边界10px 下面距离边界20px 左边30px 右边40px
该怎么办呢？
在这里有必要先说明一下，我们的padding实际上是一个复合样式
所谓复合样式，就是这个样式可以拆解成为若干单独的样式
那么我们的padding复合样式可以拆成什么单独的样式呢？
那自然就是padding-left padding-right padding-top padding-bottom
不知道left right top bottom意思的哥们儿们可以先去http://fanyi.baidu.com去查
知道了这四个东西之后我们上面的问题自然也就解决了
怎么办呢？我们可以给div加上padding-top:10px padding-bottom:20px padding-left:30px padding-right:40px
再预览，得到
这样我们很难明显的看到padding的部分，在此本人教大家一些前端开发必备的技能
我们用chrome浏览器打开我们的网页，按下F12
我们可以看到我们这个页面的源代码，我们的鼠标滑动到这里的任何一个元素上都会给我们显示出该元素的一些相关信息
带着好奇的心情，我们滑到了div上，发现页面是这样的：
我们发现，在我们的div上很清楚的将div的padding给我们显示了出来
而且很贴心的在下方标注着div#div1 270px*230px
这里的270px和230px就是这个div看起来的宽和高
顺便一提，刚才按下F12在下面冒出来的那个窗口(有Element，Network，Sources等等若干tab的那个窗口)叫做开发者工具
我们刚才只是领略了第一个tab——Element
随着学习的深入，我们也会继续这个工具，大家也可以感受到这个东西的强大之处
好的，第一种方法我们的就介绍到这里，即分别给padding-left padding-top padding-right padding-bottom赋值
但是这样是不是很麻烦？？一个页面那么多div，每个都写四个这样的值，再加上我们待会儿介绍的外边距
这是一件何等恐怖的事情
所以为了方便，衍生出第二种写法，这第二种写法虽然简单，但是没有上面那种写法直观，不过见的多了也就好了
废话不多说，直接告诉大家怎么写：padding:10px 40px 20px 30px;
这四个数字分别代表上、右、下、左四个内边距
如果你是一个正常的中国人的话，在这时候，一定会有一个疑问：为什么不是上下左右的顺序呢？
这个就说来话长了，CSS这个东西是人家老外发明的
所以，这里面就暗中隐藏了西方国家的一些思维或者习惯——时间观念
不知道大家发现了没有，上、右、下、左正好是我们的钟表顺时针的方向
如果这个还是不能说服你的话，相信大家一定看过外国的一些动漫或者电影吧
里面在描述方向的时候经常说两点钟的方向、5点钟的方向...
这就更能说明老外习惯通过钟表上的时间来表达方向
所以在西方的人们看来，上、右、下、左才是比较符合逻辑的顺序
但是我们中国人有我们中国人的文化——对称
例如在北京有天安门，就有地安门，有天坛，就有地坛，有东直门，就有西直门
因此，我们就会认为上、右、下、左的顺序比较奇怪
文化不同，习惯就不同，仅此而已
好的，说了这么一大段废话，就是希望大家记住一个顺序：上右下左
不仅仅padding是这样，包括我们一会儿要说的margin也是这个样
好的，至此我们又用了另外一种方法来表示描述我们的内边距
但是还没完，设想一下，如果我们只想设置上内边距为10px，下、左、右都不需要设置的话该怎么办呢？
那自然是padding:10px 0 0 0了
如果我们想设置上下内边距各为10px，而左右不希望设置，该怎么办呢？
大家一定不耐烦了，不就是padding:10px 0 10px 0吗？
没错，但是在这种上下的值都一样的情况下我们还可以将写法简化为padding:10px 0
换句话说当padding的值是两个的时候，第一个值代表上下，第二个值则代表左右
如果我们的div上右下左四个方向的内边距都是10px的话应该怎么写呢？
最啰嗦的办法自然是padding:10px 10px 10px 10px;
估计大家也可以猜到了，当四个方向的padding值都一样时，可以简写为一个值——padding:10px
当然，padding的值可不可以写成3个数呢？
可以是可以，但是不建议这么做，因为可读性不是很好
假如我们写成padding:10px 0 20px
那么第一个值代表上内边距10px、第二个值代表左和右内边距都是0、第三个值代表下内边距是20px
是不是感觉很绕，是不是感觉还不如写成4个值看起来更清爽一些呢？
如果大家有兴趣的话可以找找这里面的规律哈，如果实在找不到这个规律还想知道的话就在下面大方的留言
不方便留言的话就直接QQ信息给我
好的，关于第二种写法，我们先暂时说这么多
接下来，我们还有重头戏没上呢，那就是我们的外边距——margin
外边距的确可以控制元素与元素之间的距离
但是我个人认为更适合表述外边距特征的是从元素的边界向外扩张的距离
好了，废话不多说直接上例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>xxx</title> <style type="text/css"> #div1{ width:200px; height:200px; background: red; margin:10px;} </style> </head> <body> <div id="div1"></div> </body> </html>
margin:10px大家自己去猜四个方向的外边距到底是多少，不再多说废话了
由于这个例子的效果不太明显，我们需要按下F12开启控制台
结果为
金黄色的部分即为外边距
大家可以看到，上、左、下三个方向的margin基本上没什么问题，但是右边的金黄色部分却遮天蔽日一直捅到了浏览器的最右端
好像这个右侧的margin非常大
但是我们明明设置了margin:10px了，按理说这里面应该包含了margin-right:10px了啊
好的，我们稍微往前追溯一下，在讲浮动的时候我们曾经说过块元素比较霸道，会独占一行
而希望让块元素排在同一行的方法就是给块元素加float浮动
现在我们的div加了float了吗？
没有吧，那即使页面上写再多的div，会挤到它的后面吗？
不会吧，既然它的右边没有东西了那纠结于这个margin-right是多少有意义吗？
所以在没有加浮动的前提下，对于这个div的margin-right
不应该也没有必要抱有这么大的兴趣去知道它到底是多少
但是，接下来说的这一点就需要大家理解了
在上面的程序中，我们把这个div的margin改为margin:0 auto;
这个时候再次预览，我们会发现div水平居中了
这时候出现了一个很神奇的值：auto
auto是自动的意思，那么根据我们之前的解析规则
margin:0 auto;就可以理解为上下外边距是0，左右auto，也就是左右自动
这个时候浏览器看到auto让div两边的外边距相等，从而达到了居中的效果
而且当我们缩放浏览器的时候这个效果依然可以存在
好的，明白了这一点之后，我们继续深挖这个margin:0 auto;
我们做这样一件事：给这个div再包一层div
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>xxx</title> <style type="text/css"> #div2{ border:1px solid #000; width:500px;} #div1{ width:200px; height:200px; background: red; margin:0 auto;} </style> </head> <body> <div id="div2"> <div id="div1"></div> </div> </body> </html>
预览之后我们发现，我们的div1相对于div2居中了
从以上例子可以得出一个结论：加了margin:0 auto;的元素其实是相对于它的父级水平居中
这个例子中div1的父级就是div2了
之前我们的页面中只有div1的时候它的父级就是body
当然想要水平居中还有一个前提就是父级的宽度一定要已知才可以
好的，关于margin:0 auto;的话题暂且讨论这么多
接下来我们继续扯这个margin，说一下这个margin的一个问题——塌陷
不理解没关系，直接上例子，大家一眼就看明白了
我们把页面改成这样：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>xxx</title> <style type="text/css"> #div2{ border:1px solid #000;} #div1{ width:100px; height:100px; background: red; margin:20px;} #div3{ width:100px; height:100px; background: red; margin:20px;} </style> </head> <body> <div id="div2"> <div id="div1"></div> <div id="div3"></div> </div> </body> </html>
注意，我们给div1和div3分别设置了margin:20px;
所以，我们大脑中应该基本上有了这个页面的模样div1和div3周围都有一圈margin
也就是说div1和div3与外面div2的间距应该是20px
而div1和div3上下之间的距离应该是40px
因为div1的margin-bottom有20px
div3的margin-top有20px
这两个距离一叠加，理论上来说我们看起来div1和div3之间的距离应该是40px
好的，既然我强调了“理论上”了，证明事实并不是这样
没错，事实是：
div1和div3之间的间距好像比40px要小
这种现象就是我们所说的margin的塌陷
好的知道了塌陷是怎么一回事之后我们的疑问又来了：
div1和div3之间的间距到底是多少呢？
这个地方我先告诉大家是20px
但是如果div1的margin-bottom是20px，而div3的margin-top是30px
那二者之间的间距是多少呢？
大家不妨自己试试看
我先给大家排除一种可能：不是50px
嘿嘿，说了句废话
好的这节课我们也就到此为止了，我们介绍了CSS中一个很重要的概念：
盒模型
当然我们的盒模型还远远没有结束
所以，我们下节课继续
