CSS浮动和定位
主要描述浮动、定位、伪类等概念和示例
块级元素和行内元素
块级元素：
div、h、ul、li、p
- 独占一行（独占的不是body的一行，而是父容器的一行），不能与其他任何元素并列。
- 能够设置宽、高。
- 如果不设置宽度，那么宽度将默认变为父亲的100%。
行内元素：
span、a、input、u、i、img
- 与其他行内元素可以并排。不能设置宽、高。
- 默认的宽度、高度，就是文字的宽度、高度。
块级元素和行内元素的相互转换
块级元素可以设置为行内元素
行内元素可以设置为块级元素
用display进行转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
display: inline;
background-color: #55ff7f;
}
span {
display: block;
background-color: #4169E1;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span</span>
</body>
</html>
这里我们可以看到，代码中body写入了3个div块，在没有转换的情况下应该是 3个块各占一行，显示出颜色、按照设置显示出正方形区块，但是在转换后3个div仅占一行。
所以，一旦给块级元素设置这个“inline”标签将立即变为行内元素。此时它和一个span无异：此时这个div不能设置宽度、高度；
同理：“block”让标签变为块级元素。此时这个标签，和一个div无异：此时这个span能够设置宽度、高度；行内元素占一整行，别人无法和他并排；如果不设置宽度，将撑满父亲
浮动
定义
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动框脱离DOM流，父级元素会表现的浮动框不存在一样。
可以想象为：没有设置浮动的元素是在水面下的，而“浮动”后的元素飘起来脱离了父级元素。
浮动的元素浮满一行自动到下一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.fl {
float: left;
}
.fr {
float: right;
}
.clear {
clear: both;
}
/* container中只写和这个相关的,不写其他的 */
.container {
width: 1000px;
margin: 0 auto;
}
.company .item {
width: 244px;
height: 200px;
margin: 3px;
background-color: greenyellow;
}
.bg-pink {
background-color: pink;
}
.service .item {
width: 162px;
height: 250px;
margin: 2px;
background-color: skyblue;
}
.company .title {
height: 50px;
background-color: darkblue;
}
.service .title {
height: 50px;
margin-top: 20px;
margin-bottom: 20px;
background-color: red;
}
.bg-orange {
background-color: orange;
}
/* .service {
padding-top: 20px;
} */
</style>
</head>
<body>
<div class="bg-pink company">
<div class="container">
<div class="title">标题</div>
<div class="list">
<div class="item fl">1</div>
<div class="item fl">2</div>
<div class="item fl">3</div>
<div class="item fl">4</div>
<div class="item fl">5</div>
<div class="item fl">6</div>
<div class="item fl">7</div>
<div class="item fl">8</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="bg-orange service">
<div class="container">
<div class="title">标题</div>
<div class="list">
<div class="item fr">1</div>
<div class="item fr">2</div>
<div class="item fr">3</div>
<div class="item fr">4</div>
<div class="item fr">5</div>
<div class="item fr">6</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
左浮动和右浮动可以同时出现以满足需求。
清除浮动
1、clear 属性规定元素的哪一侧不允许其他浮动元素。
clear:消除浮动对自己的影响，当前元素会移动到浮动元素的下方。
2、浮动和清除浮动成对出现
3、清除浮动一般放在最靠近浮动元素的尾部，清除浮动只对同级元素有效
浮动和清除浮动要配套出现
练习
运用浮动网页模板制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.fl {
float: left;
}
.fr {
float: right;
}
.clean {
clear: both;
}
.bg-pink {
width: 970px;
background-color: pink;
margin-bottom: 10px;
}
.container {
width: 970px;
margin: 0 auto;
}
.logo {
width: 277px;
height: 103px;
background-color: red;
}
.select {
width: 679px;
height: 46px;
margin-top: 8px;
margin-left: 14px;
background-color: #ADFF2F;
}
.language {
width: 137px;
height: 49px;
margin-left: 556px;
background-color: #ADFF2F;
}
.picture {
width: 310px;
height: 435px;
background-color: orange;
}
.middle {
width: 450px;
height: 400px;
margin-bottom: 10px;
margin-left: 10px;
}
.bottom {
width: 650px;
height: 25px;
background-color: #008000;
}
.hot {
width: 190px;
height: 400px;
margin-bottom: 10px;
margin-left: 10px;
background-color: purple;
}
.middle .news {
width: 450px;
height: 240px;
margin-bottom: 10px;
background-color: #0000FF;
}
.middle .notices {
width: 450px;
height: 110px;
margin-bottom: 10px;
background-color: #0000FF;
}
.middle .messages {
width: 450px;
height: 30px;
background-color: #0000FF;
}
.address {
width: 970px;
height: 35px;
background-color: #00008B;
}
</style>
</head>
<body>
<div class="bg-pink">
<div class="container">
<div class="logo fl">标题</div>
<div class="fr">
<div class="language">language</div>
<div class="select">select1</div>
</div>
<div class="clean"></div>
</div>
</div>
<div class="bg-pink">
<div class="container">
<div class="hot fr">hot</div>
<div class="middle fr">
<div class="news">news</div>
<div class="notices">notices</div>
<div class="messages">massages</div>
</div>
<div class="bottom fr">select2</div>
<div class="picture">picture</div>
</div>
</div>
<div class="bg-pink">
<div class="container">
<div class="address">address</div>
</div>
</div>
</body>
</html>
定位
定位的分类（5类）:
默认的定位
-
默认的块元素垂直排列（div，p，h，ul，uo），行内元素左右排列（img，a，span，input）
这种默认的排列方式成为流定位。标准流里面限制非常多，在做界面布局时候经常需要下面这种需求： 让块级元素既能设置宽和高，又能左右排列
特殊的定位（4种）
- 浮动定位（浮动）：可以让块元素左右排列（没有失去块级元素可以设置宽和高的优点）。
- 相对定位：可以让元素以自身为目标产生微小的偏移（鼠标悬停是图片偏移等）。
- 绝对定位：可以让元素以父类为目标产生很大的偏移。
- 固定定位：可以让元素以窗口为目标产生很大的偏移。
后面三种定位都是以某元素为目标产生偏移。
它们的区别
1、他们的共同点：
- 都是要设置偏移，并且设置偏移的方式是一样的；
- 设置偏移的语法也是一样的；
- 以任意边为基准，向中心方向偏移为整数。
2、他们的不同
相对定位：relative定位
- 参照物：自身
- 存在DOM流中，占据原先的空间
- 必须配合top/bottom/left/right四个方位才能生效
- 上下选一个，左右选一个
- 微调某一个元素的位置，常被用来作为绝对定位元素的参照物；
- position:relative
鼠标在li上悬停时候,让li向右上方各偏移2px
绝对定位：absolute定位
- 参照物：最靠近的已定位（fixed/relative/absolute）祖先元素，如果没有已定位的祖先元素，那么它的位置相对于或者定位;
- 脱离DOM流，不占据空间。
- 必须配合top/bottom/left/right四个方位才能生效
- 上下选一个，左右选一个
- 常用作动画结构，position:absolute
固定定位:fixed定位
- 参照物：浏览器窗口
- 脱离DOM流，不占据空间
- 必须配合top/bottom/left/right四个方位才能生效
- 上下选一个，左右选一个
- 除非特殊用途，定位的时候，不要用margin
- position:fixed
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
background-color: aliceblue;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clean {
clear: both;
}
.container {
width: 730px;
margin: 0px auto;
}
.pic-box ul {
border: 2px dashed skyblue;
/* 去掉小圆点 */
list-style-type: none;
}
.pic-box img {
width: 200px;
height: 200px;
}
.pic-box p{
position: absolute;
bottom: 30px;
color: white;
/* 文字居中 */
text-align: center;
}
.pic-box ul li {
/* 相对定位 */
position: relative;
border: 1px dotted darkblue;
padding: 10px;
margin: 10px;
}
/* 移动 */
.pic-box ul li:hover {
position: relative;
left: 2px;
top: -2px;
}
.jump-top {
width: 100px;
height: 30px;
/* 固定定位，使回到顶点一直固定而不随滚动条的移动而移动 */
position: fixed;
/* 设置距离右边和下边父类的距离 */
right: 20px;
bottom: 20px;
background-color: white;
/* 文字居中 */
text-align: center;
}
.jump-top a:link {
color: blue;
}
.jump-top a:hover {
color: aqua;
}
.jump-top a:visited {
color: blue;
}</style>
</head>
<body>
<div class="pic-box">
<div class="container">
<ul>
<li class="fl">
<img src="../img/01.jpg"/>
<p>风景1</p>
</li>
<li class="fl">
<img src="../img/02.jpg"/>
<p>风景2</p>
</li>
<li class="fl">
<img src="../img/03.jpg"/>
<p>风景3</p>
</li>
<li class="fl">
<img src="../img/04.jpg"/>
<p>风景4</p>
</li>
<li class="fl">
<img src="../img/05.jpg"/>
<p>风景5</p>
</li>
<li class="fl">
<img src="../img/06.jpg"/>
<p>风景6</p>
</li>
<div class="clean"></div>
</ul>
</div>
<div class="jump-top">
<a href="#">回到顶部</a>
</div>
</div>
</body>
</html>
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
