记录一些见过的比较出我意料的东西。不定时更新内容。
布局时，将header、main、footer三个部分都设置长度为100%后，再对main和footer设置padding时出现多余空白，见下图：
页面代码：
<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两栏式布局</title>
<style type="text/css">
body{margin:0;padding:0; font:18px/1.5 "Microsoft Yahei"; color:#222222;}
.header{width:100%; height:80px; background-color: #dedede;}
.footer{ width:100%;padding:15px; background-color: #dedede;color:#999999;font-size: 14px;text-align: center;}
.main{width:100%;min-height: 300px; padding: 40px 5%;}
</style>
</head>
<body>
<div class="header"></div>
<div class="main"></div>
<div class="footer">created by C爷. @20160810 22:35</div>
</body>
</html></span>效果：
当将width：100%去掉时，就正常了：
由此猜测问题出在padding上，此时反映过来，所有元素都加box-sizing:border-box时这个问题就不存在了。
之所以会认为这是一个问题，是因为浏览器计算元素宽度的方法与我预想的不一样，chrome默认计算宽度的方法：元素设置的宽度+padding+borderWidth(content-box)，而我想的是元素设置的宽度（含padding）+borderWidth，即width:100%;是包含padding值的，因而与预想冲突成为问题。（20160810 22:56:53）
181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
