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