网页设计中很多的地方都有用到了层(div),相对与table来讲运用层即可以调高页面的加载效率也可以使界面看起来更简介。但是对于层的了解不够的话,特别是牵涉到浏览器的兼容性的问题,由于有些浏览器对与层里面的属性有了一些新的规定,使得不同的浏览器中看到的效果都不同,这就是常说的bug,虽然都有的解决,但是对于刚接触网页设计的人来说,这可能就是一个盲点,不会考虑到那么多。
我今天要说的只是其中的一点,关于div的高度有没有必要进行设置。在设计网页时如果说的页面要在不同的分辨率下进行居中,如果不设置div的高度或宽度,都将使浏览器无法确定该层应该距离左边多少距离,距离右边又该是多少呢,所以宽度是一定要进行设置的。那么对于高度呢,或许你觉得是没有必要的,我们试想一下如果一个只有宽度没有高度的层,或者只有高度没有宽度的层会是一个什么样的情况呢,如果你的层设的有border的话就可以看出效果来的,就是一条线而已。那么你在层里面所写的内容是否包含在了其中呢,如果你改变了父层的属性,子层是否会受到影响呢?
在做项目中我遇到了一个问题就是在不同的分辨率下对于一个没有高度的父层,如果想要其居中显示不是什么难事,难的是在不同的分辨率下它的位置总会发生那么一点小小的变化,给人的感觉是在跳动,这是我不愿看到的也是,我的老大所不愿看到的,由于对浏览器兼容性方面只是的匮乏,我是绞尽脑汁,苦思冥想的想去找出是什么原因造成的呢。开始的时候我以为是图片的问题,因为当我改变了某写图片的大小之后就不会出现“跳动”了,但是换到别的分辨率下就有开始了,这令我很是不解,我的同事说是我的代码出问题了,我不相信,因为代码怎么可能出问题呢。最后也不知怎么的可能是误打误撞吧,就发现原来是父层的高度没有设置,当我把父层的高度设置之后一切的问题都迎刃而解了。终于可以松一口气了,因为问题解决了。
分享到:
相关推荐
IE6 有一个默认的最小字体高度,即使你没有设置任何内联或外部样式表中的 `font-size`,这个最小高度也会影响到 `div` 的实际高度。这是因为 IE6 会将 `div` 视为文本容器,而默认的字体大小会影响到 `div` 的高度...
标题"最小高度能自适应高度IE.FF全兼容的div设置.rar"和描述"最小高度能自适应高度IE.FF全兼容的div设置"所指向的知识点,主要涉及到CSS(层叠样式表)中的最小高度(min-height)属性以及如何实现跨浏览器的兼容性...
在探讨“ie6,ie7div高度兼容代码”的过程中,我们深入分析了如何在Internet Explorer 6(简称IE6)和Internet Explorer 7(简称IE7)这两种浏览器中实现div元素高度的一致性和兼容性。这是一项对于前端开发者来说至...
然而,在不同的浏览器中,特别是老版本的Internet Explorer(IE6、IE7和IE8),`div` 的高度设置为 `auto` 时,可能会引发一些兼容性问题,其中最常见的是背景颜色或背景图片无法正确显示。这个问题主要源于这些旧版...
- `div`本身没有默认样式,所以在使用`div`进行布局时,需要通过CSS来设置宽高、内边距、外边距等样式属性,以便调整其外观和位置。 2. **语义化**: - 虽然`div`非常实用,但过度使用可能导致页面语义不清。尽...
此外,如果多个div存在于不同的区域,可能需要额外的逻辑来判断div是否可以跨区域移动,并在必要时阻止或调整拖放行为。 这个项目可能包含以下关键文件: 1. HTML文件:包含定义了`div`元素的结构,每个`div`可能有...
`div` 作为网页布局的基本构建块,常通过 `CSS` 设置样式属性,如宽度、高度、颜色、位置等,来实现灵活的页面设计。这个教程对于想要学习web前端开发的人来说尤其有价值,因为理解并熟练运用 `div` 和 `CSS` 是网页...
有时候,当`DIV`内的内容超过了其容器的显示范围时,滚动条就显得尤为重要,它可以帮助用户浏览那些不可见的部分。本篇文章将深入探讨如何通过 JavaScript(特别是结合 jQuery 库)来实现`DIV`动态显示滚动条的功能...
通过设置 `div` 的宽度、高度、边距和填充,可以实现各种复杂的网页布局。 `CSS`(Cascading Style Sheets)是负责网页样式和布局的语言。它允许我们控制网页的外观,包括字体、颜色、间距、布局和响应式设计。CSS ...
标签"div网页模板"进一步明确了这个资源的核心——它是基于`div`布局的,这意味着模板可能包含了一系列预先定义的CSS类,用于控制`div`的样式,如边距、填充、宽度、高度、背景色等。这将极大地简化网页设计工作,让...
它本身没有特定的样式,但通过CSS(Cascading Style Sheets)可以对div进行样式定义,如颜色、大小、位置等。CSS允许我们将样式分离出来,使设计更加灵活,便于维护和响应式布局。 在"表格布局"中,表格元素(、、...
通过设置`display`属性,<div>可以变为块级元素或行内元素。 2. **流体布局**:使用百分比单位配合CSS的`max-width`和`min-width`属性,可以使布局随浏览器窗口大小变化而自适应。 3. **Flexbox布局**:CSS3的弹性...
8. **浮动与清除**:在早期的Div+CSS布局中,浮动(float)常用于创建多列布局,但可能导致父元素高度塌陷的问题。因此,理解和使用clear属性来清除浮动是必要的。 9. **响应式设计**:随着移动设备的普及,响应式...
例如,设置body的字体、边距和背景色,以及各个DIV的宽度、自动居中、高度和背景色。 CSS代码中的一些关键点包括: 1. 注释:良好的注释习惯有助于提高代码的可读性。 2. CSS属性缩写:如`font:12px Tahoma;`表示...
最后,设置必要的参数,如`type`(弹出层类型,如0为信息,1为提示,2为确认,3为询问,4为加载)和`content`(弹出层内容)。 2. 简单Div弹窗: 与Layer相比,使用Div创建弹窗是一种更基础、更自定义的方法。这种...
这样,当需要在页面中多次使用弹出框时,只需简单调用这个类或函数,并传入必要的参数(如弹出框内容、位置等)即可。 综上所述,"div+javascript的弹出框"是网页开发中一种常见且实用的技术,它结合了HTML布局、...
通过CSS,我们可以为Div设置宽度、高度、边距和内边距,以实现各种布局效果。在仿制土豆网首页时,我们将使用多个Div元素来划分各个部分,如导航栏、轮播图、内容区域等。 三、CSS+Div布局技巧 1. 定位...
### DIV+CSS解决各浏览器兼容问题 在网页设计与开发领域,DIV+CSS布局方法是构建网站时常用的技术之一。然而,不同的浏览器由于其内核差异及版本更新速度不一,常常导致同样的代码在不同浏览器下呈现的效果各异,...