注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】CSS3 box-sizing属性  

2015-01-29 18:17:25|  分类: 移动端专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自艾某人《CSS3 box-sizing属性》
        布局的时候,经常碰见忽略padding值直接拉取参考线获取宽高的情况,这很令人头疼,一不注意设置了padding值原来的布局就被打乱了。移动端而言更是麻烦,百分比本就蕴含着很多不精确的因素,分别计算宽高和padding值的百分比很考验耐性。
        CSS3提供了box-sizing属性,可以很好的解决前面的问题。
        以下是结构代码,很简单的两个div对比。

<body>
<div class="wrap1">wrap1</div>
<div class="wrap2">wrap2</div>
</body>

        以下是样式代码,唯一不同的是wrap2设置了box-sizing。

<style>
.wrap1,.wrap2{
width: 200px;
height: 200px;
margin-bottom: 50px;
padding: 50px;
background: #000;
border: 4px solid #f00;

color: #fff;
}
.wrap2{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

</style>

        以下是效果图:
CSS3 box-sizing属性 - 艾某人 - 艾某人
        很明显,第二个div是标准的200*200,200里面包含了padding和border。
        但是需要提醒的是,这是一个CSS3属性,在兼容方面就需要考虑了,但是在大多数的手机端能够很好的支持,于是,还在头疼的孩子们,用起来吧!
  评论这张
 
阅读(70)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017