万人网络 网络学院 网站运营 网络策划 网络推广 SEO 网络策划 网站优化 微商

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

    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);}


 

 

标签:
分类:SEO基础| 发布:admin| 查看: | 发表时间:2017-2-11
原创文章如转载,请注明:转载自http://www.yinese.com/seo/
本文链接:http://www.yinese.com/seo/post/seo-682.html

相关文章

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。