万有引力织梦模板网专注dedecms织梦HTML5响应式模板制作,助力中小企业及为中小企业服务的团队及个人。
登录   |    免费注册   |   

CSS百分比加减固定的像素的方法

  • 时间:2020-10-11 21:26:22 作者: admin 阅读:53

CSS指的是层叠样式表,CSS的单位大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了,最近在修改网站模板时发现了一个问题,之前一直都是用自己的笔记本电脑来查看自己的博客,博客刚好显示的可以,但是一旦换了分辨率高的显示屏,网站就显得很不搭配了,要是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);
}





微信二维码