css3 calc()自适应布局

我们想要实现页面自适应布局时,通常因为margin的存在,而比较麻烦;有时候想要实现宽度自适应的输入框时,也因为padding或margin的存在,而相当繁琐,同时由于浏览器兼容性而导致最终效果不一致。css3新添加属性box-sizing,在一定程度上解决了上面的问题,而在今天的文章中我们来通过css3新增加的另外一个属性calc()来实现适应布局。

calc()是css3新添加属性,它可以让你使用一个算术表达式来表达长度值,这意味着可以用它来定义div的宽度,并设置margin、padding、border等。

calc()的运算规则

  • 使用”+”、”-”、”*”、”/”四则运算;
  • 可以使用百分比、px、em、rem等单位;
  • 可以混合使用各种单位进行计算。

实例1:定位在页面上的块元素,含有外边距

.banner {
  position:absolute;
  left: 40px;
  width: -moz-calc(100% - 80px);
  width: -webkit-calc(100% - 80px);
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}

实例2:自动调整大小的表单,又适应容器

input {
  padding: 2px;
  display: block;
  width: -moz-calc(100% - 1em);
  width: -webkit-calc(100% - 1em);
  width: calc(100% - 1em);
}  

#formbox {
  width: -moz-calc(100%/6);
  width: -webkit-calc(100%/6);
  width: calc(100%/6);
  border: 1px solid black;
  padding: 4px;
}
<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>

浏览器兼容性

  • firefox 4.0+已经开支支持calc()功能,需要使用-moz-calc()私有属性;
  • chrome从19 dev版,开始支持私有的-webkit-calc()写法;
  • IE9支持原生写法,calc();
  • Opera貌似还不支持~~

马上分享给你的朋友吧~

css3 calc()自适应布局》上有 3 条评论

  1. Pingback 引用通告: CSS3 width: calc() | The WordPress by NoNo

  2. 厦门最好的花场ktv是www.nyjzktv.com
    厦门最好的夜场首选www.nyjzktv.com
    厦门最好的夜总会是www.nyjzktv.com
    厦门夜场招聘首选www.nyjzktv.com

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>