理解浮动和position定位(转)
前言
为了更好理解浮动和position,建议先看看我写的这篇文章《Html文档流和文档对象模型DOM理解》
正文
一、浮动
CSS设计float属性的主要目的,是为了实现文本绕排图片的效果。然而,这个属性居然也成了创建多栏布局最简单的方式。
如何浮动一个元素?先设定其宽度width,再增加样式规则float:left/right。
//注意:该浮动元素已从正常文档流中删除。浮动元素是被块级元素忽略的元素,但是内联元素知道它们在哪里,内联元素会留意浮动元素的边界,而块元素会正常流向页面。
提到浮动,就得提清除浮动clear。如下图:
因为块级元素不知道左侧浮动元素的存在(浮动元素不在文档流中),所以块级元素会铺满整个区域。可以用元素的CSS clear属性来提出请求:当元素流入页面时,在这个元素的左边、右边或两边不允许有浮动内容。
添加样式clear:left; 这样,块级元素就会在浮动元素的下面了。
想了解更多浮动的知识,请看例子。《围住浮动元素的三种方法》
二、position
position属性有4个值:static、relative、absolute、fixed。
(一)static
HTML元素的默认值,即没有定位,元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。
(二)relative
相对的是元素原来在文档流中的位置(或者默认位置)。相对定位会让元素正常地流入页面,不过在页面上显示之前要进行偏移。
//注意:这个元素原来占据的空间保留着,其他元素没改变位置。相对定位元素经常被用来作为绝对定位元素的容器块。
(三)absolute
绝对定位会把元素从文档流中删除,块元素和内联元素都不知道它的存在,绝对定位的元素的定位上下文是最近的已定位父元素,其默认的定位上下文<body>元素。
//绝对定位元素的任何祖先元素都可以成为它的定位上下文,只要把相应祖先元素的position设定为relative/fixed即可。
(四)fixed
固定定位会把元素从文档流中删除,块元素和内联元素都不知道它的存在,其定位上下文是视窗口。
ps:relative、absolute、fixed有z-index属性。
理解浮动和position定位(转)的更多相关文章
- 理解浮动和position定位
前言 为了更好理解浮动和position,建议先看看我写的这篇文章<Html文档流和文档对象模型DOM理解> 正文 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效 ...
- 浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- (转)浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- 元素重叠及position定位的z-index顺序
元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...
- 归纳篇(一)CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
- CSS| position定位和float浮动
对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...
- CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
分组和嵌套 分组选择器 ——————> 嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...
- position定位
CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结 ...
- 解决IE6下浮动层固定定位的经典方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- MySql索引原理分析
面试 问:数据库中最常见的慢查询优化方式是什么? 同学A:加索引. 问:为什么加索引能优化慢查询?同学A:...不知道同学B:因为索引其实就是一种优化查询的数据结构,比如Mysql中的索引是用B+树实 ...
- JS - 对话框
1,<span onclick="return confirmAct();">执行操作</span> 2, function confirmAct(){ i ...
- laravel.url
通过php artisan route:list 可以看到当前应用的路由情况, 在前端页面中如果要修改一个实体,需要用到实体.update,涉及的uri为实体/{实体},所用的http方法为put. ...
- systemctl无法停掉keepalived
这个问题搞了好半天,记录一下,启停都是用的systemctl 起初是测试vip漂移时候发现,主备节点都开启keepalived的状况下,一切正常,主节点的vip也可以访问. 第一次停掉主节点的keep ...
- 043-PHP简单获得一个类对应的反射信息
<?php // 简单获得一个类对应的反射信息 class demo{ CONST CON_STR = '123456'; public $str_1; private $str_2; prot ...
- Block循环引用问题(Objective-c)
造成循环引用的简单理解是:Block的拥有者在Block作用域内部又引用了自己,因此导致了Block的拥有者永远无法释放内存,就出现了循环引用的内存泄漏 示例代码 @interface ObjTest ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- 08 SSM整合案例(企业权限管理系统):08.权限控制
04.AdminLTE的基本介绍 05.SSM整合案例的基本介绍 06.产品操作 07.订单操作 08.权限控制 09.用户操作 10.权限关联与控制 11.AOP日志 08.权限控制 SSM权限操作 ...
- no_string_attached笔记
下载附件以后,在终端中查看 第一次调试时发现权限不够 接着,返回文件夹,修改该目标权限 然后进行调试 使用info reg 查看寄存器的值 发现eflags寄存器为0x282,然后x/282 $ea ...
- java 学生信息管理
题目: 一.测试要求: 1.按照测试内容要求完成程序的设计与编程: 2.将最终结果的源文件(.java)文件上传到以班级为单位,保存源程序. 3.建立学号姓名文件夹,如: ...