CSS定位与浮动
定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪。
一切皆为框!行内元素和块级元素都是框,通过display可以改变框本来的类型
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
1、定位 position
(1)static元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
(2)absolute元素框偏移某个距离。http://www.w3cfuns.com/thread-258-1-1.html
无父级:参照浏览器左上角
有父级:父级无position,参照浏览器左上角
父级有position,参照父级左上角
(3)relative元素框从文档流完全删除,并相对于其包含块定位。
无父级:参照自身原来在文档流中位置的左上角
有父级:父级无position,参照自身原来在文档流中位置的左上角
父级有position:有padding,参照padding
无padding,参照自身原来在文档流中位置的左上角
(4)fixed元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
始终不动
2、浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
http://www.w3school.com.cn/css/css_positioning_floating.asp
3、清除浮动
clear:both;
清除影响(对下一个元素的影响)
CSS定位与浮动的更多相关文章
- CSS:CSS定位和浮动
CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...
- css定位和浮动
1.css中一切元素皆为框.div.p.h1等为块框:span.strong等为行内框,(在文本中每一行会被自动默认为行框,行框和行内框是不一样的概念).通过display可以改变框的类型,行内框通过 ...
- css定位之浮动定位
浮动定位可以是原本垂直排列的块级元素,变成水平排列 1浮动元素 float:left 或者float:right 这些浮动会直接碰到父容器的边界为止. 2设置了浮动的元素,元素会脱离标准文档流中,但 ...
- CSS定位——浮动定位
CSS定位机制Ⅱ——浮动定位 float属性:进行浮动定位 left,right clear属性:清除浮动 left,right,both ㈠ float属性 1.概述 ⑴div实现横向多 ...
- CSS 定位
一.CSS 定位和浮动 它们代替了多年来的表格布局. 定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置. 浮动在 CSS1 中被首次提出.浮动不完全是定位, ...
- 【CSS】 CSS 定位
css 定位和浮动 *******本章大量内容copy自w3school********* 定位对于html界面还是很重要的,因为定位会直接影响到用户的视图.对于css而言,定位也比较灵活. 浮动是一 ...
- CSS 定位 (Positioning) 实例
CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...
- CSS 定位 (Positioning)
CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...
- CSS定位(Positioning)
CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 一切皆为框 div.h1 或 ...
随机推荐
- C++ 常用的字符串处理函数实现
以下是一些标准库没有实现的函数,我觉得很方便就写了,估计会不定时更新. //根据一个文件的路径获取文件名 std::string file_name(const std::string& pa ...
- JavaScript AMD 模块加载器原理与实现
关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者 ...
- .net Web.Config配置文件 转
.net Web.Config配置文件 博客分类: .net .net Web.Config配置文件 一.配置信息 <?xml version="1.0" encodin ...
- Eclipse无法设置NDK路径的解决方法
如果在Eclipse中设置NDK路径的时候遇到下面的情况(尼玛,我的NDK设置呢?): 可以参考百度经验解决:http://jingyan.baidu.com/article/4d58d5413000 ...
- c宏的MAX函数
今天从香山上面回来累的跟傻逼一样,回来问了一下胡总的阿里面试的问题.然后其中有一个是宏写max函数.胡总说不好写,然后我就去洗澡了. 洗澡的时候感觉不对啊,回来写了一个: #define MAX(a, ...
- oracle连接进程数设置
SQL> select count(*) from v$session #连接数SQL> Select count(*) from v$session where status='ACTI ...
- JMeter学习资料
JMeter User Manual: http://jmeter.apache.org/usermanual/index.html JMeter Componet reference: http:/ ...
- iOS开发之自定义输入框(利用UITextField及UITextView)
drawRect的工作原理:首先苹果是不推荐我们直接使用drawRect进行工作的,直接调用他也是没有任何效果的.苹果要求我们调用UIView类中的setNeedsDisplay方法,则程序会自动调用 ...
- MaterialEditText
https://github.com/rengwuxian/MaterialEditText http://www.rengwuxian.com/post/materialedittext
- sql为了实现转换的行列
全名 学科 成绩 牛芬 语文 81 牛芬 数学 88 牛芬 英语 84 张三 语文 90 张三 数学 98 张三 英语 90 (表一) 现有一个表如(表一) 姓名 语文 数学 英语 牛芬 81 88 ...