- 浏览: 3315695 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
对‘display’,‘position’和‘float’之间关系的定义
英文原文:http://dbaron.org/css/test/sec0907
影响框的生成和布局的三个属性——'display','position'和'float'——间的相互关系如下:
1,如果'display'设置为'none',用户端必须忽略掉'position'和'float'。在这种情况下,元素不产生框。
2,否则,'position'设置为'absolute'或'fixed','display'设置为'block'且'float'设置为'none'。框的位置将由'top','right','bottom'和'left'属性和该框的包含块确定。
3,否则,如果'float'的值不是'none','display'设置为'block'并且该框浮动。
4,否则,应用指定的其它'display'属性。
即如果'position'设置为'absolute'或'fixed'且‘float’的值不为‘none’,display的值就会被设置为‘block’,所以设置display: inline; float: left;等同于float:left,display:inline 的属性并未生效。因为用户端会忽略掉对’display‘的设置。float:left和display:inline-block当然是不等同的。
position:absolute和float会隐式的改变display类型,
不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让元素以display:inline-block的方式显示,可以设置长宽,默认宽度并不占满父元素,就算是显示的设置display:inline或display:block,仍然无效。
float在IE6下的双倍边距bug就是利用添加display:inline来解决的
注意一点的是,position:relative并不能够隐式的改变display的类型
The three properties display, float, and position interact in certain ways.
If an element’s display property is set to none, no box is generated. In this case, float and position are ignored.
If an element’s position property is set to absolute or fixed, it’s absolutely positioned. In this case, float is ignored (the computed value is none).
For absolutely positioned elements, floated elements (elements whose float property is set to left or right), and the root element, the computed value for display is set according to Table 1.
Otherwise, the computed value for display is the same as the specified value.
对‘display’,‘position’和‘float’之间关系的定义
英文原文:http://dbaron.org/css/test/sec0907
影响框的生成和布局的三个属性——'display','position'和'float'——间的相互关系如下:
1,如果'display'设置为'none',用户端必须忽略掉'position'和'float'。在这种情况下,元素不产生框。
2,否则,'position'设置为'absolute'或'fixed','display'设置为'block'且'float'设置为'none'。框的位置将由'top','right','bottom'和'left'属性和该框的包含块确定。
3,否则,如果'float'的值不是'none','display'设置为'block'并且该框浮动。
4,否则,应用指定的其它'display'属性。
即如果'position'设置为'absolute'或'fixed'且‘float’的值不为‘none’,display的值就会被设置为‘block’,所以设置display: inline; float: left;等同于float:left,display:inline 的属性并未生效。因为用户端会忽略掉对’display‘的设置。float:left和display:inline-block当然是不等同的。
position:absolute和float会隐式的改变display类型,
不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让元素以display:inline-block的方式显示,可以设置长宽,默认宽度并不占满父元素,就算是显示的设置display:inline或display:block,仍然无效。
float在IE6下的双倍边距bug就是利用添加display:inline来解决的
注意一点的是,position:relative并不能够隐式的改变display的类型
The three properties display, float, and position interact in certain ways.
If an element’s display property is set to none, no box is generated. In this case, float and position are ignored.
If an element’s position property is set to absolute or fixed, it’s absolutely positioned. In this case, float is ignored (the computed value is none).
For absolutely positioned elements, floated elements (elements whose float property is set to left or right), and the root element, the computed value for display is set according to Table 1.
Otherwise, the computed value for display is the same as the specified value.
发表评论
-
静态时间轴和动态时间轴实现原理
2015-07-12 17:24 5720作者:zccst 一、静态时间轴,仅css即可 HTML结构 ... -
css3 webkit属性
2015-05-06 13:57 1512作者:zccst 见了很多web-kit打头的css属性,但 ... -
[css3特效]loading加载中
2015-03-25 15:53 3585作者:zccst 以前loading都是一张图片,显示或隐藏 ... -
CSS中的几种颜色表示法,如hsla
2015-03-15 17:47 1377作者:zccst 平常相对熟悉的也就RGB色了,其他基本不清 ... -
[css3]知识点积累
2015-03-14 22:28 1242作者:zccst animation , keyframe ... -
[css3]知识点(自己总结版)
2015-03-13 20:11 1403作者:zccst CSS3是一个包含多方面的知识,主要分两大 ... -
[css3]流式布局要点
2015-03-08 13:16 3356作者:zccst 让一个div水平、垂直居中 一、流 ... -
单行溢出和多行文本溢出
2015-03-05 18:54 6795作者:zccst 一、单行溢 ... -
table表格内容过多时自动换行css
2014-12-04 20:44 8225作者:zccst 总结了一下 ... -
div+css布局总结
2014-09-04 10:48 1422作者:zccst 3,position布局 #wrap ... -
print打印网页相关
2014-06-10 10:24 810作者:zccst 1,CSS <link hr ... -
CSS基础:text-overflow:ellipsis溢出文本
2014-01-15 17:12 38046作者:zccst 2015-06-19 今 ... -
纯CSS来画基本的矩形、圆形、椭圆、三角形、多边形等
2014-01-06 13:52 4648作者:zccst 2015-3-18 除了常规的三角形外,还 ... -
让table和table中的TD在指定区域滚动
2013-10-28 20:14 3901使用的属性如下: <div style="w ... -
div被撑大
2012-06-26 22:26 2157作者:zccst 情形二:外层div高度自适应,内部还有div ... -
常见CSS设置
2012-06-19 11:35 1150作者:zccst 1,图片与文字垂直对齐 办法一、设置块元素 ... -
自适应网页设计
2012-06-13 10:58 1140zccst转载 原地址:http:// ... -
CSS颜色代码
2012-05-17 17:02 1250作者:zccst 虽然CSS代码颜色有RGB组成,看似简单, ... -
CSS较好的网站推荐
2012-05-01 16:51 1167作者:zccst 在每一个领域都会诞生很多优秀的专业网站, ... -
background-position释义
2012-05-01 16:37 1287作者:zccst background-pos ...
相关推荐
" Float与Position属性" ...Float 和 Position 属性是 CSS 中两个非常重要的概念,它们可以帮助开发者建立复杂的布局,实现多年的梦想。但是,使用这些属性需要非常小心,因为它们可以对布局产生非常大的影响。
有3个属性和布局以及box的创建有关:’display’, ‘position’ 和 ‘float’,彼此交互作用如下: 如果’display’值为’none’,则’position’ 和 ‘float’无作用。这种情况下,不生成box。 否则,如果’...
display 用来设置元素的显示方式 display : block | none | inline | inline-block inline:指定对象为内联元素 block:指定对象为块元素 inline-block:指定对象为内联块元素 none:隐藏对象 float 控制元素是否...
总结来说,通过巧妙地结合`float`和`position:relative`,我们能够有效地解决IE6和IE7浏览器中元素居中对齐的问题,而无需使用可能导致兼容性问题的`display:inline-block`。这种方法虽然在某些情况下可能需要额外的...
本文将深入探讨两种主要的定位方式:float浮动和position定位。 一、float浮动 1. **文档流**:在HTML中,元素默认按照文档流进行排列,即从左至右,从上至下。**脱离文档流**意味着元素不再遵循常规布局,而是...
- 使用`display`属性时需要注意与`position`、`float`等其他CSS属性的配合使用。 - 在处理响应式设计时,根据屏幕尺寸动态调整元素的`display`值是一种常见的做法。 - 测试不同浏览器下的表现非常重要,因为某些旧版...
float:left;} .bg span{display:block;width:25px;height:25px;background:url(images/tu.gif) no-repeat left bottom;position:absolute;left:20px;bottom:20px;} .bg p{display:none;width:226px;height:226px;...
这里,`display:none`用于初始时隐藏提示框,`position:fixed`确保它始终相对于浏览器窗口定位,`bottom:20px`和`right:20px`设置其在页面右下角的位置。 接下来,引入jQuery库。如果项目中尚未包含,可以在头部...
本文将详细介绍其中的关键布局元素,包括position、float、display、clear和overflow等属性,以及CSS的基础知识和定位机制。 一、CSS基础知识:定位position和浮动float 1. 定位position:position属性允许我们...
标题中的“IE又一个让人吐血的BUG: 关于 table的position 和 select”指的是在Internet Explorer(IE)浏览器中,开发者遇到的一个与HTML表格(table)的定位(position)属性和下拉选择框(select)相关的bug。...
网页效果的实现往往依赖于CSS(Cascading Style Sheets)中的属性设置,其中`display`属性是控制元素...在实际开发中,应结合其他CSS属性和技巧,如浮动(float)、定位(position)等,共同构建出理想的网页视觉效果。
#rbbox{position:absolute;right:0;bottom:0;width:300px;height:0px;overflow:hidden} .button{display:inline;float:right;font-size:12px;cursor:pointer} </style> <body><div id="rbbox">()">关闭</a>...
在给定的例子中,我们可以看到一个使用`position`和负偏移量来模拟`float:center`的方法。下面我们将详细解释这个方法: ```css #macji { position: relative; width: 100%; height: 80px; background-color: #...
而当元素使用了position: absolute或fixed时,display的计算值会受到float和position属性的影响,可能会变为block或table等其他值。此外,旧版的Internet Explorer浏览器(如IE6和IE7)在处理display属性时存在限制...
float:left; width:100%; background:#F4F7FB; font-size:93%; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #...
在CSS3中,我们不仅可以使用`float`属性,还可以利用其他布局技术来实现类似的效果,比如`flexbox`(弹性盒模型)和`grid`(网格布局)。这些新的布局模式提供了更强大的控制力,可以更容易地创建复杂的布局结构,...
另一种方法是为`<ul>`和`<li>`都设置`position: relative`属性。然后,我们可以利用负的`left`或`right`属性来调整元素的位置,使其居中。例如: ```css ul { position: relative; left: 50%; } li { float: ...