css的引用和盒模型

我们上面几章大致讲了一下html，虽然html简单但是大家别忘记它仅仅是一个页面的骨架，再美的人如果只有骨架的话相信也需要一副皮囊，所以接下来我们要学习如何改善我们的页面的“颜值”，也就是我们开始正式学习css。
css的全程是：叠样式表(Cascading Style Sheets)
第一步我们来认识一下盒模型并且简单的了解一下效果

我们第一步简简单单的创造一个空的div

空的div因为是块级元素，所以即使是空的高度是0也是独占一行

下面我开始给它化妆了

先给他画个蓝色的粉底，为了大家可以看清楚它。但是如果你画完粉底就会发现因为高度是0的原因还是看不到它。我们接下来要给它加个高度

宽度和高度都设成100px

我们的第一个长100像素高100像素颜色是蓝色的div出现鸟～
现在在我们讲更多的酷炫的css技术之前，我们暂时收回来一下，我们还没有说怎么在html里面引用css呢：
css的引用方式有三种:
1.内联样式（行内样式）
内联样式顾名思义就是写在最内部的样式：

2.内部样式
内部样式就是写在次内部的样式：

3.外部样式
这个外部样式的讲究大了，首先这种模式把css代码单独写在一个css文件里面，然后用某种方式去引用，所以我们首先要建立一个css文件

在这个文件里面写上之前在内部样式表里面一样的代码就OK，建立联系我们就要通过一个特殊的标签link

我们的外部样式表被成功的引入了！！

OK我们学会了怎么引入css了，我们接下来要好好研究一下一个标签的css结构：
打开控制台

这就是标准的盒模型的结构，这个结构分为四层:
最外面一层是margin代表着整体元素距离外面的其他元素的距离
margin下面的是border层级，就是元素外部的边框
border层级下面的是padding层级，padding层级是填充层级也就是边框距离着元素真是宽度里面的填充距离
最下面的层级是css所规定的(或者是元素默认)的宽度和高度
别bb写代码：

所以我们可以得出一个结论:
一个元素真实占的空间大小是它的宽/高加上它的padding+border