CSS三种定位机制
标准文档流
块级元素撑满整个页面div,ul,li,dl,dt,p
行级元素可以一行显示多个span,strong,img,input大部分
一般不设置盒子的高度,另其自动调整
margin属性的auto值适用于盒子相对于浏览器的自动居中
浮动
当元素没有设置宽度值,而设置了浮动属性,元素的宽度随着内容的变化而变化。
设置浮动的盒子会覆盖在正常的标准文档布局盒子之上。
元素设置浮动属性后,会对后面的元素产生影响(紧邻其后面的元素)。后面元素的文字不会被覆盖。文字总是想方设法地显示出来
若设置float=left,则该元素会在其父元素中左移,若紧接着的元素还设置float:left,则其紧挨着左边的元素,不覆盖它。
清除浮动元素对它后面元素的影响(设置对象是受到浮动影响的元素):
若受影响的元素是后面的元素:clear:both,left,right选一个。或者设置width:100%+overflow(充满,溢出):hidden
父级元素也会受到浮动元素的影响,也要清除浮动设置width:100%+overflow(充满,溢出):hidden 用这种方法清除浮动时不要再设置浮动元素的具体高度,因为如果内容超出,会被隐藏。
清除浮动:
绝对定位( absolute positioning)
实现横向多列布局及较为复杂的定位。
position的属性值:static(静态定位,仍处在标准文档流),relative(相对定位),absolute(绝对定位),fixed(固定定位)
relative:相对于自身原有位置进行偏移(用上下左右四个属性设置),仍处于标准文档流(如果空间不够,会撑开外面的盒子),随机拥有偏移属性和z-index属性
absolute:已包含块为基准的定位,完全脱离标准文档流(对兄弟元素不产生影响),随机拥有偏移属性和z-index属性
{
如果没有设置偏移量:
无论是否存在已定位祖先元素(设置了相对,绝对,固定定位的一种,一般设置为相对定位简单些),都保持在元素初始位置;脱离标准文档流;设置好的宽度失效,实际宽度随着内容的变化而变化
如果设置了偏移量:
如果没有已定位祖先元素:以<html>为偏移参照基准
如果有已定位祖先元素:以离它最近的祖先元素为参照基准。
}
使用absolute实现横向两列布局(用于一列固定宽度,另一列宽度自适应)
1.为其父元素设置relative相对定位,2.设置自适应宽度元素绝对定位。3.确保满足固定宽度元素的列高度>自适应元素宽度的列(设置absolute的元素脱离了标准文档流,无法撑开父元素) 此时再用margin属性设置间距指的是对父元素的间距。
1、盒子的浮动
* CSS 中有一个 float 属性,默认为 none,即标准流。通过设置 float 属性的值为 left 或 right,元素会向其父元素的左侧或右侧靠近,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度来确定。
* clear 属性:作用是为了消失由于使用 float 后,浮动的盒子对其他盒子的影响。clear 的值有 left、right 和 both,分别表示消除左边的影响、消除右边的影响和消除左右两边的影响。
ps:
* 通过使用 CSS 布局,可以实现在 HTML 不做任何改动的情况下,调换盒子的显示位置。实际应用中,确定内容的逻辑位置,可以把内容最重要的放在前面,次要的放在后面,再通过 CSS 来确定内容的显示位置。
* 对 clear 属性的设置要放到设置 float 后面的盒子中,才能有效消除影响。
2、盒子的定位
* 广义的“定位”:泛指一个网页排版中的定位操作,使用任何 CSS 规则来实现。
* 狭义的“定位”:通过设置 CSS 中的属性 position 来进行定位。
* position 的取值包括:
(1)static:默认的属性值,按照标准流(包括浮动方式)进行布局。
(2)relative:称为相对定位,使用相对的盒子的位置常以标准量的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离。
相对定位仍在标准流中,它对父块和兄弟块盒子没有任何影响。
(3)absolute:绝对定位,盒子的位置以它的包含框为基准进行偏移。
绝对定位从标准流中脱离,并且以它的“最近”的一个“已经定位”的“祖先元素”为基准进行定位。没有已经定位的祖先元素,则以浏览器窗口为基准进行定位。
(4)fixed:固定定位,与绝对定位类似,以浏览器窗口为基准进行定位,拖动浏览器窗口的滚动条时,位置保持不变。
ps:
* 当 position 属性设置为 relative、absolute 和 fixed 时,通过设置 left、right、top 和 bottom 来指定偏移量。这 4 个属性除了可以设置绝对的像素数外还可以设置百分数。
* “已经定位”元素的含义是:position 属性被设置,并且不是 static。
* 绝对定位的特殊性质:如何设置了绝对定位,而没有设置偏移属性,那它将保持原来的位置。可用于需要使某个元素脱离标准流,而需要保持在原来位置的情况。
3、z-index 空间位置
* z-index 属性用于调整定位时重叠块的上下位置。默认值为 0,可以设置为正数或负数,当两个块的 z-index 值相同时,保持原来的高低覆盖关系。
4、盒子的 display 属性
* 可以通过设置 display 属性来确定盒子的类型。inline 表示行内元素,block 表示块级元素,none 表示无用于隐藏元素。
CSS三种定位机制的更多相关文章
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
- Oracle数据库的三种验证机制
关于超级管理员登陆不需要密码因为: 数据库的三种验证机制: 操作系统验证(具有sysdba和sysopera的用户) 密码文件验证(具有sysdba和sysopera的用户) 数据库验证(普通用户) ...
- CSS三种写法的优先级
在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...
- CSS三种样式
CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...
- gtest 三种事件机制
前言: 1.首先说明gtest中事件的结构层次: 测试程序:一个测试程序只有一个main函数,也可以说是一个可执行程序是一个测试程序.该级别的事件机制会在程序的开始和结束执行. 测试套件:代表一个测试 ...
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- 前端 CSS 三种引入方式
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
- Oracle基础学习2--Oracle登录与三种验证机制
首先,Oracle安装完毕有三个默认用户 Ø Sys:数据库对象的拥有者.权限最高.password在安装的时候(口令管理)能够改变 Ø System:数据库管理员,password为manage ...
- 006 CSS三种引入方式
CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
随机推荐
- Poj(3615),Floyd,最大值中的最小值
题目链接:http://poj.org/problem?id=3615 题意:大致题意:有N个木桩,和M个木桩对之间的高度差(从x跳到y需要往上跳的高度).从x跳跃到y的路径消耗的体力值是路径中的一个 ...
- 某些输入文件使用或覆盖了已过时的 API
android出现注: 某些输入文件使用或覆盖了已过时的 API. 注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译. 注: 某些输入文件使用了未经检查或不安全的操作. 注 ...
- 2016年10月24日 星期一 --出埃及记 Exodus 19:8
2016年10月24日 星期一 --出埃及记 Exodus 19:8 The people all responded together, "We will do everything th ...
- fffffffffff
create proc partPage114 @n int,--每页数量 @page int, --页码从0开始 @Mainkey int as declare @sql nvarchar(1000 ...
- PowerDesigner导出Excel
1.打开PowerDesigner,创建物理模型(Physical Data Model) 2.在PowerDesigner菜单栏中,依次点击“Tools ->Excute Commands-& ...
- __declspec关键字详细用法
__declspec关键字详细用法 __declspec用于指定所给定类型的实例的与Microsoft相关的存储方式.其它的有关存储方式的修饰符如static与extern等是C和C++语言的ANSI ...
- Quartz:ERROR threw an unhandled Exception
详细的错误信息如下: -- ::] ERROR org.quartz.core.JobRunShell: - Job group1.job1 threw an unhandled Exception: ...
- [CF738B]Spotlights(前缀和,模拟)
题目链接:http://codeforces.com/contest/738/problem/B 题意:问多少个0的方向,使得方向上至少有一个1. 四个方向统计一遍前缀和,向上向左正着记,向下向右倒着 ...
- FPM的远程利用
看了lijiejie的博客,和乌云的PHPFastCGI的这篇文章,感觉在实际的业务中经常能遇到,所以在此记录下来: 原文:http://www.lijiejie.com/fastcgi-read-f ...
- Spring AOP和AspectJ支持
学了Spring之后发现我都不知道java为何物-- 在这一章中有好几节,讲的切面编程 第一节:在项目中启用Spring的AspectJ注解支持 第二节:用AspectJ注解声明aspect 第三节: ...