CSS：CSS定位和浮动
CSS2.1规定了3种定位方案
1.Normal flow：普通流(相对定位 position relative、静态定位 position static)
普通流（normal flow，国内有人翻译为文档流）：普通流默认是静态定位，将窗体自上而下分成一行一行,块级元素从上至下、 行内元素在每行中按从左至右的挨次排放元素,即为文档流。
2.Float:浮动流
浮动流：元素的浮动，即可以让一个元素脱离原来的文档流，漂到另一个地方，漂到左边或右边等等。
3.Absolute position：绝对定位
绝对定位：就是直接将元素的位置写清楚，距离它的外层元素的左边、右边等多少距离。
第一部分、普通流Normal Flow演示：
代码：
CSS_Position.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="descripition" conent="this is an example">
<meta name="keywords" conent="html,css"> <link rel="stylesheet" style="text/css" href="CSS_Position.css"> <title> CSS的定位和浮动</title> </head>
<body>
<div class="div1">
</div> <div class="div2">
</div> <div class="div3">
</div>
</body>
</html>
CSS_Position.css：静态定位 <position static 从上到下>
.div1{
width: 200px;
height: 200px;
background-color: green;
display: block;/*默认块换行模式,可以不用写*/
}
.div2{
width: 200px;
height: 200px;
background-color: red;
display: block;/*默认块换行模式,可以不用写*/
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
display: block;/*默认块换行模式,可以不用写*/
}
效果图：
CSS_Position.css：静态定位 <position static 从左到右>
.div1{
width: 200px;
height: 200px;
background-color: green;
display: inline-block;/*先不换行,从左往右排列*/
}
.div2{
width: 200px;
height: 200px;
background-color: red;
display: inline-block;/*先不换行,从左往右排列*/
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
display: inline-block;/*先不换行,从左往右排列*/
}
效果图：
CSS_Position.css:相对定位 <position relative>
.div1{
width: 200px;
height: 200px;
background-color: green;
}
.div2{
width: 200px;
height: 200px;
background-color: red;
top: -10px;/*距离顶部上移动10像素*/
left: 20px;/*距离左边移动20像素*/
position: relative;/*此时是相对定位，如果换成静态定位static，那么设置的top,left等是没有任何作用的*/
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
}
效果图：
第二部分、Float 浮动流演示：
CSS_Position.css：浮动一个元素
.div1{
width: 200px;
height: 200px;
background-color: green;
}
.div2{
width: 200px;
height: 200px;
background-color: red;
float: right; /*div2块浮动到网页的右边*/
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
}
效果图：
CSS_Position.css：三个元素全部浮动
.div1{
width: 200px;
height: 200px;
background-color: green;
float: left;/*div1块浮动到网页的左边*/
}
.div2{
width: 200px;
height: 200px;
background-color: red;
float: left;/*div2块浮动到网页的左边*/
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
float: left;/*div3块浮动到网页的左边*/
}
效果图：
CSS_Position.css：清除浮动元素
.div1{
width: 200px;
height: 200px;
background-color: green;
}
.div2{
width: 200px;
height: 200px;
background-color: red;
float: right;/*div2块浮动到右边*/
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
clear: right;/*清除div3右边的浮动，当然也可以左边left、两边both*/
}
效果图：
第三部分、Absolute position绝对定位演示：
CSS_Position.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="descripition" conent="this is an example">
<meta name="keywords" conent="html,css"> <link rel="stylesheet" style="text/css" href="CSS_Position.css"> <title> CSS的定位和浮动</title> </head>
<body>
<div class="div1">
</div> <div class="div2">
</div> <div class="div3">
<div class="mylabel">
</div>
</div>
</body>
</html>
CSS_Position.css: mylabel的默认位置
.div1{
width: 200px;
height: 200px;
background-color: green;
}
.div2{
width: 200px;
height: 200px;
background-color: red;
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
.mylabel{
width: 40px;
height: 40px;
background-color: yellow;
}
效果图：
CSS_Position.css：绝对定位、使用绝对定位改变mylabel的位置，使mylabel距离外层顶部-10px，距离外层右边10px：
.div1{
width: 200px;
height: 200px;
background-color: green;
}
.div2{
width: 200px;
height: 200px;
background-color: red;
}
.div3{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
.mylabel{
width: 40px;
height: 40px;
background-color: yellow;
position: absolute;
top: -10px;
right: 10px;
}
效果图：
CSS：CSS定位和浮动的更多相关文章
- css区块定位之浮动与清除属性
float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...
- css的定位和浮动
定位 浮动 float代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)
一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通 ...
- CSS中定位和浮动对行内元素的宽高的影响
行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...
- CSS学习笔记——CSS中定位的浮动float
昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...
- CSS彻底研究(3) - 浮动,定位
Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...
- CSS中的定位与浮动
CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
随机推荐
- 去掉地址栏中的jsessionid
原来我在index.jsp中的编码是 <c:redirect url="/sys/login.shtm"/> 结果每次第一次登录都会在地址栏上出现了jsessionid ...
- BZOJ 2120 数颜色（带修改的莫队）
2120: 数颜色 Time Limit: 6 Sec Memory Limit: 259 MB Submit: 3478 Solved: 1342 [Submit][Status][Discus ...
- OC学习笔记——类别(Category)
类别,有些程序员又称之为分类. 类别是一种为现有的类添加新方法的方式,尤其是为系统的做扩展的时候,不用继承系统类,可以直接为类添加新的方法.也可以覆盖系统类的方法. 如: @interface NSO ...
- backtrack5渗透 笔记
目录 1.信息收集 2.扫描工具 3.漏洞发现 4.社会工程学工具 5.运用层攻击msf 6.局域网攻击 ...
- Twitter Storm中Bolt消息传递路径之源码解读
本文初次发表于storm-cn的google groups中,现以blog的方式再次发表,表明本人徽沪一郎确实读过这些代码,:). Bolt作为task被executor执行,而executor是一个 ...
- java字符串练习题
- mysql数据库‘复制’的办法
mysql数据库‘复制’的办法 2006-01-17 10:36:00 标签:Mysql SQL 数据库 休闲 职场 >mysqldump wap -u root -ppassword --ad ...
- memcached学习笔记5--socke操作memcached 缓存系统
使用条件:当我们没有权限或者不能使用服务器的时候,我们需要用socket操作memcached memcached-client操作 特点: 无需开启memcache扩展 使用fsocketopen( ...
- Nginx 配置文件模板
user www www; worker_processes 2; error_log /usr/local/nginx/logs/nginx_error.log crit; pid /usr/loc ...
- final与static
一.final 根据程序上下文环境,Java关键字final有“这是无法改变的”或者“终态的”含义,它可以修饰非抽象类.非抽象类成员方法和变量.你可能出于两种理解而需要阻止改变:设计或效率. fina ...