伪类选择器
就是在查找的后面加上冒号和状态
- 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>
图片属性
- rerticaar-algin:调图片的底线位置，可以调节文本和图片对齐
- background-image:背景图片
- background-repeat:图片填充的方向
- background-position:背景图片的位置
- background-position:上面三个结合起来
- 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属性
将标签设置为内联标签，将内联标签设置为块级标签
- nooe:将元素隐藏起来
- block:将内联标签设置为块级标签
- 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>
float属性与display属性的差别：
- float的浮动标签是需要根据上一个标签是否浮动决定内联标签加上float,就可以设置长宽
- display直接就可以设置为inlineblock,同时可以设置长宽，还可以在同一行显示
正常文档流
- 从左到右，从上到下的正常解析顺序
非正常文档流
- 元素或者标签解析无规律
父级塌陷
- 当子标签右浮动时，父标签就会为空，就不会撑起父标签的位置。反之子标签没有浮动元素，就可以撑起父标签的面积
解决父级塌陷的方法
- after:给某些标签加上一个子标签（伪类）主要是为了解耦
清除浮动属性
- 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: 溢出时显示滚动条)
响应式布局：
在分辨率到达一个值的时候，换成该对应得到布局方式
