四、浮动与定位
一、基础概念
1、文档流
浏览器对元素排版的过程中,元素会按着从左至右,从上至下的流式排列,并最终在窗口自上而下分成一行行,并在每行中按从左至右的顺序摆放元素.
2、脱离文档流
打乱元素浏览器的排版,或是从排版中拿走
3、如何脱离文档流
让一个元素不在正常的文档流中，唯一的办法是让元素浮动或定位技术
二、浮动
1、什么是浮动?
浮动就是元素可以向左向右移动,直到元素的外边缘碰到包含框或者另一个浮动框的边框为止,
2、float属性
-
说明
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本 围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成 一个块级框，而不论它本身是何种元素。如果浮动某元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。 -
语法格式
float : none | left |right -
可选值
值 说明 left 图像或文本浮动在父元素的左边。 right 图像或文本浮动在父元素的右边。 none 图像或文本不浮动,默认值
3、示例代码
见课堂案例
4、浮动元素的特征有
- 块在一排显示；
- 内联元素浮动后变为块级元素，支持宽高；
- 无论是块元素还是内联元素，没有宽度时默认内容撑开宽度；
- 脱离文档流；
5、浮动产生负作用（造成塌陷）
-
背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
-
边框不能撑开,如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
-
margin padding设置值不能正确显示,由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
6、如何清除浮动（解决塌陷）
-
给浮动元素的父元素添加高度
-
在浮动元素末尾添加一个空标签，专门用来清除浮动，使用clear:both属性
.clear {clear:both} -
给父元素设置属性overflow:hidden
.div{ width:400px; border:1px solid #F00; background:#FF0; overflow:hidden } -
在父类添加伪类元素选择器清除浮动(推荐)
.clear {zoom:1;} /*专门为了兼容 IE6/7 */
.clear:after {
clear:both;
content:"";
display:block;
width: 0;
height: 0;
visibility:hidden;
}
1.clear:both;指清除所有浮动；
2. content: '.';
3.display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。
4 visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来
7 、浮动的16条规则
- 浮动元素会从文档正常流中删除，但它仍会影响布局。
- 浮动非替换元素必须为其指定width，否则元素的width会趋于0而导致浮动元素不能完整显示。
- 一旦元素具有了浮动属性，它便成为了一个块级元素。
- 浮动元素的左右外边界不能超出包含块的左右内边界。
- 浮动元素永不会重叠。
- 浮动元素不会超过容器的上padding。
- 后浮动的元素永不会超过先浮动元素的顶端。
- 浮动元素会尽可能高地放置，便这个高受限于规则6和规则7。
- 浮动元素的下边界没有要求，因此当容器不足以容下浮动元素时，浮动元素会向下延伸。但部分浏览器会采取增大容器高度以容下浮动元素，而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是：让容器也浮动。
- 浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。
- 如果浮动元素设置了负的外边距、这将破坏规则4、6、7。
- 当浮动元素的width>容器的width时，这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定）。
- 浮动重叠规则：行内框(如strong)与浮动元素重叠时，其边框、背景、内容均位于浮动元素之上；块框与浮动元素重叠时，其边框、背景在浮动元素之下，而内容在浮动元素之上。
- 对某个元素应用clear:left，意味着这个元素的左边不能有浮动元素。
- clear不能用于非块级元素，比如
，在大多数浏览器看来它是一个非块级元素，因此如果对br应用clear来清除浮动不会有任何效果，除非改变br的display:block。 - 如果某元素应用clear清除浮动，则此元素设置的上外边距值会被忽略，但会有一个重新计算的上外边距值(甚至可能为0).如果希望此元素与浮动元素之间有一个明确的间隔，可以在浮动元素上设置下外边距
三、定位
1、什么是定位?
**对元素进行定位**
说明
定位要配合top right bottom left 属性使用来确定定位的具体位置
2、position
-
语法格式
position : static |absolute| relative|fixed -
可选值
值 说明 absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是 文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占 的空间会关闭，就好像元素原来不存在一样 fixed 元素框的表现类似于将 position 设置为 absolute，其包含块是视窗本身。 （不支持IE6） relative 生成相对定位的元素，相对于其正常位置（自身在文档流中位置）进行定位。 static 默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明，即上述声明无效）。 -
辅助属性
属性 top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移 right 定义了定位元素右外边距边界与其包含块右边界之间的偏移 bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移 left 定义了定位元素左外边距边界与其包含块左边界之间的偏移 z-index 设置元素的堆叠顺序。值大的元素总是会处于堆叠值低的元素的前面(值大的优先显示)
3、相对定位(relative)
-
说明
定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。
-
示例代码
<html>
<head>
<style type="text/css">
.box1{
background: red;
width:100px;
height:100px;
}
.box2{
background:yellow;
width:100px;
height:100px;
position: relative;
left: 20px;
}
.box3{
background:blue;
width:100px;
height:100px;
position: relative;
right: 20px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>
4、绝对定位（absolution）
-
说明
元素框从文档流完全删除，并相对于其包含块定位。元素定位后生成一个块级框，而不论原来它在正常流中是何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素（这里的已定位元素指除 static默认定位的其余三种），如果元素没有已定位的祖先元素，那么它的位置相对于 最初的包含块（即body）
-
示例代码
<html> <head> <style type="text/css"> .box1{ background: red; width:100px; height:100px; } .box2{ background:yellow; width:100px; height:100px; position: relative; left: 20px; } .box3{ background:blue; width:100px; height:100px; position: relative; right: 20px; } </style> </head> <body> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </body> </html>
5、固定定位
- 说明
是一种特殊的绝对定位，对其设置的偏移量永远是相对于视窗本身。我们常见到的导航条固定在页面顶部，回到页面顶部按钮基本都是采用此定位方式(还比如网站上各种固定位置广告)
-
示例代码
<!DOCTYPE html> <head> <title>CSS固定定位</title> <style type="text/css"> #box1 { width:120px; height:1500px; border:1px solid gray; background-color:#B7F1FF; } #box2 { position:fixed;/*设置元素为固定定位*/ top:30px;/*距离浏览器顶部30px*/ left:160px;/*距离浏览器左部160px*/ width:60px; height:60px; border:1px solid silver; background-color:#FA16C9; } </style> </head> <body> <div id="box1">普通的div元素</div> <div id="box2">固定定位的div元素</div> </body> </html>
6、使用规则
**父元素使用相对定位，子元素使用绝对定位**
四、综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
font-size: 14px;
text-decoration: none;
margin: 0;
padding: 0;
}
.content {
width: 500px;
}
ul {
margin-left: 10px;
border-top: 1px solid orange;
}
ul, dl {
list-style: none;
}
H3 {
width: 100px;
margin: 10px 10px 0;
padding: 5px 10px;
font-weight: 700;
color: white;
font-size: 16px;
background: orange;
}
ul > li {
padding: 10px 10px 10px 0;
border-bottom: 1px solid lightgray;
}
a {
color: darkgray;
position: relative;
cursor: pointer;
display: block;
}
a:hover {
color: red;
}
ul > li > a > div {
width: 60%;
position: absolute;
display: none;
left: 200px;
margin-top: 5px;
}
a:hover div {
width: 70%;
background: ghostwhite;
display: block;
padding: 5px;
border: hotpink;
}
div > img {
width: 30%;
display: block;
height: 130px;
float: left;
}
div > dl {
margin-left: 5px;
float: left;
}
dl>dt,dl>dd {
padding: 5px;
color:black;
}
dl>dt>span,dl>dd>span{
color: #666666;
font-weight: 700;
}
</style>
</head>
<body>
<div class="content">
<h3>我喜欢的音乐</h3>
<ul>
<li><a href="#">东京不太热
<div>
<img src="http://p1.music.126.net/H_WHmV3ZZfd9ZGZNekk-bQ==/5655887813280446.jpg?param=130y130">
<dl>
<dt><span>歌名:东京不太热</span></dt>
<dd><span>歌手:</span>刘安琪</dd>
<dd><span>介绍:</span>东京真的不热吗?</dd>
</dl>
</div>
</a></li>
<li><a>高白气球
<div>
<img src="http://p4.music.126.net/Qc5fsvjghmXXrLavDdQWgA==/19018252625793869.jpg?param=130y130">
<dl>
<dt><span>歌名:高白气球</span></dt>
<dd><span>歌手:</span>周杰伦</dd>
<dd><span>介绍:</span></dd>
</dl>
</div>
</a></li>
<li><a>演员
<div>
<img src="http://p4.music.126.net/ULlwJ2drOfYv-f6-_7jGGQ==/3250156379592966.jpg?param=130y130">
<dl>
<dt><span>歌名:</span>演员</dt>
<dd><span>歌手:</span>薛之谦</dd>
<dd><span>介绍:</span>中国内地男歌手，籍贯上海市</dd>
</dl>
</div>
</a></li>
</ul>
</div>
</body>
</html>
扫一扫
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
