一 伪类选择器
伪类选择器就是在查找的后面加上冒号和状态
hover：悬浮到上面就会变化一种状态
link：没有接触的状态
active：点击是触发的状态
visited：点击后的状态
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????a:link{ ???????????color: #00b050; ???????} ???????a:hover{ ???????????color:#fff59d; ???????} ??????a:active{ ???????????color:#0b9efb; ???????} ???????a:visited{ ???????????color:#2d98fc; ???????} ???</style></head><body><a href="#">请点击</a></body></html>二 css里面的属性补充
图片属性：
rerticar-algin：调图片底线的位置，可以调节文本和图片底线对齐。文本有四线，图片默认对应的是图片的基线，
background-image：背景图片
background-repeat：图片填充的放向
background-position：背景图片的位置。
background：上面三个结合起来
background-size：背景图片的大小
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.i1{ ???????????vertical-align: -3px; ???????} ???????.d1{ ???????????width: 100%; ???????????height:400px; ???????????/*background-image:url(111.png);*/ ???????????/*background-repeat:no-repeat;*/ ???????????????????/*!*repeat-x; ?行 ?repeat-y ?竖*!*/ ???????????/*background-position:50%;*/ ???????????background:url(111.png) no-repeat 50%; ???????????background-size:contain; ???????} ???</style></head><body><div class="d1"> ???<span>美女</span> ???<img src="111.png" ?class="i1"> ???</div></body></html>display属性：将块级标签设置为内联标签，将内联标签设置为块级标签。
none值：将元素隐藏起来
block值：将内联标签设置为块级标签
inline值：将块级标签设置为内联标签
inline值：拥有了设置长宽，同时也可以在一行显示
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????div{ ???????????display: inline; ???????} ???????span{ ???????????display: block; ???????} ???????.d{ ???????display:inline-block; ???????} ???</style></head><body><div>div</div><div>div1</div><span>span</span><span>span1</span><div class="d">div2</div><div class="d">div3</div><span class="d">span2</span><span class="d">span3</span></body></html>边框属性：border属性
color：设置颜色
width：设置宽度
height：设置高度
style：设置线体（botted，dashed，：虚线；solid：实线；double：双层线；）
radius：调节形状
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????div{ ???????????width:200px; ???????????height: 200px; ???????????border-color:#0C5404; ???????????border-width: 5px; ???????????border-style: groove; ???????????border-radius:30px; ???????} ???</style></head><body><div></div></body></html>列表属性：
list-style属性：列表样式（none值：去掉样式；circle：空心圆；armenian：特殊符号；decimal：序号；disc：实心圆）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????ul{ ???????????list-style: georgian; ???????} ???</style></head><body><ul> ???<li>111</li> ???<li>111</li> ???<li>111</li> ???<li>111</li></ul></body></html>文本属性：
word-spacing：文本的边距
content：内容区域
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????????????span{ ???????????word-spacing: 50px; ???????} ???</style></head><body><span>hellasdfdso sadfs</span></body></html>content属性详细资料：http://www.runoob.com/cssref/pr-gen-content.html
三 float属性补充
float属性和display属性的差别：1 float的浮动标签是需要根据上一个标签是否浮动决定的，内联标签加上float，就可以设置长宽，二display直接就可以设置为inlineblock，同时可以设置长宽，还可以同一行显示；2 display属性比float属性更加的容易操作。
什么是正常文档流：从左到右，从上到下的正常解析顺序
什么是非正常文档流：元素或者标签解析无规律
什么是父级塌陷：当子标签右浮动时，父标签就会为空，就不会撑起父标签的位置，这就叫做父级塌陷。反之如果子标签没有浮动元素，就可以撑起父标签的面积。
解决父级塌陷的方法：
after：给某些标签加上一个子标签（伪类），主要时为了解耦（常用单词：cleafix）
清除浮动属性：clear属性
none：默认值，允许两边都可以右浮动元素
left：清除左浮动
right：清除右浮动
auth：清除两边有的浮动。注意：在解析清除浮动的标签时，他下一个标签还没有操作，所以后面的浮动效果还存在。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.d2{ ???????????border: 1px red solid; ???????} ???????.d1{ ???????????width: 30px; ???????????height:30px; ???????????margin-left: 10px; ???????????background-color: #0b9efb; ???????????float: left; ???????} ???????.clearfix:after{ ???????????content: "sdas"; ???????????display: block; ???????????clear: both; ???????} ???</style></head><body><div class="d2 clearfix"> ???<div class="d1"></div> ???<div class="d1"></div> ???<div class="d1"></div></div></body></html>定位属性：position属性
relative：相对定位，top顶部距离；left：左部距离；buttom：下边距离；right：右边距离。空间位置依然存在，并未脱离文档流，参照物时之前自己的位置
absolute：绝对定位。完全脱离文档流，之前位置不存在，定位一是想上找一个已经定位了的父级标签
fixed：完全脱离文档流，参照物就是可视窗口，也就是当前屏幕。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????*{ ???????????margin:0; ???????????padding: 0; ???????} ???????.d1{ ???????????width: 200px; ???????????height: 200px; ???????} ???????.d4{ ???????????background-color: #0b9efb; ???????????position:fixed; ???????????bottom:20px; ???????????right:20px; ???????} ???????.d2{ ???????????background-color: red; ???????????position:relative; ???????????top:200px; ??????????left:200px; ???????} ???????.d3{ ???????????background-color: #0C5404; ???????????position:absolute; ???????????top:200px; ???????????left:200px; ???????} ???????.d5{ ???????????width: 100%; ???????????height: 2000px; ???????} ???????.d6{ ???????????background-color: #00e676; ???????} ???</style></head><body><div class="d5"> ???<div class="d1 d6"></div> ???<div class="d1 d4"></div> ???<div class="d2 d1"></div> ???<div class="d3 d1"></div></div></body></html>补充知识：
overflow：hidden：在父级标签里面加上这个，元素超出的范围就会隐藏
overflow（sceroll：显示滚动条；auto：溢出时显示滚动条）
什么是响应式布局：在分辨率到达一个值的时候，换成该对应得到布局方式。
重修课程day48（前端三之css二）
原文地址：http://www.cnblogs.com/fangjie0410/p/7795370.html