前端之路——CSS基础 二
一 伪类选择器
伪类选择器就是在查找的后面加上冒号和状态
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" alt="" 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：溢出时显示滚动条）
什么是响应式布局：在分辨率到达一个值的时候，换成该对应得到布局方式。
