CSS基础（五）：定位
CSS定位机制
CSS 有三种基本的定位机制：相对定位、浮动和绝对定位。
相对定位
相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
如果将box2的框 top 设置为 50px，那么框将在原位置顶部下面 50 像素的地方。如果 left 设置为 20 像素，那么会在元素左边创建 20 像素的空间，也就是将元素向右移动。
只要box2设置了position为relative ，box1和box3始终不会因为box2的改变而改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style type="text/css">
.box
{
width: 200px;
height:100px;
border: 1px solid #F00;
float: left;
margin:0 0 0 30px;
}
.box2
{
position: relative;
left: 20px;
top: 50px;
}
</style>
</head> <body>
<div id="main">
<div class="box">box1</div>
<div class="box box2">box2</div>
<div class="box">box3</div>
</div>
</body>
</html>
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
1.当都不设置浮动时：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
#main
{
border: 1px solid #000;
padding:10px;
}
.box
{
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</body>
</html>
2.当设置box1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了box1 2，使box12 从视图中消失。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>不设置浮动</title>
<style type="text/css">
#main
{
border: 1px solid #000;
padding:10px;
}
.box
{
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
.box1
{
float:left;
}
</style>
</head>
<body>
<div id="main">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</body>
</html>
3.当都设置为浮动时，box1 向左浮动直到碰到包含框，另外两个box向左浮动直到碰到前一个浮动框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>不设置浮动</title>
<style type="text/css">
#main
{
border: 1px solid #000;
padding:10px;
overflow: hidden;
}
.box
{
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</body>
</html>
4.清除浮动，要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
更多请参考
绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
当设置box2的position为absolute时，它就会脱离文档，相当于不存在。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style type="text/css">
.box
{
width: 200px;
height:100px;
border: 1px solid #F00;
float: left;
margin:0 0 0 30px;
}
.box2
{
position: absolute;
left: 20px;
top: 50px;
}
</style>
</head> <body>
<div id="main">
<div class="box">box1</div>
<div class="box box2">box2</div>
<div class="box">box3</div>
</div>
</body>
</html>
CSS基础（五）：定位的更多相关文章
- CSS 基础：定位元素(3)<思维导图>
这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...
- CSS 基础 例子 定位及z-index
position 属性指定了元素的定位类型. position 属性的四个值: static 不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...
- CSS基础-4 定位
CSS定位和浮动 css定位:改变页面的位置 定位机制有以下三种 普通流 浮动 绝对布局 定位的属性: position:把元素放在一个静态的.相对的.绝对的.或固定的位置中 top ...
- css基础回顾-定位：position
w3school 对position定义和说明是: 定义和用法: position 属性规定元素的定位类型. 说明: 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生 ...
- 第五模块：WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- css 基础 - 3
css 基础 - 3 20161128 一. 元素的距离计算 1,两个水平方向的容器s1,s2之间的距离计算为s: s = s1的margin-right + s2的margin-left(+默认 ...
- Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器
一:长度及颜色单位 长度单位 px(像素) in(英寸) pt(点),一个标准的长度单位,1pt = 1/72in mm(毫米) cm ...
随机推荐
- solr与.net系列课程(五)solrnet的使用
solr与.net系列课程(五)solrnet的使用 最近因项目比较忙,所以这篇文章出的比较晚,离上一篇文章已经有半个月的时间了,这节课我们来学下一下solr的.net客户端solrnet 出处 ...
- 深入理解java虚拟机【Java Class类文件结构】
Java语言从诞生之时就宣称一次编写,到处运行的跨平台特性,其实现原理是源码文件并没有直接编译成机器指令,而是编译成Java虚拟机可以识别和运行的字节码文件(Class类文件,*.class),字节码 ...
- [芯片] 3、接口技术·实验三·可编程并行接口8255A
目录 一.实验目的和要求 二.实验原理与背景 2-1.8255A简介 2-2.8255A编程 三.实验具体的内容 3-1.8255方式0实验1 3-2.8255方式0实验2 3-3.8255方式1输出 ...
- Linux：常用shell快捷键
按键 作用 Ctrl+d 键盘输入结束或退出终端 Ctrl+s 暂定当前程序,暂停后按下任意键恢复运行 Ctrl+z 将当前程序放到后台运行,恢复到前台为命令fg Ctrl+a 将光标移至输入行头,相 ...
- [python爬虫] Selenium定向爬取虎扑篮球海量精美图片
前言: 作为一名从小就看篮球的球迷,会经常逛虎扑篮球及湿乎乎等论坛,在论坛里面会存在很多精美图片,包括NBA球队.CBA明星.花边新闻.球鞋美女等等,如果一张张右键另存为的话真是手都点疼了.作为程序员 ...
- django with mysql (part-4)
step01: write the ( views.py ) again .. vim views.py step02: configure your (urls.py) step03: check ...
- HTML常用命名和CSS reset代码【收集总结】
CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...
- 关于C++ const 的全面总结
http://blog.csdn.net/Eric_Jo/article/details/4138548 C++中的const关键字的用法非常灵活,而使用const将大大改善程序的健壮性,本人根据各方 ...
- iphone6 plus 为什么打印出的宽度是375
首先看一张比较简单明了的 iPhone 6 与 iPhone 6 Plus 对比图,来自 PaintCode 的<The Ultimate Guide To iPhone Resolutions ...
- Revit中如何控制图元的显示与隐藏
Revit建模过程中经常会遇到图元的相互遮挡的情况,为了将一些图元显示出来,就需要将一些不需要显示的图元隐藏掉,这就需要用到"隐藏/重置"工具,在Revit绘图窗口左下角提供了一排 ...