当前位置: 代码迷 >> Web前端 >> display:blocK 以致的换行
  详细解决方案

display:blocK 以致的换行

热度:589   发布时间:2012-10-24 14:15:58.0
display:blocK 导致的换行
#divHeader #divNav #divLogo{margin-right:5px; width:205px; height:72px; float:left;position:relative;}

#divHeader #divNav #divLogo a:link, a:visited,a:hover,a:active{
width:200px;
height:67px;
text-decoration:none;
display:inline;
float:left;
position:relative;
border:#f00 0px solid;
}

大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。
visibility属性用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,visible表示显示, hidden表示隐藏。当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。

表格

明白表格相关的表现属性值最好的方法想象html表格。table是最初的表现,你可以使用table-row模拟table-cell模拟td。

display属性更进一步,可以通过使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。现在可以直接使用 columns构建表格,比在html中使用行构建快速。

最后,inline-table设定表格前后不换行。

使用CSS表格会严重损害可用性。HTML应该用来传递语意,所以如果你有表格数据,那可以使用HTML表格。使用CSS表格仅仅会产生糟糕的数据如果没有CSS数据将不可读。

display:none和visibility:hidden;的不同在于display:none完全取消元素的显示,visibility: hidden保持元素位置但视觉上的内容不可见。例如,如果3的第二段设置为display:none,第一段将仅跟在第三段,如果设置为 visibility:hidden,段落间就会空出。

inline与bolck的区别在于
display: inline; 在同一行
display:block; 前后换行

在DW中文版中翻译为“定位”,常用的属性有relative(相对)与 absolute(绝对)。

有很多朋友对这条指令的 用法还是不清楚,这里做一定细致的讲解:position:relative; 表示相对定位,被定位了这个属性的标签在所属的范围内可以进行上下左右的移,这里的移动与padding或是margin所产生的位置变化是不一样的。 padding与margin是元素本身的一种边距与填充距离并不是真正的移动,而被定义为relative的元素是真正的移动,这所产生的移动距离是从 margin的外围到父级标签内侧之间这一段。

position:absolute; 表示绝对定位,如果定义了这个属性的元素,其位置将依据浏览器左上角的0点开始计算,并且是浮动正常元素之上的。那么当你需要某个元素定位在浏览器内容区的某个地方就可以用到这个属性。

那么有个问题产生了,现在大家做的网页大部分是居中的,那么我需要这个元素跟着网页中的某个元素位置不论分辨率是多少他的位置始终是针对页内的某个元素的,那么单纯的absolute是不行的。

正确的解决方法就是在元素的父级元素定义为position:relative;(更正:这里可以是祖父级,也可以是position: absolute;,多谢谢old9的提出)需要绝对定位的元素设为position:absolute;这样再设定top,right,bottom, left的值就可以了,这样其定位的参照标准就是父级的左上角padding的左上侧

?

  相关解决方案