css margin padding之百分比
2017-07-04 17:12
393 查看
总所周知,margin和padding上可能的值可以是auto、px、em、rem等,当然,也可以是%。
当值为auto时,margin和padding边距依赖于浏览器。
当值为px、em、rem时,是一个固定的值,由浏览器进行计算,相对比较容易理解。
这其中最有意思的值是%,margin、padding设置百分比的值时,参照的都是父元素的宽度,而非left、right参照宽度,top、bottom参照高度。
代码如下所示:
浏览器计算的长度如图所示:
如果您有任何疑问或本文侵犯了您的著作权,请联系我。 mail to kylin
当值为auto时,margin和padding边距依赖于浏览器。
当值为px、em、rem时,是一个固定的值,由浏览器进行计算,相对比较容易理解。
这其中最有意思的值是%,margin、padding设置百分比的值时,参照的都是父元素的宽度,而非left、right参照宽度,top、bottom参照高度。
代码如下所示:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css margin padding 之百分比</title> <style type="text/css"> #wrapper { width: 200px; height: 100px; } #inner { width: 240px; height: 90px; margin-top: 50%; margin-bottom: 50%; padding-top: 50%; padding-bottom: 50%; } </style> </head> <body> <div id="wrapper"> <img id="inner" src="http://www.csdn.net/css/logo.png"/> </div> </body> </html>
浏览器计算的长度如图所示:
如果您有任何疑问或本文侵犯了您的著作权,请联系我。 mail to kylin
相关文章推荐
- CSS 百分比 margin & padding
- CSS 百分比 margin & padding
- css padding-top padding-bottom margin-top margin-bottom采用百分比时参照对象
- 【CSS黑科技2】CSS百分比实现高度占位自适应(margin/padding)
- css margin,padding 百分比
- CSS笔记——padding,margin为百分比计算时的参照对象
- CSS 百分比 margin & padding
- css padding和margin的百分比
- HTML CSS——margin与padding的初学
- CSS中的margin border padding(转)
- css 父元素设置padding、border、margin的情况下,子元素width100%呈现情况
- CSS中的margin与padding属性
- css的margin、padding和布局定位
- css margin:0; padding:0;
- margin-padding-css
- CSS布局中的几个重要属性,width,height,margin,padding,float,position
- CSS中margin和padding的区别
- 从零开始学_JavaScript_系列(六)——CSS的padding、margin、border属性超详细解释(图文)
- 知方可补不足~CSS中margin,padding,border-style有几种书写规范
- CSS中padding、margin两个重要属性的详细介绍及举例说明