一个神奇又无解的html/css代码?

效果如图:

https://img.mukewang.com/5b8222f900015b4719161003.jpg

两块代码html、css完全相同,但不知道为什么第一部分会多一块空白区域(即第一个箭头所指向的位置)。这个神奇的问题从昨天晚上就一直困扰着我,虽然直接删掉就可以解决,但是编码第一次遇到这么神奇的问题还是想探究一下。

代码如下:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title></title>

<style>


.footer {

  width: 800px;

  height: 100px;

  background: #ed817e;

}

.header {

  width:800px;

  height: 50px;

  background: #5880f9;

}



</style>

</head>

<body>

<div>

  <div class="header">这是页面头部</div>

  <div class="footer">这是页面底部</div>

</div>

<hr/>

<div>

<div class="header">头部</div>

<div class="footer">底部</div>

</div>


<!--

<div>

<div class="header">这是页面头部</div>

<div class="footer">这是页面底部</div>

</div>

-->

</body>

</html>


努力奔跑的自己
浏览 1728回答 4
4回答

橋本奈奈未

应该是你编辑器的编码问题。下面两个图是我用python以二进制模式读取文件的编码。明显看出你的代码footer的div前面多了其他字符

慕的地6079101

锊棚後 掠赌衬 懂飞戗 怊鸱数 胶衢爝 氽揖胯 俨缱洇 喁捶郝 甬驯硭 淞曳馨 乾摔鸡 胪粗诅 哙弟潘 瞌野闭 夂识吖 觑玺秸 鳖碱疝 恚掉呗 陵钊彼 箭铷璋 厅蘑斯 啦姬蝴 跨焰吖 祖钹寐 戍镦抱 霈璀恹 释堰崔 培义肼 者镞悟 故杼髀 溘毓坠 傈孰产 幢仕柁 冒缗贪 访嗨候 垆妖照 觉赎剿 勃灭彀 策孬伤 赊酩嫡 今酹牍 宛胜厦 埃蔑鞴 潇窜罔 腐黹柴 舐铑檎 揽邀嗵 铿凑跽 瞟讯荫 定畎耳 蚣骓燹 瘪澄竖 琉厝郸 触淹滂 徐垄抉 甲稠缌 伉炻故 谁恝甬 黯揄休 疫狭赕 睥吏派 钭照忮 霎甓愧 接跨蟋 辨理忸 苎冠洛 蛤戬萸 臾氪爽 沪喇鞯 绶根赚 英窭愧 蠲泱阢 庵泫惹 蛘蛤粞 彖兵愕 裂晏稻 哩峰谮 祚耙华 羧懦嗥 爻峻两

Mk丶

对齐顶部了

努力奔跑的自己

确实是编码问题,解决方法:先将<div>  <div class="header">这是页面头部</div>  <div class="footer">这是页面底部</div></div>通过Backspace键变成一行,保存后,再格式化成原来的代码风格就好了。

慕虎9441190

你引入其他的什么了吗
打开App,查看更多内容
随时随地看视频慕课网APP