CSS Float(浮动)
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
- Float（浮动），往往是用于图像，但它在布局时一样非常有用。
- 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
- 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动元素之后的元素将围绕它。
- 浮动元素之前的元素将不会受到影响。
- 如果图像是右浮动，下面的文本流将环绕在它左边。
实例：demo01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style-type: none;
}
li{
float: left;
padding: 20px;
background-color: #DC143C;
color: white;
}
</style>
</head>
<body>
<ul>
<li>家具</li>
<li>服饰</li>
<li>汽车</li>
<li>装饰</li>
<li>鞋包</li>
<li>儿童</li>
</ul>
<h4>内容</h4>
</body>
</html>
CSS position (定位)
position 属性指定了元素的定位类型。
position 属性的四个值：
- static
- relative
- fixed
- absolute
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
1. static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
2. fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动。
实例：demo03<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #DC143C;
width: 100%;
position: fixed;
}
li{
display: inline-block;
padding: 15px 5%;
background-color: rgba(0,0,255,0.5);
color: white;
font-weight: bold;
}
li:hover{
background-color: rgba(0,255,0,0.5);
cursor: pointer;
}
h4{
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>动态</li>
<li>新闻</li>
<li>联系</li>
</ul>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<hr/>
<h4>底部</h4>
</body>
</html>
3. relative 定位
相对定位元素的定位是相对其正常位置。
相对定位元素经常被用来作为绝对定位元素的容器块。
可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
4. absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
实例：demo04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
margin: 0;
}
h2 {
background-color: firebrick;
width: 200px;
color: white;
line-height: 45px;
margin: 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
background-color: rgba(0, 0, 0, 0.3);
width: 200px;
position: relative;
}
li {
line-height: 40px;
}
li:hover {
color: red;
background-color: white;
}
li:hover .right {
display: flex;
}
.l {
width: 800px;
display: inline-block;
}
.r {
width: 200px;
display: inline-block;
}
.item {
display: flex;
}
.right {
background-color: rgba(0, 0, 255, 0.2);
position: absolute;
left: 200px;
top: 0;
display: flex;
display: none;
}
.ll {
width: 200px;
display: inline-block;
}
.lr {
width: 600px;
display: inline-block;
}
.r img {
width: 100%;
}
</style>
</head>
<body>
<h2>商品分类</h2>
<ul>
<li>女装/内衣
<div class="right">
<div class="l">
<div class="item">
<div class="ll">
当季流行>
</div>
<div class="lr">
春季新品商场同款气质连衣裙卫衣时髦外套毛针织衫休闲裤牛仔裤毛呢大衣无痕文胸运动文胸潮流家居服百搭船袜
</div>
</div>
</div>
<div class="r">
<img src="image/meinv.jpg" />
</div>
</div>
</li>
<li>男装/运动户外</li>
</ul>
</body>
</html>
5. 重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序
实例：demo05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.img1{
position: absolute;
width: 200px;
left: 50px;
top: 120px;
z-index: 2;
}
.img2{
position: absolute;
width: 200px;
z-index: -1;
}
</style>
</head>
<body>
<img src="image/avatar.jpg" class="img1"/>
<img src="image/meinv.jpg" class="img2"/>
</body>
</html>
[作业及实验]
1. 实现如下八卦图
2. 实现如下效果
