注意：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>