我在工作中遇到的web问题汇总-优快云博客

本文链接：https://blog.youkuaiyun.com/aVeCathleen/article/details/47191799

本文深入解析HTML与CSS布局中的外边距合并规则，包括块级元素、内联元素的特性，以及解决IE6中浮动元素与非浮动元素相邻出现3像素空隙的方法，并探讨了正斜杠在子文件夹链接中的应用及iframe框架的使用注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.
按照我们正常的理解，认为应该是两个值相加，其实这里是【两个合并后取最大值】。
用css手册中的话说：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心（）。【这段话不是很理解，看后面内容再补充】

tips：我一直都以为是两个块之间的margin是相加，经过调试，真的是两者取最大啊

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { margin:0; padding:0;}
#header { margin:5px auto; width:500px; height:80px; background:#9F9;}
#main { margin:5px auto; width:500px; height:400px; background:#9FF;}
#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}
</style>
</head>
<body>
<div id="header">此处显示  id "header" 的内容</div>
<div id="main">此处显示  id "main" 的内容</div>
<div id="footer">此处显示  id "footer" 的内容</div>
</body>

2.
块级元素诸如段落

<p>标题 <h1>,<h2>...
列表,<ul,ol,li> 表格<table>,
表单<form>DIV<div>和BODY<body>

等
【每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。】

内联元素则如: 表单元素
<input>、超级链接<a>、图像<img><span>

【可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。】

3.有名的IE6 3像素bug
当浮动元素与非浮动元素相邻时，两个div块中间会出现3px空隙。
解决方法：_margin-right:-3px【这个_ 只针对ie6】
【但它不能通过W3C验证。当两列固定宽度时，最好把#main也固定宽度且向右浮动，这样就可以避免IE6的3像素bug了。】

3、很多标签都有自己的默认样式，写一两个网页还可以慢慢改，但是整个项目写下来会很累。所以，一般在通用css里面加这些

body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }
ul { list-style: none; }
img { border-style: none; }

4.请始终将正斜杠添加到子文件夹。假如这样书写链接：href=”http://www.w3cschool.cc/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=”http://www.w3cschool.cc/html/”。

5.iframe框架和frame【以前对html不以为然，昨晚开始看了一下，觉得看到了很多我之前不知道的东西】

frameset放在头部，放在body中不可显示.
【将它放在</body>的底部，谷歌、火狐浏览器中不可以显示，只有放在<body>上方才可以】

http://www.cnblogs.com/yinluhui0229/archive/2011/04/27/2030822.html

这篇博客中我觉得需要着重注意的地方

<noframe />  //当一些浏览器并不支持frameset时用于提醒

iframe是内嵌，可以放在任何部位

6、有些浏览器会禁用JS脚本或浏览器不支持客户端脚本时，所以在写的时候我们也要注意到这一点

<body>

<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

<p>A browser without support for JavaScript will show the text inside the &amp;lt;noscript&amp;gt; element.</p>

</body>