`

div上下层间隔问题

阅读更多

代码1

 

<html>
<head>
<title>div上下层间隔问题</title>
<style type="text/css">
*{ margin:0; padding:0;}
#main{width:120px; height:120px; background:gray;}
#d1{width:100px; height:50px; background:yellow;}
#d3{width:100px; height:50px; background:red;}
</style>
</head>
<body>
<div id="main">
<div id="d1"></div>
<div id="d3"></div>
</div>
</body>
</html>

 

显示效果为

 



 

代码2

 

<html>
<head>
<title>div上下层间隔问题</title>
<style type="text/css">
*{ margin:0; padding:0;}
#main{width:120px; height:120px; background:gray;}
#d1{width:100px; height:50px; background:yellow;}
#d3{width:100px; height:50px; background:red;}
</style>
</head>
<body>
<div id="main">
  <div id="d1"></div>
  <div id="d3"></div>
</div>
</body>
</html>

 

显示效果为



 

 

代码2只是在div前面加了两个空格,显示效果就完全不一样了,出现了间隔,还一直找原因,所以也要小心空格

 

  • 大小: 2.2 KB
  • 大小: 2.9 KB
分享到:
评论

相关推荐

    CSS盒子模式(DIV布局快速入门)

    边界可以设置上下左右四个方向的值,确保元素间适当间隔。 理解CSS盒子模式的关键在于意识到所有网页元素都可视为这种四部分构成的盒子,且每个部分都可以独立调整。通过设置不同的填充、边框和边界,可以精确地...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    3.jQuery弹出层插件PopupDiv-v1.0下载(支持ajax、居中等效果) 4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一...

    100多个JQuery效果示例(实例)div+css+javascrpit

    44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. ...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...

    javascript实现文字图片上下滚动的具体实例

    在JavaScript编程中,实现文字和图片的上下滚动效果是一个常见的需求,尤其是在网页设计中,这种效果常被用于新闻滚动条、公告栏和轮播图等。本文将介绍如何使用JavaScript来实现一个简单文字图片上下滚动的实例。 ...

    js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数

    要实现拖动轨迹的回放,可以遍历`aPos`数组,按照时间间隔依次设置`div`的位置。这通常需要额外的定时器和时间管理逻辑,本示例未提供这部分代码,但可以作为进一步的扩展。 此外,为了显示拖动距离,我们在`...

    CSS盒子模型详解.pdf

    它的作用是为元素添加空白区域,可以设置不同的数值来影响元素的位置和相邻元素之间的间隔。外边距相关属性包括margin-top、margin-right、margin-bottom、margin-left。当只指定一个值时,该值会应用于上下左右四个...

    2019前端经典面试题.docx

    一个200*200的div在不同分辨率屏幕上下左右居中,可以使用CSS的绝对定位配合伪类`:after`和`zoom`,以及负边距来实现。设置`position: absolute`,然后`top: 50%`,`left: 50%`,同时使用负边距`margin-top: -100px`...

    制作滚动字幕,很方便!

    - 这里展示了嵌套 `&lt;marquee&gt;` 的用法,内层 `&lt;marquee&gt;` 用于控制文本的颜色和大小。 - `direction="left"` 和 `direction="up"` 分别表示左右和上下滚动。 - `scrolldelay` 设置了不同的滚动间隔,以实现不同的...

    JS滚动字幕

    滚动字幕的基本原理是通过不断改变`&lt;div&gt;`元素的`scrollTop`属性,使内部内容看起来像是在上下滚动。为了实现流畅且无限循环的效果,通常会将内容复制多份,以确保当到达底部时能够无缝衔接至顶部继续滚动。 #### ...

    jquery 动态示例

    44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...

    jQuery sudoSlider插件

    2. **多方向滑动**:不仅支持常见的左右滑动,还支持上下滑动,甚至可以实现多层嵌套的滑动效果,增加页面的动态感。 3. **动画效果**:提供多种过渡动画,如淡入淡出、滑动、缩放等,使内容切换更加平滑自然。 4....

    js实现图片漂浮效果的方法

    5. 浏览器兼容性:在实现动态效果时,需要考虑到不同浏览器之间的兼容性问题。例如,在不同浏览器中,DOM对象的属性可能有所不同,或者CSS样式支持的情况可能不同。 6. 性能优化:在实现动态效果时,应考虑到页面的...

    javascript实现的在当前窗口中漂浮框的代码

    `MyObjectFloatPhotos` 接收图片的 id、标题、URL 和源,而 `MyObjectFloatPosition` 接收对象的位置参数(xon、yon、xPos、yPos)以及关联的 div 元素和循环间隔。 变量 `step` 控制漂浮框移动的步长,`delay` ...

    五种切换效果的jQuery幻灯片.zip

    在幻灯片中,通常会使用`&lt;div&gt;`标签来创建每个幻灯片的容器,`&lt;img&gt;`标签加载图片,以及其他辅助标签如`&lt;nav&gt;`来创建导航按钮。 CSS(层叠样式表)则负责幻灯片的样式设计,包括布局、颜色、字体、边距等。为了实现...

    css中padding、margin两个重要属性的详细介绍及举例说明

    `,确保内容区与容器边缘有一定的距离,并且与其他元素保持一定的间隔。 通过这个示例,我们可以清楚地看到`margin`与`padding`在实际应用中的效果差异。 #### 七、总结 通过本文的详细介绍,相信读者已经对CSS中...

    js产品图片无缝滚动代码向左和向上图片无缝滚动代码

    使用`setInterval`函数创建一个定时器,每隔一定时间改变最上层图片的`z-index`,使其下沉到第二层,同时将最后一张图片的`z-index`提升到最上层,模拟滚动效果。如果向上滚动,需要调整`top`属性。 ```...

    超实用的jQuery代码段

    3.7 激活整个div层的单击事件 3.8 鼠标单击实现div的选取 3.9 模拟鼠标单击事件 3.10 设定时间间隔的方法 3.11 设定时间延迟的方法 3.12 延时显示子菜单的方法 3.13 通过事件获取页面加载时间 3.14 如何为动态添加的...

    struts2标签解释

    `&lt;s:generator&gt;`常与`s:iterator`一起使用,生成指定间隔的序列。 `s:iterator`用于遍历集合,是Struts2中非常重要的标签,可以遍历数组、列表等集合类型的数据。 H. `&lt;s:head&gt;`,`&lt;s:hidden&gt;`: `&lt;s:head&gt;`标签...

Global site tag (gtag.js) - Google Analytics