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>
显示效果：
6.4 固定定位 fixed
格式：position：fixed
显示特点：脱离文档流，元素会固定在窗口的某个位置，不会随着内容改变而改变
如何移动元素：通过left/right/top/bottom相对于窗口做位置偏移
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fixed</title>
<style type="text/css">
div {
/*所有div标签属性*/
width: 100px;
height: 100px;
border: 5px solid #fc3;
}
#d1 {
/*绝对定位：元素脱离文档流，失去原先的位置*/
position: absolute;
top: 100px;
left: 200px;
}
#d2 {
/*固定定位：元素脱离文档流，失去原先的位置
在有滚动条的情况下，始终相对窗口固定在该位置*/
position: fixed;
bottom: 100px;
right: 200px;
}
img {
width: 1200px;
}
</style>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
<div>div3</div>
<img alt="图片加载失败" src="1.jpg">
</body>
</html>
显示效果：
6.5 浮动定位 float
格式：float：left/right；
显示特点：脱离文档流，元素从当前行向左或者向右浮动，当撞到上级元素边框或其它浮动元素时停止。如果一行显示不下就自动换行，换行时有可能卡住。如果元素的所有子元素全部浮动，则自动识别的高度为0，通过给元素添加：overflow：hidden解决。
如何移动元素：通过外边距
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style type="text/css">
/*如果有一个元素设置了浮动定位，其余元素（子元素）一般也设置为浮动定位*/
#d1 {
width: 200px;
height: 100px;
background-color: red;
float: left;
}
#d2 {
width: 300px;
height: 150px;
background-color: yellow;
float: left;
}
#d3 {
width: 400px;
height: 200px;
background-color: blue;
float: left;
}
#d4 {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
#d5 {
width: 50px;
height: 50px;
background-color: gray;
float: left;
}
#d {
width: 1500px;
border: 2px solid orange;
overflow: hidden; /*自动找到块级元素宽度*/
}
</style>
</head>
<body>
<div id="d">
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
<div id="d4">div4</div>
<div id="d5">div5</div>
</div>
</body>
</html>
显示效果：调整窗口大小时，自动出现在前一元素后，不足空间时换行，存在卡住问题（div5应该到新一行）
div块级元素高度为零：
设置overflow: hidden;自动匹配块级元素高度：但调整窗口大小时，元素不再进行换行
浮动定位练习：
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float练习</title>
<style type="text/css">
ul,li{
padding:0;/*去除表格自带的内填充、外边距*/
margin:0;
list-style:none;/*去除列表前面的样式*/
}
li{
float:left;/*浮动定位*/
/*简单方式*/
/*margin-right:50px;*/
width:90px;/*表格框宽度*/
text-align:center;/*文字水平居中*/
border:1px solid gray;/*添加边框*/
margin-right:1px;/*框与框间隔*/
padding:5px 5px;/*内填充*/
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>免费课</li>
<li>直播课</li>
<li>会员课</li>
<li>精品课</li>
<li>线上班</li>
<li>线下班</li>
</ul>
</body>
</html>
显示效果：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
