`
huibin
  • 浏览: 756932 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

display:blocK 导致的换行

    博客分类:
  • CSS
阅读更多
#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的左上侧

 

分享到:
评论

相关推荐

    span掉落的演示代码

    而`div`元素则是块级元素(`display:block`),每个都会占据一整行,前后元素之间会自动换行。 当我们设置`display:block-inline`或者`display:inline-block`(注意,实际的CSS属性是`inline-block`,而不是`block-...

    display:inline-block的实际应用

    3. **内联限制**:尽管 `display:inline-block` 元素可以包含块级元素,但它们仍然不能包含常规的内联内容,如文本,除非使用 `white-space:nowrap` 阻止换行。 在实际应用中,`display:inline-block` 常用于创建...

    CSS属性display:inline-block用法深入理解

    首先,`display:inline-block`的作用是将元素呈现为内联对象,这意味着它们会与其他内联元素排列在同一行中,不会强制换行。同时,`inline-block`元素的内容会按照块级元素的方式处理,允许设置宽高、内外边距等。...

    struts2的checkboxlist标签换行

    可以添加自定义CSS类到`<s:checkboxlist>`标签,然后在CSS文件中设置`display`属性为`inline-block`或`block`,并利用`white-space: pre-line`或者` `标签来控制换行。例如: ```html <s:checkboxlist list=...

    display:inline-block的原理分析

    例如,旧版本的 Firefox 使用 `-moz-inline-box` 来模拟 `display:inline-block` 的效果,但这可能导致一些问题,如 `text-align` 属性的不正常行为,可能需要借助 `-moz-box-align` 解决。因此,通常建议避免使用...

    display:inline-block的使用示例

    在给定的示例中,我们看到如何使用`display:inline-block`来解决浮动元素导致的换行问题。 在传统的多列布局中,我们通常使用`float:left`来实现元素并排显示。然而,这种方法存在一个问题,即如果父容器的宽度小于...

    inline-block 前世今生1

    这是因为元素默认遵循文本的换行规则,导致元素之间存在与字体相关的间距。解决这个问题的方法包括使用负margin、设置父元素的font-size为0,或者使用float属性。 此外,理解line-height、float以及vertical-align...

    css之display属性之inline-block布局实现详解

    - **间隙问题**:在`inline-block`元素之间有时会出现4像素的间隙,这是由于换行产生的空白字符导致的。 - **去除空隙的方法**: - 对父元素设置`font-size: 0`,这样空白字符的大小也会变为0,消除间隙。 - ...

    多个div能不换行吗?

    1. **使用 `display: inline-block`**:将每个 `div` 的 CSS 类设置为 `display: inline-block`,这将使 `div` 元素变为类似文本的元素,可以在同一行内排列,但仍然保留块级元素的特性,如设置宽高。例如: ```css...

    float元素浮动后高度不一致导致错位的解决办方法

    当N个元素浮动后,会导致错位的问题。一般给元素一个固定的height就没有这个现象。 但是当高度不一致时,就需要想别的办法来解决了: 1、给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display...

    css display inline block 兼容性问题写法

    然而,当涉及到IE6和IE7这两种较早的浏览器版本时,会发现它们不支持display: inline-block属性,从而导致布局上的兼容性问题。 在IE6和IE7浏览器中,尽管使用display: inline-block无法正常工作,但是可以通过设置...

    Google Chrome浏览器无法显示hover样式的解决方法

    这个问题在标题和描述中提到,是由于在a:hover状态下设置了display:block导致的。 首先,我们需要理解`:hover`伪类的工作原理。`:hover`是CSS中的一个伪类选择器,用于定义元素在鼠标指针悬停时的样式。通常,它会...

    CSS教程:inline-block在各浏览器的显示

    在众多的display值中,`inline-block`是一个特别有用的值,它结合了`inline`元素的水平排列特性与`block`元素的独立换行特性。然而,`inline-block`在不同浏览器中的表现并不完全一致,这给开发者带来了挑战。本文将...

    项目笔记项目笔项目笔记记

    - **定义**:`display:inline-block` 是一个CSS属性值,允许元素像内联元素一样显示(不会换行),同时拥有块级元素的特性,即可以设置宽度、高度等。 - **兼容性**:IE6 及以上版本浏览器支持 `display:inline-...

    div嵌套的div溢出时换行

    通过设置`display: flex`和`flex-wrap: wrap`,可以让子元素在空间不足时自动换行: ```css .parent-div { display: flex; flex-wrap: wrap; } ``` 5. **使用`grid`布局**: CSS网格布局(Grid)提供了更...

    E7 float:right 时元素换行出现在下一行的bug解决方法

    这样,即使它被浮动,它也会首先出现在行的右侧,而不是导致后续元素换行。修改后的代码如下: ```html <li class="a"></li> <li></li> ``` 2. **使用`clearfix`类**:对于包含浮动元素的容器,可以添加一个`...

    CSS兼容性大全.pdf

    `或者`display: block;`来调整元素的显示方式,避免间隔的出现。 4. **最小宽度(min-width)问题**: IE浏览器不支持`min-width`,但它会把`width`作为最小宽度处理。为了兼容,可以使用HTML条件注释或者JavaScript...

    DIVCSS各网页兼容技巧大全.pdf

    `display:block`和`display:inline`可以互相转换元素的行为。 6. **IE与CSS宽度和高度问题**:IE不识别`min-width`和`min-height`,但它会将`width`和`height`当作最小值。解决方法是使用条件注释或`expression`,...

    关于label和span设置width无效问题解决方法

    如果在这些元素后面紧跟着其他内容导致换行,可能需要使用`float: left;`来确保元素在一行内显示,并使用`clear: both;`来清除浮动效果。 在一些设计中,可能需要标签元素浮动,例如: ```css span { display: ...

Global site tag (gtag.js) - Google Analytics