码迷,mamicode.com
首页 > Web开发 > 详细

CSS中的百分比(%)如何使用???

时间:2018-07-20 15:17:54      阅读:289      评论:0      收藏:0      [点我收藏+]

标签:bsp   number   宽度   垂直   div   padding   如何   如何使用   盒模型   

除了height以外垂直方向上的margin-top(bottom)或者padding-top(bottom)的百分比取值都是相对于父元素的宽度

默认的content-box盒模型下元素的width就是指的content的宽度

.box {
  width: 200px;
  height: 400px;
padding: 50px; border: 1px solid #000; } .child { width: 100px; height: 50%; padding-bottom: 50%; border: 1px solid #000; }
 
当然这是border-box盒模型,width的百分比计算:
height = 父height*50% = (400px*50%) = 200px
padding-bottom = (父width200px - 父padding50px*2) *50%= 50px
因为这个是border-box盒模型,所以计算时要加上padding宽度的;
 
如果我们的盒子模型是content-box盒模型,就如下计算公式:
padding-bottom = (父width200px)*50% = 100px
 

 

CSS中的百分比(%)如何使用???

标签:bsp   number   宽度   垂直   div   padding   如何   如何使用   盒模型   

原文地址:https://www.cnblogs.com/feixiablog/p/9341423.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!