前面讲的html常用标签，其实实际工作中直接使用标签和直接在元素内部通过属性修改样式的情况几乎不存在，但是我们还是要了解，今天我们就来讲一下实际工作中用到的技术，div和css。
一、div标签；
Div它是一个html标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，必须结合CSS来使用。它主要用于页面的布局。说到这还有一个标签跟它非常类似，那就是span标签，举个例子，我要实现对一句话中的一部分单独设置样式，那么就可以使用span标签将这部分内容包含起来。
div和span标签简单演示执行效果二、css；
1、概念；
成叠样式表，它定义了html如何显示，它可以大大提高我们的工作效率，外部的css一般存储在后缀名为.css的文件中，多个样式表可以层叠为一，当前css版本为css3。
2、作用；
html是表示的是页面内容，css则规定了如何显示（呈现的样式）。
3、css语法；
css语法很简单，一个属性名：属性值；如“color：red；”其中分号不可以不写。
4、css引入方式；
css样式引入方式为三种；
第一种前面也接触过了，内联样式，我们可以直接在标签内部加入style属性实现对标签样式的修改；
第二种是内部引入，是讲样式定义在html头部；
使用style标签实现。
第三种是外部引入，这个时候css是一个单独的文件，这个也是当前比较流行的一种方式，因为通过外部引入可以对整个项目样式进行统一管理，后期维护非常方便；外部引入在html的头部，通过link标签可引入外部css文件。
css三种引入方式css文件5、css的选择器；
html页面中有很多标签，我如何精准的设置标签的样式呢？css选择器帮助我们解决了这个问题；
元素选择器；
元素选择器顾名思义就是通过元素来设置样式，如我可以统一设置所有的div这个标签的样式，可以统一设置所有的span标签的样式，如果是对多个同一类型元素设置样式用元素选择器再合适不过写法如下；
元素名{
属性名：属性值；
}
类选择器；
标签中有一个属性为class，如果对多个不同类型的标签实现统一样式设置的话可以通过这个实现，写法如下；
.类名{
属性名：属性值；
}
id选择器；
标签中有一个属性为id，一个文件中id要设置唯一，它可以实现对单个标签实现样式设置，写法如下；
#id{
属性名：属性值；
}
6、css的浮动；
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。下面是几种浮动的模型，可以看下。
演示浮动代码如下；在css中加入float属性即实现浮动，可选left、right等，若要清楚浮动可使用clear，属性可选both等；
浮动实现代码浮动运行效果7、盒子模型；
盒子模型上图中，红色边框为手机的外包装盒，而且外包装盒有一定的厚度(border)，为了保护手机在运送的过程中不被磕坏，我们在盒子里面四周填充了一层泡沫，并且泡沫也有一定的厚度(padding)，这层泡沫将手机包裹住，手机就是整个盒子的核心内容(content)。
我们在修改页面元素位置的时候，需要设定它相对于盒子的位置，那么我们有必要清楚
关于盒子模型里面的取值相关问题。
在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边
距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。而默认情况下，内边距、边框和
外边距的值均为0.
占据页面大小的区域是整个元素框的总尺寸！默认情况，padding、margin、border
均为0，假如我们设定了区域内容的width和height，那么此时整个元素框的总尺寸就是
该区域内容的宽高了，此时，如果设定了margin值，那么整个元素框的总尺寸会发生变化
(变大了)，但是我们希望它的整体布局不发生变化！所有我们可以修改区域内容的尺寸(原
有大小减去设定的margin值)。
例如元素宽度一共为px，border为0，margin为10px，padding为10px，那么content宽度为-10*2-10*2=60px，因为水平方向有两个margin和两个padding，这个地方不能搞迷糊了。
css的内容是要掌握的，选择器要理解，根据实际需求选择合适的选择器，div标签要掌握，浮动要掌握，盒子模型要理解，具体细节可在实际工作中去接触。今天的内容就到这里，没有点击