西门的后花园

一个热爱网络的年轻人的博客

margin、padding百分比简介,以及在移动端网页的实际应用

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,就撑开页面了。

评论列表

  1. 这里没有看明白图片如何自适应,我要仔细琢磨一下,因为我自己的主题的图片还未能自适应呢。

  2. 前排,学习了,感谢分享。
    这个必须支持啊~

  3. 其实是和文档方向有关,如果是竖向的就是高度啦,虽然默认的都是横向的。。

  4. 来自ECHENG,看看就闪人。

  5. 以前刚学编程的时候看到各种漂亮的网页就想往前端发展,但是后来发现CSS好多坑,然后就转后端了XD

发表评论

分类目录