DIV+CSS
div
DIV是层叠样式表(css)中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。
通俗来说：div在页面布局中，主要作为承载内容的容器！没有任何的默认样式，所有的外观样式都需要我们自己调整！
css就是用来表现HTML样式的计算机语言，为html化妆！
css
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言(js)动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
css的引入方式
1.行间引入、行内样式
在标签的行间使用style标签属性来设置css样式
弊端：
代码的复用性极差，代码可读性也很差！
优势：
优先级高、调试代码时比较方便！
css样式属性与标签属性的区别：
1、标签属性书写的位置是在标签行间，而css样式属性书写的位置在特定的标签属性、标签、文件中！
2、标签属性的语法格式：标签属性名="值" 标签属性名="值"
css样式属性：css属性名: 值; css属性名: 值;
2.内部引入、内联样式
在head标签内部，使用style标签，配合选择器为标签设置css样式
弊端：
没有从本质上实现样式与结构的分离
选择器：css选取标签的一种机制，不同的选择器选择标签的机制是不一样的，通过选择器找到匹配的标签后，才能设置css样式
选择器的书写格式：
选择器名称 {
css属性名: 值;
css属性名: 值;
...
}
3. 外部引入、外联样式
外部的css文件
1、首先我们需要单独创建一个css文件，在文件中使用选择器找到对应的标签，来设置样式
2、在html文件内部的head标签内，使用link标签，来导入外界的css文件
注意事项：
1、在一个html文件内部，可以使用多次link标签，来引入多个外界的css文件！
2、如果引入的多个文件中，存在重复的样式而且是使用同样的选择器来设置的，按照加载顺序后覆盖前！
选择器
1.什么是选择器？
css选取标签的一种机制，不同的选择器选择标签的机制是不一样的，通过选择器找到匹配的标签后，才能设置css样式
常用的选择器有三个：标签、id、类class选择器
标签选择器：
语法格式：标签名 {css样式集合}
选取原则：为这一类标签设置样式
2.id选择器
语法格式：#id名称 {css样式集合}
选取原则：为添加了此id的标签设置样式，可以选择唯一的一个标签！
注意事项：
(1)在一个html文件中，标签的id名称是不能重复的，是唯一的！
(2为标签设置id值，需要在标签行间使用id行间属性来赋值
(3)id名称切勿随意命名，遵循变量名的命名规范即可！最好见名知意！
类class选择器：
语法格式：.类名 {css样式集合}
选取原则：为添加了此类名的标签设置样式，可以同时为多个标签设置样式！
注意事项：
(1)类名的命名规范与id名称的命名规范一致！
(2)一个标签可以添加多个类名，多个类名在class标签属性中以空格隔开
(3)一个类也可以添加给多个标签
css样式冲突问题
如果有一天你书写的样式出不来，原因是什么？
1、写错了~
2、样式被覆盖了！
样式覆盖产生的原因有两种：
1、相同类型的选择器选择到了同一个标签，设置了同样的样式，按照文档加载顺序后覆盖前！
2、不同类型的选择器选择到了同一个标签，设置了同样的样式，此时与加载顺序无关，只与选择器优先级相关！
标签 < 类class < id
常见的css样式
文本样式
常用样式：
color：字体颜色
英文单词、十六进制代码、rgb(0~255，0~255, 0~255)
font-size：字体大小
font-weight：字体加粗效果
bold值，可以实现字体加粗效果
font-style：字体样式
italic值，可以实现字体倾斜
font-family：字体，想要呈现不同的字体，首先你得保证浏览器内能有识别的字体库！
text-decoration：文本修饰
underline下划线、overline上划线、line-througn删除线、none无修饰
text-align：文本横向的对齐方式
默认值left左对齐、center居中对齐、right右对齐
letter-spacing：字符间距
line-height: 行高
单行文本行高与容器高度一致，可以实现垂直居中
多行文本行高的设置会影响行与行之间的距离，为了确保行间距产生，那么行高的值要大于字体大小
超链接伪类样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超链接伪类样式/伪类选择器</title> <style type="text/css"> a { font-size: 30px; } /*未被访问*/ a:link { text-decoration: none; color: blue; } /*被访问过*/ a:visited { color: green; } /*鼠标悬停*/ a:hover { text-decoration: underline; color: red; } /*正在访问、正在点击*/ a:active { color: pink; } </style> </head> <body> <a href="#">百度</a> </body> </html>
如果想要让a标签的四个伪类样式都起作用，那么必须按照lvha的顺序来设置！一旦顺序改变，则不起作用！
盒模型
盒模型，也称为盒子模型，内容包含了：外边距margin、边框border、内边距padding、内容content！
一个元素的显示范围不仅仅是我们对其设置的width宽度以及height高度！
横向宽度：内容宽度 + 左侧、右侧边框宽度 + 左侧、右侧内填充(padding)的距离
纵向高度：内容高度 + 上侧、下侧边框宽度 + 上侧、下侧内填充(padding)的距离
一个元素的作用范围是：
横向宽度：内容宽度 + 左侧、右侧边框宽度 + 左侧、右侧内填充(padding)的距离 + 左侧、右侧外边距(margin)的距离
纵向高度：内容高度 + 上侧、下侧边框宽度 + 上侧、下侧内填充(padding)的距离 + 上侧、下侧外边距(margin)的距离
外边距margin：
(1) 四个方向，分别是margin-left、margin-right、margin-top、margin-bottom
(2)一个复合属性margin
一个值 上下左右
两个值 上下 左右
三个值 上 左右 下
四个值 上 右 下 左
(3) 、在给定的外边距区域内，不能存在任何内容，所以会让元素本身发生偏移！
(4) 、margin的冲突问题
如果纵向产生了冲突，取大作为两者之间的距离
如果横向产生了冲突，取和作为两者之间的距离
(5) 、外边距的距离问题：
如果是同级，则为边框外的侧到边框外侧距离
如果是父子级，是子级边框外侧到父级边框内侧的距离
内边距：
一个元素设置内边距，代表其内侧区域不能存在任何内容，所以也可以实现子级元素的位置偏移，但是要注意，一个元素设置了内填充，它的范围会变大，所以我们应当在width及height上减去内填充的距离，以保持原样！
浮动
浮动的知识点：
(1)float的值可以是left或者right，表示从父级的左侧、右侧开始横向排列，如果空间不够了，自动换行，这就是浮动带来的布局效果！
(2)浮动元素会脱离标准的文档流，不再占据空间，所以如果不对其进行处理，会对没有浮动效果的正常布局产生影响，所以我们要清浮动！
清浮动的解决方案：
在浮动元素同级以下，设置一个空的div，并为这个div设置一个clear属性。
both左右浮动都清除、left只清除左浮动、right只清除右浮动！
清浮动就是将浮动元素，按下去，回到标准的文档流中！
定位
HTML默认的布局方式是不会出现重复的元素的，就是说在一个位置上不可能出现重复的元素。但是在某些情况下需要改变元素的位置和显示效果，此时我们就需要用到定位技术！
定位的css属性为position：
static：默认值，表示是普通的流式布局，完全在文档中按照从上往下、从左往右显示
定位之后，是要做位置的偏移的！只有设置了定位属性之后，才能使用left、right、top、bottom让一个元素发生位置的改变！
relative：相对定位。偏移参照物为该元素原有的位置，而且发生偏移后，元素原先的位置依旧存在，不会影响其他元素的布局！
left正值往右、right正值往左、top正值往下、bottom正值往上！
absolute：绝对定位。偏移参照物为离其最近的一个设置了定位属性的父级元素！如果都没有设置定位属性，则以body元素为参照进行偏移！而且元素会完全脱离文档流，原有的空间也不复存在了！
left正值，从参照元素的左侧边框往右偏移
right正值，从参照元素的右侧边框往左偏移
top正值，从参照元素的上边框往下偏移
bottom正值，从参照元素的下边框往上偏移