您的足迹:首页 > 网页源码 >CSS百分比加减固定的像素该如何实现?

CSS百分比加减固定的像素该如何实现?

css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了,今天修改自己的博客模板时发现了一个问题,之前一直都是用自己的笔记本电脑来查看自己的博客,博客刚好显示的可以,但是一旦换了分辨率高的显示屏,网站就显得很不搭配了,要是css能够百分比加减固定像素就能解决问题了,于是百度相关,经过测试,终于解决了CSS百分比加减固定的像素的问题。


CSS百分比加减固定的像素该如何实现?


代码如下:

然后随着手机的流行,web app和hybrid app的开发,都用到了css3技术,在css3中,新增了许多单位,rem、vw和vh、vmin和vmax、ch和ex等等。

css3的calc()

浏览器支持IE9+、FF4.0+、Chrome19+、Safari6+
calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:

.haorooms {
  width: calc(expression);
}
这样padding和margin和百分比一起用,问题就可以解决了。

例如,我们margin是20px。那么我们就可以写成
.haorooms{
  width: calc(100% - 20px);  //注:减号前后要有空格,否则很可能不生效!!
}
也可以这么用:

.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
     width: 90%;/*写给不支持calc()的浏览器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}

本文作者:王商   文章标题:CSS百分比加减固定的像素该如何实现?
本文地址:http://ws234.com/post-322.html     本文已被百度收录!
版权说明:若无注明,本文皆为“王商博客”原创,转载请保留文章出处。

相关推荐

发表评论

路人甲 表情

看不清楚?点图切换

网友评论(2)

兄弟,交换链接吗?
host1plus优惠码 10个月前 (2016-05-21) 回复
@host1plus优惠码:友链已满,暂时不换了!!
王商 10个月前 (2016-05-21) 回复