CSS
- 伪类
CSS伪类专门用来表示标签的一种特殊的状态，当我们需要为处在特殊状态的标签设置样式时，就可以使用伪类。
语法：
：link <!--表示普通的链接(没访问过的链接)-->
：visited <!--表示访问过的链接
浏览器是通过历史记录来判断一个链接是否访问过
使用visited伪类只能设置字体的颜色-->
：hover <!--表示鼠标移入的状态-->
：active <!--表示的是被点击的状态-->
：focus <!--向拥有键盘输入焦点的标签添加样式-->
注意：visited放在：hover之前
：active必须被置于：hover之后，才是有效的
：hover和active也可以为其他标签设置
-
透明
定义透明效果的属性是opacity
opacity属性设置标签的不透明级别值为1.
规定不透明度：从0.0（完全透明）到1.0（完全不透明）。 -
块级，行级，行级块标签
等等
块级标签：无论内容多少都会独自占据一行
例如
默认宽：与父级标签一致
默认高：0或者与内容高度一致
行级标签：只占自身大小的标签，不独占一行
即使设置宽高也无效
例如
行级块标签：可以设置大小，不会独占一行
注：一般使用块级标签包含行级标签，不使用行级标签包含块级标签。
a可以包含任何标签，不包括a本身。
p标签不可以包含任何块标签。
display标签：可以改变标签的类型
display：inline 设置为行级标签。
display：block 设置为块级标签。
display：inline-block 设置为行级块标签。
display：none 让标签从网页上消失，不占用网页空间
div标签
块级标签，可以放置任何标签
没有任何附件功能，给了什么属性就变成什么样子
主要用来网页布局
span标签
行级标签
没有任何附加功能，给了什么属性就变成什么样子
主要用来选中文档当中的文字 -
盒子模型
内容区
盒子中放置内容的区域，也就是标签中的文本内容，子标签都是存在于内容区中的。
如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小是一致的。
通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。
width和height属性只适用于块标签（包含行级块标签）。
如果标签的内边距和边框都没有那么内容区的大小就是标签的大小。
内边距
标签内容区于边框以内的空间。
内边距会影响整个盒子的大小。
使用padding属性来设置标签的内边距。
padding按照上（top）、右（right）、下（bottom）、左（left）的顺序分别设置大小。
边框
标签的最外层的框。
可以使用border属性来设置盒子的边框：
border：1px red solid；
上边的样式分别指定了边框的宽度、颜色和样式
也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。
边框可以设置样式：dotted（点线） dashed（虚线） solid（实线） double（双线） groove（槽线）
border-radius ：是指四个角为圆角边框。
标签实际大小：内容区+内边距+边框
外边距
标签边框于周围标签相距的空间。
使用margin属性可以设置外边距。
margin-top/right/bottom/left。四个方向
margin的值可以为负。
margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等。
垂直设置为auto时值为0，所有水平居中也可以简写为margin：0 auto。
外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子的实际控制范围。
清除浏览器的默认样式
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。
所有我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统去掉。
*{
margin：0；
padding:0;
}
- 文档流
指的是文档中的标签在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左到右的顺序排放标签，即为文档流。
就是标签在网页中默认的排放顺序。
浮动
所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。
浮动使用float属性。
可选值：
none：不浮动
left：向左浮动
right：向右浮动
块级标签和行级标签都可以浮动，当一个行级标签浮动以后将会自动变为一个块级标签。当一个块级标签浮动以后，宽度会默认是内容的宽度，所有当漂浮一个块级标签时我们都会为其指定一个宽度。
带来的问题：高度崩塌，浮动元素没有将父级标签撑开。
解决方案：1.设置高度撑开父标签。
2.清除浮动影响 会自动将父标签撑开为浮动标签的高度。
clear：浮动值
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
float: left;/* 向左浮动 */
background-color: #008000;
width: 100px;
}
#div2{
background-color: #A52A2A;
float: left;
}
span{
float: left;
width: 100px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<span >dawda</span>asdaw
<div style="clear: left;"><!-- 清除左浮动 -->
</div>
</body>
</html>
- 定位
定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。
定位:必须找准一个参照物。
相对定位
相对于它的起点进行移动，移动后原来的位置还被占用。
position：relative 开启相对定位
如果没有设置偏移量，标签位置不动。
left/right/bottom/top： 数值 设置偏移量
与其他标签位置重叠时提升一个层级。
相对定位不会改变标签的性质。
绝对定位
不占空间，运用了绝对定位的标签会脱离原来的文档，浮动起来。
没有设置偏移量，位置不变。
left/right/bottom/top：偏移量 设置偏移量
绝对定位是以离它最近的开启了定位的祖先标签进行定位，这两个条件有一个不满足就会以浏览器的窗口为参照物定位。
绝对定位会是标签提升一个层级。
绝对定位会改变标签的性质，行级标签变为块级标签。
Z-index
设置标签的堆叠顺序。
如果定位标签的层级是一样，则下边的标签会盖住上边的。
通过z-index属性可以用来设置标签的层级。
可以为z-index指定一个正整数作为值，该值将会作为当前标签的层级。
层级越高，越优先显示。
对于没有开启定位的标签不能使用z-index.
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: #ffff00;
}
#div2{
width: 100px;
height: 100px;
position: relative;/* 开启相对定位 */
left: 100px;
top: 100px;
background-color: #FFA500;
}
#div3{
width: 100px;
height: 100px;
background-color: #00FFFF;
}
#div4{
width: 200px;
height: 200px;
background-color: #ffff00;
float: left;
position: relative;/* 开启相对定位 */
}
#div5{
width: 100px;
height: 100px;
position: absolute;/* 开启绝对定位 */
left: 100px;
background-color: #FFA500;
float: left;
}
#div6{
width: 100px;
height: 100px;
background-color: #00FFFF;
float: left;
}
#span1{
position: absolute;/* 开启绝对定位 */
background-color: aquamarine;
top: 10px;
}
#div7{
width: 100px;
height: 100px;
background-color: #0000FF;
}
</style>
</head>
<body>
<div id="div1">
div1
<div id="div2">
div2
</div>
</div>
<div id="div3">
div3
</div>
<div id="div4">
div4
<div id="div5">
div5
</div>
</div>
<div id="div6">
div6
</div>
<span id="span1">
span
</span>
<div id="div7">
div7
</div>
</body>
</html>
