要有大局观……
没错，茶哥儿不会按着常规套路出牌的，我们web的第一节课就是学习什么是div。
div是我们最常用的标签，没有之一。在HTML的标签中，每一个标签都是有语音的，div的语义就是无意义。
茶哥儿没有那你们开涮，就是这个样子的，div在我们的开发中经常用来划分区域，进行分快处理分块开发。看了下图你就能明白了。
div展示.png
图片就是以我们简书网的首页为例，这么多元素的页面如果先用div划分大区域的话就是下边的样式，这样看来是不是就很简单了呢？
ok，上代码来看看如何操作div(htm+css)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width: 200px;height: 200px;background-color: red;"> 我是一个div </div>
</body>
</html>
第一个div.png
之前已经说过html和css的关系了（好基友，一辈子），如果单纯写一个div我们是看不到任何东西的（并不是不存在），代码中我们通过加入css样式（div标签中style属性里边写的就是css样式）从而改变了div的大小和背景色，于是我们就看到他了，这里我们使用的是css的行间样式表。
这里我们做个设想：body里边有100个div，要分别赋予宽200px，高200px，背景色是红色。
我勒个去，这是个多么可怕的需求，我们难道要写100个div，再写100变style吗？当然了，如果我们只能使用行间样式表那么肯定是要付出汗水与努力了，然而，我们还有另外两种完美的解决方案：内部样式表&外部样式表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>我是一个div</div>
</body>
</html>
这个就是内部样式表了，我们在head标签内添加了style标签，在style标签中书写css样式，但是为了找准我们给哪个标签添加让样式，所以我们使用了选择器：div{}，这个叫做标签名选择器，会为相同的标签添加这个样式。ok再来看看外部样式表怎么写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/index.css">>
</head>
<body>
<div>我是一个div</div>
</body>
</html>
这段代码是html文档的，我们在head标签中添加了link标签用来导入外部文件，在这里我们导入了外部的“index.css”文件，看到这里就明白了吧，所谓的外部样式表就是将样式写入到了外部的css文件中，然后通过link导入html文档。来看看index.css：
div {
width: 200px;
height: 200px;
background-color: red;
}
外部样式表与内部样式表写法上是一致的，不同的是引入方式。
如果有一个div，同时有三种样式表为其赋予颜色这个时候div应该用哪个呢？想知道吗，接着看下边的总结。
总结：
- div用于分割屏幕，常用语分块开发中；
- 行间样式表：sytle标签写在标签内部；
- 内部样式表：style标签写在head标签内；
- 外部样式表：没有style标签，使用link标签引入css文档；
- 如果一个标签同时有三种样式表为其赋予样式，行间样式表优先级最高，内部样式表与外部样式表同等级，如何选用样式取决于二者的引入顺序。
创造即永恒，喝茶去……
网友评论