CSS 设计彻底研究(四)盒子的浮动与定位
第四章 盒子的浮动与定位
本章的重点和难点是深刻地理解”浮动“和”定位“这两个重要的性质,对于复杂页面的排版至关重要。
4.1 盒子的浮动
在标准流中,一个块级元素在水平方向会自动伸张,直到包含它的元素的边界;而在竖直方向和兄弟元素依次排列,不能并排。使用“浮动”方式后,块级元素就可以并排了。
CSS中的float属性,默认为none。就是标准流通常的情况。 如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧。同时默认情况下,盒子的宽度不再伸张,而是根据盒子里面的内容的宽度来确定。
4.1.1 准备代码
对浮动的解决方法,用clear清除浮动
clear属性有 left、right、both。同时消除左右两边的影响。
对div设置浮动后,会导致父div没有高度,只有border和 padding 的值,因为浮动后就不在标准流中。 可使用以下几种方式解决:
· 在子div后增加一个<div style="clear:both"></div>
` 或者设置父div的高度。
4.2 盒子的定位
position属性可以设置为4个属性值之一:
1. static: 这是默认的属性值,也就是该盒子按照标准流(包括浮动方式)进行布局;
2. relative:称为相对定位,使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它。
3. absolute:绝对定位,盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这以为着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样。
4. fixed:称为固定定位,它和绝对定位类似,只是以浏览器窗口为基准进行定位,也就是当拖动浏览器窗口的滚动条时,依然保持对象位置不变。
4.2.1 static(静态定位)
static为默认值,表示块表示在原本应该在的位置上,即该值没有任何移动的效果。
4.2.2 relative(相对定位)
表示块相对没有偏移之前的位置移动的距离。
position:relative; left:30px; top:20px; 表示模块的左上边距与原来位置的距离。距离之前位置的左边界有30px,距离之前的上面边界20px,也就是向右移动30px,向下移动20px。
当子块使用相对定位发生偏移后,及时移动到了父盒子的外面,父盒子也不会变大,就像子盒子没有变化一样。
A. 使用相对定位的盒子,会相对于它原本的位置,通过偏移指定的距离,到达新的位置。
B. 使用相对定位的盒子仍在标准流中,它对父块和兄弟块都没有任何影响。
4.2.3 absolute(绝对定位)
A. 使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。
如:给子div 设置 position:absolute; top:10px; left:10px; 并且设定 父div position:relative. 那么就是子div以父div为基准进行偏移。相对父div的边界 距离上面10px,左边10px。 如果不设置父div的positon,则相对于浏览器的边界偏移。
B. 绝对定位的框从标准流中脱离,意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样。
* IE6中会出现错误,需给父div(定位的基准盒子)增加一条CSS样式。 height:1%;
3. 浏览器的Bug和Hack
对于存在于程序中的小错误,称为“Bug”。
Hack 是指一些说得清或者说不清的道理,但有很有效的解决办法。类似生活中的“偏方”。 因为有了很多Hack方法,来解决一些特定的Bug。
4. 绝对定位的特殊性质
如果设置了绝对定位,而没有设置偏移属性,那么它仍将保持在原来的位置。这个性质可以用于需要使某个元素脱离标准流,而仍然希望它保持在原来的位置的情况。
4.2.4 fixed(固定定位)
定位的基准是浏览器窗口或者其他显示设备的窗口。也就是当访问者拖动浏览器窗口滚动条时,固定定位的元素将保持相对于浏览器窗口不变的位置。
4.3 z-index 空间位置
z-index属性用于调整定位时重叠块的上下位置。
z-index属性的值为整数,可以是正数也可以使负数。当块被设置了position属性时,该值便可设置各块之间的重叠高低关系。默认的z-index值为0,当两个块的z-index值一样时,将保持原有的高低覆盖关系。
4.4 盒子的display属性
display属性值有:block, inline,none。 block 可使行内元素设置为块级元素如span添加block后同div一样。
CSS 设计彻底研究(四)盒子的浮动与定位的更多相关文章
- CSS设计指南之理解盒子模型
原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...
- CSS系列:CSS中盒子的浮动与定位
1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...
- CSS 设计彻底研究(三)深入理解盒子模型
第三章 深入理解盒子模型 盒子模型是CSS控制页面的基础.需要清楚“盒子”的含义是什么,以及盒子的组成.此外,应该理解DOM的基本概念,以及DOM树是如何与一个HTML文档对应的,在此基础上充分理解“ ...
- 前端开发—CSS 盒子、浮动、定位
盒子模型 margin padding border content margin: 用于控制元素与元素之间的距离:body自带 8 像素的margin 需要手动去除.(快递盒之 ...
- CSS 设计彻底研究(五)文字与图像
第五章 文字与图像 5.1.2 设置字体 通过font-family属性设置字体.可以声明多种字体,字体之间用逗号分隔开.如一些字体名称中间有空格,需用双引号将其引起来,使浏览器知道这是一种字体的名称 ...
- CSS 设计彻底研究(一)(X)HTML与CSS核心基础
第1章 (X)HTML与CSS核心基础 这一章重点介绍了4个方面的问题.先介绍了 HTML和XHTML的发展历程以及需要注意的问题,然后介绍了如何将CSS引入HTML,接着讲解了CSS的各种选择器,及 ...
- css整理-05 边框,背景和浮动,定位
边框 样式:border-style hidden, dotted, dashed, solid , double, groove, ridge, inset, outset 最不可预测的是doubl ...
- web前端学习笔记(CSS盒子的浮动)
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. CSS中有一个float属性 ...
- CSS盒子的浮动
web前端学习笔记(CSS盒子的浮动) 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. ...
随机推荐
- IIS 7 支持10万并发请求
原文链接:http://www.cnblogs.com/dudu/archive/2009/11/10/1600062.html 今天下午17点左右,博客园博客站点出现这样的错误信息: Error S ...
- ognl.NoSuchPropertyException(没有对应属性异常)
ognl.NoSuchPropertyException: com.xie.struts2.tags.modal.Student.sName(没有对应属性异常) at ognl.ObjectPrope ...
- 安装完Apache和PHP之后访问PHP文件页面提示下载而没有解析 解决办法
装好LAMP环境后,还要做下整合Apache与PHP相关配置,在apache配置文件里找到:AddType application/x-gzip .gz .tgz在该行下面添加AddType appl ...
- 开源日志系统 log4c 使用心得+总结
http://blog.csdn.net/sky_qing/article/details/7208645 一.安装: 我看网上好多人介绍log4c安装的时候都说有两个步骤:先下载expat安装包并安 ...
- CSS3----border-sizing
#wrapper input[type="text"], #wrapper input[type="password"] { /* display: flex; ...
- cf C. Alice and Bob
http://codeforces.com/contest/347/problem/C 这道题就是求出n个数的最大公约数,求出n个数的最大值,总共有max1/gcd-n个回合.然后判断如果回合数%2= ...
- Linux下编译第三方库的问题
因为各个Linux发行版之间的差异还是挺大的,有一些预安装在系统上的基本库是不一样的(不仅仅是版本,有一些是有和无的区别). 那么问题来了: 编译第三方库./configure的时候一般我们不会定制那 ...
- Spring使用小结2
之前做过不少spring想过知识点内容的摘录, Spring框架的特点.模块组成.优缺点 spring相关的bean管理想过知识点及依赖注入方式 今天说下近端时间中项目中遇到的相关印象比较深的知识点 ...
- Linux下串口编程入门
简介: Linux操作系统从一开始就对串行口提供了很好的支持,本文就Linux下的串行口通讯编程进行简单的介绍. 串口简介 串行口是计算机一种常用的接口,具有连接线少,通讯简单,得到广泛的使用.常用 ...
- 原生javascript添加引用js文件
function addScriptTag(src) { var script = document.createElement(&qu ...