宽度计算
当给元素赋予样式时,可能涉及border,会导致整体宽度大于页面宽度。
优先的办法是修改宽度计算方式,使盒子的宽度取值为 content + padding + border,而不仅是之前的content——所以当增加内边距或边界的宽度时,不会使盒子更宽——而是会使内容调整得更窄。
* {
box-sizing: border-box;
}
清除页脚浮动
浮动的元素存在于正常的文档布局流之外,在某些方面的行为相当奇怪,比如不能通过margin-top调整页脚的顶距
footer {/*无效的方法*/
clear: both;
margin-top: 4%;
}
这里可以尝试引入新元素解决这个问题
<div class="clearfix"></div>
footer{
}
.clearfix{
clear: both;
}
再通过,给内容添加新的约束(给列块新增column类),来去除新元素的样式
.column,footer {
padding: 1%;
border: 2px solid black;
background-color: yellow;
}
footer{
margin-top: 4%
}
.clearfix{
clear: both;
}
背景高度一致
明显可以看出,由于内容多少不一致,导致每一列背景高度不同。虽然可以通过设置固定值来处理,但是显然不是很合适。可以将这些列的背景颜色设置为父元素的背景颜色,这样就不会看到高度是不同的。这是目前最好的选择。