关于margin与padding设置百分比的问题
来源:互联网 发布:陆逊 知乎 编辑:程序博客网 时间:2024/06/10 15:50
margin 与 padding 设置为百分比
之前一直认为 margin-top
和 margin-bottom
设置百分比以父容器的高度计算,而 margin-left
和 margin-right
设置百分比以父容器的宽度计算,直到今天群里一个群友问
boostrap 中的栅格系统是如何设置 margin-top 百分比以宽度计算的?
原因是他发现设置的 margin: 10% 10%;
中 top 和 bottom 值是以父容器的宽度计算得到的结果。
经过一番测试及网上查找,才发现:原来 margin-top
和 margin-bottom
并不是以父容器的高度计算百分比的,而是同样以父容器宽度来计算,同样的 padding
内边距也是一样。
如按照以下样式设置
.father { width: 200px; height: 100px; border: 1px solid #000; } .son { width: 80%; height: 50%; margin: 10% 10%; background-color: #ff0000; }
<div class="father"> <div class="son"></div></div>
得到的结果是:
不过也不是绝对这样,如果设置了 writing-mode
为纵向书写,比如 -webkit-writing-mode: vertical-lr;
此时按百分比书写的margin就会参照容器的高度来计算了。
在上例中的 father
中添加 -webkit-writing-mode: vertical-lr;
.father { width: 200px; height: 100px; border: 1px solid #000; -webkit-writing-mode: vertical-lr; }
得到的结果就是:
以上内容查找来自于:
cxxsn的博文:margin-top百分比问题
感谢!
阅读全文
0 0
- 关于margin与padding设置百分比的问题
- 元素marign与padding的百分比设置
- 关于margin与padding
- margin/padding-top/bottom 的百分比
- css margin,padding 百分比
- CSS 百分比 margin & padding
- CSS 百分比 margin & padding
- margin 设置百分比的参考系
- css height width padding margin 百分比取值的基准问题
- 对table,td设置padding,margin的问题
- Android 动态设置padding跟margin的问题
- css margin padding之百分比
- margin与 padding的区别
- margin 与 padding的区别
- padding与margin的区别
- margin与padding的区别
- padding与margin的区别
- Margin与Padding的区别
- JavaScript的程序设计思维与选择结构
- 欢迎使用CSDN-markdown编辑器
- linux下jdk版本切换
- 程序设计思维
- HDU5769后缀数组,高度数组模板
- 关于margin与padding设置百分比的问题
- 下拉刷新——Android使用SwipeRefreshLayout简单实现下拉刷新与加载跟多
- opencv 高斯滤波
- Hadoop-入门-01
- JavaScript学习小结(2)
- console.log()用法
- 贪心算法-nyoj-91-阶乘之和
- 嵌入式系统学习——S3C2451之RTC时钟
- 启动tomcat,提示: Several ports (8005, 8080, 8009) required by Tomcat v8.0 Server at local