CSS3定位和浮动详解
本文为大家分享CSS3定位和浮动的基础概念，与使用方法，供大家参考，具体内容如下
一、定位
1、 css定位：
改变元素在页面上的位置
2、 css定位机制：
普通流：
浮动：
绝对布局：
3、 css定位的属性:
position 把元素放在一个静态的，相对的，绝对的，或者固定的位置中
top/left/right/botom 元素向上/左/右/下的偏移量
overflow 设置元素溢出其区域发生的事情
clip 设置元素显示的形状
vertical-align 设置元素显示的对其方式
z-index 设置元素的堆叠顺序/用来设置元素的堆叠顺序，越大越在上方/
position的属性
static 静态的（默认）
relative 相对布局（默认的）
absolute 绝对布局 （和其他的标签无关联）
fixed 固定的（不会随着页面的滚动而动）
实例代码：
- <body>
- <div id="position1"></div>
- <div id="position2"></div>
- <script>
- for (var i=0;i<100;i++){
- document.write(i+"<br/>")
- }
- </script>
- </body>
- #position1{
- width: 100px;
- height: 100px;
- background-color: blue;
- position: relative;
- left: 20px;
- top: 20px;
- /*用来设置元素的堆叠顺序，越大越在上方*/
- z-index: 2;
- }#position2{
- width: 100px;
- height: 100px;
- background-color: red;
- position: relative;
- left: 30px;
- top: 10px;
- z-index: 1;
- }
二、浮动
float属性可用的值:
left/right/none/inherit: 向左、右，不浮动，从父级继承。
* float
1.浮动后，脱离正常流，在浮动流中排列。任何元素都是作为块元素来显示，可设置宽高，内容撑开宽度。
2.很多浮动块在一起的时候，他们总是找与自己最近的、浮动方向相同的块来确定自己的位置，如果被迫换行，则以这个最近的元素的高度为基准起新行
clear属性： 去掉浮动属性（包括继承来的）
意思和上面对应的一样
需要清浮动的情况：
子标签浮动后，父标签的高度无法被撑开，所以需要清浮动；
新加入的标签，希望不受之前浮动元素的影响，则需要清浮动；
1.clear:both; height:0; overflow:hidden;
2.overflow:hidden; 触发layout 常用于清楚内浮动；
3.after 伪对象：给当前对象设置
.aa:after {content:”.”}
.aa {display:inline-block;}
.aa {display:block;}
想办法 触发ie6的layout渲染机制，靠运气解决了很多bug，zoom：1可以触发！！！
inline-block对内块 对外行；
4.父标签一起浮动；
5.position:absolute；清除浮动
display
display：block 以块元素显示；
display：none 内容消失，不占空间；
display：inline 以行内元素显示，可解决IE6的双倍BUG；
display：inline-block 对内块，对外行。
visibility：none
隐藏，但是依旧占用空间，影响布局
以上就是关于CSS3定位和浮动的全部内容，希望对大家的学习有所帮助。
CSS3定位和浮动详解的更多相关文章
- CSS3的@keyframes用法详解:
CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...
- css3(border-radius)边框圆角详解（转）
css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...
- css3系列之transform详解translate
translate translate这个参数的,是transform 身上的,那么它有什么用呢? 其实他的作用很简单,就是平移,参考自己的位置来平移 translate() translateX() ...
- 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）
[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- 第98天：CSS3中transform变换详解
transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...
- CSS3 基础(1)——选择器详解
CSS3选择器详解 一. 属性选择器 在CSS3中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. 选择器 示例 描述 ...
- 第97天：CSS3渐变和过渡详解
一.渐变 渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性. 可分为线性渐变.径向渐变 1. 线性渐变 (grad ...
- CSS系列 (05)：浮动详解
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...
随机推荐
- [BZOJ1528][POI2005]sam-Toy Cars(贪心）
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1528 分析:这个贪心很好想,因为每次如果加入一种玩具,那么必须要删掉一种玩具,就变成了 ...
- Stem函数绘图
stem(n,x,'filled');第三个参数是绘图的样式,filled就是填充,将圆圈填充. Stem函数绘图各种不同的绘图函数分别适用于不同的场合,使用“stem”绘制针状图最简单,从附录中提供 ...
- Excel——将内容导出
using (FileStream fsRead = File.OpenRead("111.xls")) { IWorkbook wk = new HSSFWorkbook(fsR ...
- 如何使用国内源部署Ceph？
由于网络方面的原因,Ceph的部署经常受到干扰,通常为了加速部署,基本上大家都是将Ceph的源同步到本地进行安装.根据Ceph中国社区的统计,当前已经有国内的网站定期将Ceph安装源同步,极大的方便了 ...
- Ubuntu 14.04 安装最新稳定版Nginx 1.6.0
如果已经安装,请先卸载sudo apt-get remove nginx最新的稳定版Nginx 1.6.0在ubuntuupdates ppa库中提供,网址http://www.ubuntuupdat ...
- Struts2总结
1.构建Struts2的开发环境? 1.1:导入相应jar包(最简化的,后期可以直接复制). 1.2:编写struts.xml配置文件.(从实例中提供参考). <package name=&qu ...
- Linux_cheat命令安装和使用
1.安装python yum -y install python 2.安装epel源.安装pip yum install epel-release -y yum install python ...
- mybatis实战教程(mybatis in action),mybatis入门到精通
转自:http://www.yihaomen.com/article/java/302.htm (读者注:其实这个应该叫做很基础的入门一下下,如果你看过hibernate了那这个就非常的简单) (再加 ...
- Yii2事务
今天写到发券,发现没加事务,于是学习了下 事务: 是指作为单个逻辑工作单元执行的一系列操作,要么完全地执行,要么完全地不执行. 事务处理可以确保除非事务性单元内的所有操作都成功完成,否则不会永久更新面 ...
- 递归O(NlgN)求解逆序数
导言 第一次了解到逆序数是在高等代数课程上.当时想计算一个数列的逆序数直觉就是用两重循环O(n^2)暴力求解.现在渐渐对归并算法有了一定的认识,因此决定自己用C++代码小试牛刀. 逆序数简介 由自然数 ...