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盒子的浮动) 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. ...
随机推荐
- POJ 1002 - 487-3279 STL
先把不是标准格式的字符串变成标准格式再输出出现两次以上的标准串和出现的次数不然输出 "No duplicates." #include <iostream> #incl ...
- C#检测串口被拔掉等一些触发事件合集
// //设备异常重载 // protected override void WndProc(ref Message m) { if (m.Msg == 0x0219) {//设备被拔出 if (m. ...
- Gulp:基于流的自动化构建工具
前言 先说说为什么会使用gulp. 当你沉醉于撸代码之时,是否想过正规的前端代码需要走哪些流程,复杂的不说了,有几点想必你也思考过,比如: 1.代码的压缩合并.图片压缩怎么搞: 2.代码校验,是否规范 ...
- post 报文请求接口方法
/// <summary> /// post 报文到接口服务器 /// </summary> /// <param name="targetUri"& ...
- Linux_Shell type
Recommendation is to use the bash shell, because he is strong enough, and absorbed the useful proper ...
- javascript中遍历EL表达式List集合中的值
http://www.cnblogs.com/limeiky/p/6002900.html
- BZOJ 1090 字符串折叠(区间DP)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1090 题意:字符串AAAAAAAAAABABABCCD的最短折叠为9(A)3(AB)CC ...
- LeetCode_String to Integer (atoi)
Implement atoi to convert a string to an integer. int atoi (const char * str); Convert string to int ...
- cygwin安装与使用
cygwin安装很简单,下载运行setup.exe程序,一步一步就可以了. 具体安装细节参考:http://www.33lc.com/article/7276.html 安装完成后有如下问题: 在cm ...
- Intel 凌动 D525 产品参数Intel 凌动 Z3735F 产品参数
https://item.taobao.com/item.htm?spm=a230r.1.14.8.kauehT&id=40450541158&ns=1&abbucket=19 ...