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,就撑开页面了。
这里没有看明白图片如何自适应,我要仔细琢磨一下,因为我自己的主题的图片还未能自适应呢。
前排,学习了,感谢分享。
这个必须支持啊~
其实是和文档方向有关,如果是竖向的就是高度啦,虽然默认的都是横向的。。
来自ECHENG,看看就闪人。
以前刚学编程的时候看到各种漂亮的网页就想往前端发展,但是后来发现CSS好多坑,然后就转后端了XD