- 浏览: 3291763 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 5672作者:zccst 一、静态时间轴,仅css即可 HTML结构 ... -
css3 webkit属性
2015-05-06 13:57 1428作者:zccst 见了很多web-kit打头的css属性,但 ... -
[css3特效]loading加载中
2015-03-25 15:53 3546作者:zccst 以前loading都是一张图片,显示或隐藏 ... -
CSS中的几种颜色表示法,如hsla
2015-03-15 17:47 1341作者:zccst 平常相对熟悉的也就RGB色了,其他基本不清 ... -
[css3]知识点积累
2015-03-14 22:28 1192作者:zccst animation , keyframe ... -
[css3]知识点(自己总结版)
2015-03-13 20:11 1353作者:zccst CSS3是一个包含多方面的知识,主要分两大 ... -
[css3]流式布局要点
2015-03-08 13:16 3321作者:zccst 让一个div水平、垂直居中 一、流 ... -
单行溢出和多行文本溢出
2015-03-05 18:54 6750作者:zccst 一、单行溢 ... -
table表格内容过多时自动换行css
2014-12-04 20:44 8133作者:zccst 总结了一下 ... -
div+css布局总结
2014-09-04 10:48 1396作者:zccst 3,position布局 #wrap ... -
print打印网页相关
2014-06-10 10:24 770作者:zccst 1,CSS <link hr ... -
CSS基础:text-overflow:ellipsis溢出文本
2014-01-15 17:12 37967作者:zccst 2015-06-19 今 ... -
纯CSS来画基本的矩形、圆形、椭圆、三角形、多边形等
2014-01-06 13:52 4585作者:zccst 2015-3-18 除了常规的三角形外,还 ... -
让table和table中的TD在指定区域滚动
2013-10-28 20:14 3843使用的属性如下: <div style="w ... -
div被撑大
2012-06-26 22:26 2118作者:zccst 情形二:外层div高度自适应,内部还有div ... -
常见CSS设置
2012-06-19 11:35 1104作者:zccst 1,图片与文字垂直对齐 办法一、设置块元素 ... -
自适应网页设计
2012-06-13 10:58 1102zccst转载 原地址:http:// ... -
CSS颜色代码
2012-05-17 17:02 1212作者:zccst 虽然CSS代码颜色有RGB组成,看似简单, ... -
CSS较好的网站推荐
2012-05-01 16:51 1121作者:zccst 在每一个领域都会诞生很多优秀的专业网站, ... -
background-position释义
2012-05-01 16:37 1250作者:zccst background-pos ...
相关推荐
有3个属性和布局以及box的创建有关:’display’, ‘position’ 和 ‘float’,彼此交互作用如下: 如果’display’值为’none’,则’position’ 和 ‘float’无作用。这种情况下,不生成box。 否则,如果’...
display 用来设置元素的显示方式 display : block | none | inline | inline-block inline:指定对象为内联元素 block:指定对象为块元素 inline-block:指定对象为内联块元素 none:隐藏对象 float 控制元素是否...
今天发现自己做的一个项目中有个图片切换的下面的按钮不是固定个数,程序那边根据循环实现放几个切换的按钮,但是按钮相对于整体的要居中,刚开始想着用display:inline-block;实现,但是ie6和ie7对块元素使用这个...
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;...
#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>...
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; } #...
如上网页效果用js很容易实现,但用纯css实现此动态功能,意在加深对hover和position定位的理解。与大家分享,欢迎指正。 可以看到,这种效果底层是a标签,hover状态中凭空弹出一个解释框,我们称为元素2。那么要想让...
其中,position 属性控制页面上元素间的位置关系, display 属性控制元素是堆叠、并排,还是根本不在页面上出现, float 属性提供控制的方式,以便把元素组成成多栏布局。 盒子属性分三组: 边框(border)。可以...
部分代码*{ margin:0px; padding:0px;... float:left; } #caidan ul{ display:none; } #caidan li{ position:relative; } #caidan ul ul{ position:absolute; top:0px; left:102px; } </style>
.box-163css{ position:absolute; left:0; top:220px; background:#f5f5f5; line-height:117px;} #box{ width:0; overflow:hidden; float:left;} .btn1{ display:block; border:none; cursor:pointer; float:left; ...
ccs和cc3的完整上课内容,可用于做上课课件。display,float,position。动画,过渡,2d等
top:3px}#shouji{margin-right:14px}#u{display:none}#c-tips-container{display:none}.bdsug{position:absolute;width:418px;background:#fff;display:none;border:1px solid #817f82}.bdsug li{width:402px;color:...
img{display:inline;float:left;position:absolute;} #chat{display:inline;float:left;position:absolute;font-weight:bold;font-size:16px;} h1{float:left} span{float:left;font-size:32px;font-weight:bold;...
.picul li a{ display:block;} .picul li img{width:100%; height:100%;} #dv_scroll{position:absolute;height:310px;overflow:hidden;width:570px; top:15px;} .Scroller-Container{width:100%;} #dv_scroll_bar{...
#nav li,#nav li a { float:left; display:block; width:117px; height:38px; background:#fff; } #nav li a { width:100%; text-indent:-9999px; background:url(images/mac.png) no-repeat 0 0; } #nav .n01 { ...
float: left; border-radius: 5%; overflow: hidden; position: relative; cursor: pointer; } .tile:nth-of-type(4n 1) { clear: left; } .tile:after { content: ''; display: ...
在布局的传统解决方案中,都是基于盒状模型,依赖display属性、position属性、float属性,这种方式比较传统,对于那些特殊布局来说非常不方便,比如,垂直居中就不容易实现。 尤其是现在移动设备如此多的今天,需要...