5 CSS三大特性
5.1 继承性
元素可以继承上级元素的文本相关样式，元素自带效果不受继承影响，比如：超链接a标签的字体颜色、h1-h6字体大小，除非单独对此标签进行设置。
5.2 层叠性
多个选择器有可能选择到同一个元素，如果作用的样式不同，则全部层叠生效；如果作用的样式相同，则由优先级决定。
5.3 优先级
作用范围越小，优先级越高（就近原则）：id>class>标签名>继承（继承属于间接选中）
6 元素定位方式
6.1 静态定位 static（文档流定位）
格式：position：static（默认）
显示特点：块级元素从上往下排列，行内元素从左向右排列
如何移动元素：通过外边距
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>static</title>
<style type="text/css">
body {
margin: 0; /*设置左侧、上侧边距为0*/
}
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>
显示效果：
6.2 相对定位 relative
格式：position：relative
显示特点：元素不脱离文档流（不管元素移动到哪里，仍然占着原来的位置）
如何移动元素：通过top/bottom/left/right让元素相对于初始位置做位置偏移
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>relative</title>
<style type="text/css">
body {
margin: 0; /*设置左侧、上侧边距为0*/
}
div {
/*默认position: static;*/
width: 100px;
height: 100px;
border: 1px solid red;
}
#d2 {
/*相对位置*/
position: relative;
/*通过top/bottom/left/right可以设置相对初始位置的移动，
仅对自己有效，原先的位置还占着，不影响其他元素*/
top: 50px;
left: 100px;
}
/*鼠标悬浮更换样式*/
div:hover {
position: relative;
left: 200px;
}
/*标签选择器优先级高于id选择器，id选择器要单独进行设置*/
#d2:hover {
position: relative;
left: 300px;
}
</style>
</head>
<body>
<div>div1</div>
<div id="d2">div2</div>
<div>div3</div>
</body>
</html>
显示效果：
6.3 绝对定位 absolute
格式：position：absolute
显示特点：元素脱离文档流（只要元素修改成绝对定位，则它所占的位置立马让出）
如何移动元素：通过top/bottom/left/right让元素相对于窗口（默认）或某一个上级元素（需要在上级元素中做相对定位）做位置偏移
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>absolute</title>
<style type="text/css">
body {
margin: 0;
}
div {
/*默认position：static*/
width: 100px;
height: 100px;
border: 1px solid blue;
}
#d2 {
/*position：absolute：元素脱离文档流
位置相对于窗口，失去原先占的位置*/
position: absolute;
top: 50px;
left: 100px;
}
/*d4的父标签*/
#d3 {
width: 200px;
height: 200px;
border: 5px dotted yellow;
margin: 50px;
/*只有此处设置为了relative，子集标签才能相对父级标签偏移，否则相对窗口位置进行偏移*/
position: relative;
}
#d4 {
width: 80px;
height: 80px;
background-color: pink;
/*绝对定位：元素脱离文档流，失去先前占有的位置
只有父级标签设置为relative，才能相对父级标签定位，否则相对窗口定位*/
position: absolute;
top: 50px;
left: 50px;
}
#d5 {
width: 80px;
height: 80px;
background-color: orange;
}
</style>
</head>
<body>
<div>div1</div>
<div id="d2">div2</div>
<div id="d3">
<div id="d4">div4</div>
<div id="d5">div5</div>
</div>
</body>
</html>
显示效果：
absolute测试：
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>absolute测试</title>
<style type="text/css">
/*设置外块*/
div {
width: 253px;
padding: 10px;
background-color: rgb(0, 0, 0, 0.3);
position: relative; /*做位置参考*/
}
/*设置输入框*/
input {
width: 213px;
border: 0; /*去掉文本框自带边框*/
padding: 10px 20px;
}
/*设置图片*/
img {
position: absolute;
right: 30px;
top: 14px;
}
/*设置文字*/
p {
font-size: 12px;
color: red;
margin-top: 8px;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="请您输入用户名"> <img alt="图片加载失败"
src="http://doc.canglaoshi.org/tstore_v1/images/login/yhm.png">
<p>用户名不能为空！</p>
</div>
</body>
</html>
显示效果：