代码教程——第十四章 从 div 扯开去

我们前边说过 div+css 布局是招聘时一种懒到家的衡量标准（其实现在 css 已经是前端的基本技能了），就好像招聘文员写上要求会打字一样的多余。好吧，虽然这个说法被无数人吐槽着，也有些人较真说这个说法不科学等等。但是我们学习 css 总是绕不开要用到 div 的。

其实 div 就是一个普通的 Html 标签，普通到什么地步呢？他几乎没有任何自带的样式，好吧，他就是一个空白的标签（是样式是空白的）。一张白纸啊，做什么都好用。我们知道 CSS 的作用就是定义样式啊，如果我们使用的标签本身自带了样式，我们还要用 CSS 对他进行修改，使其达到我们想要的效果。但是有了 div 就方便了啊，我们只要把我们需要的样式给他就好了。毕竟新建总是要比修改来的清爽省心。就好像拿张白纸写字很舒心，但是拿张写过字的纸过来，你要先把文字擦掉再去写你想要的文字，就比较闹心了。

然后说说盒模型，这东西搞了个高大上的名字唬人而已，其实就是把 div 看成一个纸箱，那么一个页面很多 div 就是一堆纸箱在房子里排开而已。进而的，div 的嵌套就是大箱子套小箱子。就这么回事，比如下图就是本教程主站的盒模型 3D 视图：

就是像摆积木一样摆出了一个页面，你说要是真的用积木去摆就好了，你就会了。不过其实换做代码操作也不过是你用电脑能听懂的语言把各个积木块的样子和位置描述一下罢了。

好像……有点乱哦，你想 div 这个空白标签看起来挺好用的，可是要是页面上全用他，那可咋区分啊？我在 CSS 里面写上 div {……} 结果所有 div 全都一起发生变化了，这就有点乱了。所以我们要给 div 取名字。

其实呢，所有的 Html 元素都可以有名字的，这个名字分为两种 class 和 id ，用法很简单，就是当做标签的一个属性去写：

就是这样，当然他们的名字你随便取，不过别搞怪，写中文啊，特殊符号啊什么的肯定不行。那么你又问了，取名字就取名字吧，怎么还两种呢？这个也好理解， id 是学号，class 是班级，反正我们初中的英语老师（为什么不是小学？我们小学没有英语课呀）就是这么告诉我们的。

然后我们该说说 id 和 class 的区别了，他们都可以用来标识某个元素，但是他们是有区别的，否则我们也不用搞两个名头出来。你知道的，在学校里一个学号对应一个学生，你报出学号就能找出有且只有一个学生。所以老师提问的时候爱叫学号，肯定有人被叫到（他叫范围以外的我们就不鸟他了）而且被叫到的肯定是一个人，不会半个班都站起来跟他吼：“报告老师，我不会！”而班级呢？一个班级可以有很多学生，这些学生的特点就是，他们是一个班的（废话！），一个班的应该就是一个年级的，应该就是一样的年龄，一样的专业……反正是一群在某方面属性一致的家伙。

所以， 在同一页面内， id 是不可以重复的，不能有两个元素具有相同的 id。某学校的两个学生学号一样，麻烦了，520 号考上了哈佛，结果两个人，谁去谁不去？就打起来了。

但是，在同一页面内，可以有多个元素具有相同的 class，三年二班有三十个同学，这很正常，校长说，让三年二班的同学去表演合唱，那么这三十个同学就都在台上唱歌，整齐划一，很好看。

这就是两者的特点。然后说，我们到 CSS 里面怎么写呢？这就涉及到了选择器的问题。先说啥是选择器，我说页面中某个元素怎样怎样，那么究竟是哪个元素呢？选择器就是用来告诉我们到底是哪个元素的。比如：

这是我们上节课的代码，大括号里是一些 CSS 属性，我们不去管他，前边的 p 是说这些属性对所有的 <p></p> 标签起作用，那么这个 p 就是一个选择器。

然后要是想对链接起作用呢？就是 a {……}，于是你看出门道来了，原来选择器就是元素的标签啊，那么 div {……} 这么写的话，大括号里的 CSS 属性肯定就对所有的 <div></div> 起作用啦？

没错，就是酱紫的！你真聪明～

但是你肯定不会就这么依了我的，刚才我们给 div 取了半天名字，然后到这根本没用到啊。放心，我们接着就来学习 id 和 class 在 CSS 里面怎么去用。

其实也很简单的，还是上边那段代码，我们给里面加一点点文字用来看效果哦：

然后 css 写作：

效果如下：

这你就明白了，在名字前面加个 # 号就代表 id，在名字前面加个 . 就代表 class。用 #来开头作为编号什么的我们很常见，这就记住啦。class 是个很平常的东西，不像 id 那么独一无二，所以这么平凡大众的属性就没得炫耀了，点个点低调的路过就好。

今天我们认识了 div，还知道了班级（class），学号（id）的特点与写法。明天我们就开始试着去写一些东西喽～