主机格调

CSS布局中外边距margin和内边距padding应该是经常用到的属性,不过值除了正数和负数,百分比也是个很有用的。下面就简单介绍margin、padding百分比的情况和使用场景。

首选提一个简单的问题,外层灰色div宽1000px,高500px,里面的黑色div,margin:10%,请问黑色div的margin值是多少?

大部分人包括我,都会以为里面div会继承外层div的宽高,然后乘以百分比,结果应该是margin左右为100px,margin上下为50px。但实际情况却不是这样的,不信你看→DEMO←上面

不仅如此,同样一个宽1000px,高500px的div,里面的div设置padding:10%,请问里面div的padding值是多少?

答案跟刚刚是一样,你想当然的以为padding左右为100px,padding上下为50px也是错的。不信你看→DEMO←下面

所以正确的算法应该是margin、padding的百分比值参照其包含块的宽度进行计算。具体解释见doyoe此文

实际应用

之前写过一个篇文章《模块、图片、背景图片、视频等响应式(宽高等比缩放)布局》,利用padding的百分比来做自适应,我在移动端网页里做自适应时,屡试不爽,非常好用。

另一个很好用的场景,是自适应布局处理边距时,要让上下边距也自适应,用margin、padding的百分比就对了。见→DEMO←,或者扫一扫下面二维码:

上面DEMO里,用iPhone 4作为示例,宽度为320px,上下左右边距为10px,那么就需要用10/320=3.125%为边距百分比。如果手机变成iPhone 6,屏幕变宽,上下左右边距也会随之变大,实现自适应。需要注意的是,用padding的时候,记得改变盒子模型,加box-sizing:border-box。因为块级元素div宽度默认100%,如果不改变盒子模型,实际宽度会变成320+10+10,就撑开页面了。

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/520.html