#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的左上侧
分享到:
相关推荐
比较常用于<a><span>这两个标签——因为这两个标签非块元素,如果不用display:block定义一下,那么定义width、height等和长宽相关的css属性时会发现完全不生效。 通常情况下div里就没有必要写display:block;特殊...
table中tr的display:block显示布局错乱问题
是块元素,那在布局时候,在div的元素里面写display:block有用吗? 回答:对所有的块元素都没有意义,块元素的dispaly属性默认值为block,没必要再显式定义——除非你之前对块元素的display属性重新定义过。 =====...
对于某一单元行需要显示时,使用CSS display:block属性,不需要显示时使用display:none属性,在IE浏览器中显示正常,没有任何问题,但是当用Firefox浏览时却出现了布局错乱的问题,这是为什么呢? 本文向大家介绍...
NULL 博文链接:https://hc24.iteye.com/blog/832493
本文向大家描述一下CSS属性display:inline-block的用法,在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性;可以将对象呈递为内联对象,但是对象的内容作为块对象呈递,旁边的内联对象会被呈递在...
博文 “display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法 里的示例代码
js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 代码如下:function ...}但是如果这个元素是隐藏(display:none)的,尺寸又是未知自适应的,哪有上面的方法就不行了!因为display:none的元素是没有物理
设置display:none后不能通过设置display:“”显示得要用block或者inline。
NULL 博文链接:https://qiyan86-163-com.iteye.com/blog/551754
display: flex弹性布局
<div> DIV1 </div> <div> DIV2 ...和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了 <span
visiblity:hidden和display:none属性之间的差异
还有一种方法就是设置li为display:inline;这样可以达到同样的效果,但是问题是inline元素的特性:默认无法设置宽度,高度,以及上下margin,(关于padding,情况有点特殊,在ie6,7中 inline元素是无法设置上下...
display:inline-block感觉与display:table-cell有些相似,例如对内部元素的包裹性。但是,由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与...