CSS魔法（三）浮动、相对定位、绝对定位
浮动
为何需要浮动？
浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。
浮动问题？
为何要清除浮动？
很多情况下父盒子不方便给高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
border: 1px solid red;
width: 300px;
}
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
border: 1px solid red;
width: 300px; }
.big {
width: 100px;
height: 200px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
.clear {
clear: both;
/*如果清除了浮动， 父亲去自动检测孩子的高度 以最高的为准*/
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
<div class="clear"></div> <!-- 最后一个浮动标签的后，新添加一个标签 清除浮动 -->
</div>
<div class="footer"></div>
</body>
</html>
额外标签法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
border: 1px solid red;
width: 300px; }
.big {
width: 100px;
height: 200px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
.clear {
clear: both;
/*如果清除了浮动， 父亲去自动检测孩子的高度 以最高的为准*/
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
<div class="clear"></div> <!-- 最后一个浮动标签的后，新添加一个标签 清除浮动 -->
</div>
<div class="footer"></div>
</body>
</html>
overflow 清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 180px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
.father {
border: 1px solid red;
width: 300px;
overflow: hidden; /*别加错位置了，给 父亲加*/
/*不是所有的浮动我们都需要清除 ，谁影响布局，我们清除谁*/
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
使用after伪元素清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
border: 1px solid red;
width: 300px; }
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
.clearfix:after { /*正常浏览器 清除浮动*/
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*zoom 1 就是ie6 清除浮动方式 * ie7一下的版本所识别*/
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
使用before和after双伪元素清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
} .clearfix {
*zoom: 1;
}
.father {
border: 1px solid red;
width: 300px; }
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
<ul><li>布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.service-bd {
margin-top: 40px;
}
.service-bd li {
width: 200px;
height: 200px;
background-color: #ffd800;
float: left;
border: 1px solid #e7e8e9;
}
.yingxiao {
margin: 0 45px;
}
</style>
</head>
<body>
<div class="service-bd">
<ul>
<li></li>
<li class="yingxiao"></li>
<li></li>
</ul>
</div>
</body>
</html>
取消li 的小点
li {
list-style: none; /* 取消li 的小点 */
}
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.top {
position: relative;/*相对定位*/
top: 100px;
left: 100px;
}
.bottom {
background-color: red;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
相对定位和浮动的区别：相对定位后原来的位置还继续保留，浮动后原来的位置不继续保留。
定位使用：top、bottom、left、right 切不可混用margin-top
绝对定位
position: absolute;
1.绝不占位置，跟浮动一样。
2.绝对定位是将元素依据最近的已经定位的父元素（祖先）进行定位。
父亲没定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: pink;
margin: 100px;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
position: absolute;
top: 50px;
left: 50px;
/*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
父亲有定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.yeye {
width: 800px;
height: 800px;
background-color: skyblue;
position: absolute;
}
.father {
width: 500px;
height: 500px;
background-color: pink;
margin: 100px;
/*position: absolute;*/
}
.son {
width: 200px;
height: 200px;
background-color: purple;
position: absolute;
top: 50px;
left: 50px;
/*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/
}
</style>
</head>
<body>
<div class="yeye">
<div class="father">
<div class="son"></div>
</div>
</div> </body>
</html>
子绝对定位父相对定位
给儿子绝对定位：不占有原来的位置，才能压住别人
给父亲相对定位：占有原来的位置
子绝父绝带来的问题：由于绝对定位不占用位置，当给父亲绝对定位时，下面的div元素会占用父亲的位置。
子绝父相是最合适的搭配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 310px;
height: 190px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 10px;
position: relative;
}
.top {
position: absolute;
top: 0;
left: 0;
} .bottom {
position: absolute;
right: 0;
bottom: 0;
} </style>
</head>
<body>
<div>
<img src="data:images/top_tu.gif" alt="" class="top">
<img src="data:images/br.gif" alt="" class="bottom">
<img src="data:images/adv.jpg" height="190" width="310" alt="">
</div>
</body>
</html>
定位和浮动
加了定位 浮动的的盒子 margin 0 auto 失效了
/*margin: 100px auto;*/
/*float: left;*/
position: absolute;
/*加了定位 浮动的的盒子 margin 0 auto 失效了*/
加了定位的盒子居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/*margin: 100px auto;*/
/*float: left;*/
position: absolute;
/*加了定位 浮动的的盒子 margin 0 auto 失效了*/
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
实战练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
* {
margin: 0;
padding: 0;
} li {
list-style: none;
/* 取消li 的小点 */
} .father {
width: 1259px;
height: 472px;
margin: 100px auto;
background-color: red;
position: relative;
} .son {
width: 960px;
height: 80px;
background-color: #000;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -480px;
} .son li {
float: left;
width: 160px;
height: 80px;
} .son li a {
width: 160px;
height: 80px;
display: block;
text-align: center;
line-height: 80px;
color: #fff;
text-decoration: none;
} .son li a:hover {
background-color: #fff;
color: #000;
}
</style>
<body>
<div class="father">
<div class="son">
<ul>
<li><a href="#">快递查询</a></li>
<li><a href="#">快递查询</a></li>
<li><a href="#">快递查询</a></li>
<li><a href="#">快递查询</a></li>
<li><a href="#">快递查询</a></li>
<li><a href="#">快递查询</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS的margin: 7px auto 含义是什么？
顺序为：上、右、下、左；（顺时针）
淘宝轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tb {
width: 520px;
height: 280px;
background-color: pink;
margin: 100px auto;/* 顺序为：上、右、下、左；*/
position: relative;/* 父相对定位*/
}
.tb a {
width: 24px;
height: 36px;
display: block;
position: absolute;/* 子绝对定位*/
top: 50%;
margin-top: -18px;
}
.left {
left: 0;
background: url(images/left.png) no-repeat;
}
.right {
right: 0;
background: url(images/right.png) no-repeat;
}
.tb ul {
width: 70px;
height: 13px;
background: rgba(255, 255, 255, .3);
position: absolute; /* 子绝对定位*/
bottom: 18px;
left: 50%; /*水平走父容器的一半*/
margin-left: -35px; /*左走自己的一半*/
border-radius: 8px;
}
.tb ul li {
width: 8px;
height: 8px;
background-color: #fff;
float: left;
margin: 3px;
border-radius: 50%;
}
.tb .current {
background-color: #f40;
}
</style>
</head>
<body>
<div class="tb">
<img src="data:images/tb.jpg" >
<a href="#" class="left"></a>
<a href="#" class="right"></a>
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
固定定位
.ad {
width: 200px;
height: 200px;
background-color: pink;
position: fixed; /*固定定位*/
left: 0;
top: 100px;
}
z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
/*z-index: 0; 只有定位的盒子才有*/
}
.red {
z-index: 1;
}
.blue {
background-color: blue;
left: 50px;
top: 50px;
z-index: 2;
}
.green {
background-color: green;
left: 100px;
top: 100px;
z-index: 999;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 250px;
height: 400px;
border: 1px solid #ccc;
float: left;
margin-left: -1px;
position: relative;
/*z-index: 0;*/
}
div:hover {
border: 1px solid #f40;
/*position: relative; 相对定位比标准流高一级 浮在上面的*/
z-index: 1;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
小结
CSS魔法（三）浮动、相对定位、绝对定位的更多相关文章
- css 浮动 相对定位 绝对定位区别
今天下班在地铁上看了一个样式教学视频,因为最近在学习前端.以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然 ...
- CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位
1.浮动 浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...
- 前端CSS - 相对定位,绝对定位,固定定位
前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...
- CSS：CSS定位和浮动
CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...
- CSS基础知识---浮动，定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
- css最终章之浮动、定位、溢出属性处理、z-index属性、透明度
上期内容回顾 CSS简介 # 主要就是给HTML标签添加样式 # 固定语法结构 选择器 {属性名1:属性值;属性名2:属性值} 三种引用方式 1.link标签引入外部css文件(最正规) 2.HTML ...
- CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
- css定位和浮动
1.css中一切元素皆为框.div.p.h1等为块框:span.strong等为行内框,(在文本中每一行会被自动默认为行框,行框和行内框是不一样的概念).通过display可以改变框的类型,行内框通过 ...
- CSS中的浮动和定位
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...
随机推荐
- 将ubuntu14.04 从mysql从5.5删除之后安装5.7遇到的一些问题(本篇不讨论热升级)
五一放假实在无聊 继续玩弄新的服务器.发现有台mysql版本实在有点老,估计是akiho直接使用 apt-get install mysql-server ,然后又没有更新到最新的源,然后无脑安装了5 ...
- ubuntu 环境 celery配置全解
继续尝试没有时间弄明白的技术. celery官方文档地址:http://docs.celeryproject.org/en/stable/getting-started/introduction.ht ...
- Lodop如何设置预览后导出带背景的图，打印不带背景图
Lodop中的ADD_PRINT_SETUP_BKIMG,可以加载上背景图,该背景图在预览的时候可以显示也可以不显示,打印可以打印出来也可以不打印出来.一般套打,都是不打印背景图的,比如一些快递的快递 ...
- 一点点linux系统的学习心得
我相信你正在阅读本文的时候,可能是因为你渴望学习Linux技术.我想分享一下过去两年中我自己的一些学习经历,希望你能更顺利地成为Linuxer. 两年前在Linux系统的运行和维护方面找到了一份工作( ...
- Django-website 程序案例系列-17 forms表单验证的字段解释
1.Django内置字段如下: Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label标签或显示内容 initial ...
- BZOJ1834[ZJOI2010]网络扩容——最小费用最大流+最大流
题目描述 给定一张有向图,每条边都有一个容量C和一个扩容费用W.这里扩容费用是指将容量扩大1所需的费用. 求: 1.在不扩容的情况下,1到N的最大流: 2.将1到N的最大流增加K所需的最小扩容费用 ...
- Luogu5058 ZJOI2004嗅探器（割点）
数据范围过小怎么做都行.考虑优秀一点的做法.考虑dfs树上两台中心服务器间的路径,路径上所有能割掉中心服务器所在子树的点均可以成为答案.直接从两点中的任意一点开始dfs就更方便了.一开始弱智的以为只要 ...
- Linux定时器crontab的使用
参数 Usage: crontab [参数] 文件 crontab [参数] crontab -n [主机名] Options: -u <user> 定义用户 -e 编辑工作表 -l 列出 ...
- 自学Python1.7-python变量以及类型
自学Python之路 自学Python1.7-python 变量以及类型 1 变量是什么 变量是容器 2 变量的作用 存储数据到内存 3 为什么要用变量 存储数据方便后面引用 4 变量定义的规范 变量 ...
- luogu3295 萌萌哒 (并查集+ST表)
如果给相同的位置连边,最后联通块数是n,最后答案就是$9*10^{n-1}$ 但直接连边是$O(n^2)$的 所以事先处理出一个ST表,每次O(1)地给那个ST表连边 最后再一点一点下放,就是把在这层 ...