Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

CSS 绝对单位与相对单位的混合计算

  现代浏览器支持calc,它可以将相对单位和绝对单位的数据做计算。这样我们就可以有calc(100% + 20px)这种写法。但是calc这东西目前并不普及,如果只是对宽度做一个百分比加固定像素的话,其实可以不用calc,包裹一层元素使用负margin也能实现。
  先看下面代码: <style>
.content {background:#CCF;opacity:0.8;}
.container {border:1px solid red;width:100px;}

.content1 {width:calc(100% + 20px);}

.wrapper2 {margin-right:-20px;}
.content2 {width:100%;}
</style>
<div class="container">
  <div class="content content1">
    test
  </div>
</div>
<hr/>
<div class="container">
  <div class="wrapper2">
    <div class="content content2">
      test
    </div>
  </div>
</div>
  这段代码中有使用calc和不使用calc的两种解决方式。不使用calc的方式中,.wrapper2的宽度是自适应的,它总是会填满一行。正常情况下,一行的宽度就是外层的100%,但由于它有负margin,在计算自己盒子宽度时会减掉这个值。所以它的盒子宽度就变成了100%-margin 。这样我们就达到了目的,实现了相对单位和绝对单位的运算。
  也许有人觉得,搞这么麻烦干嘛?直接在content-box中使用100%+padding不就得了?其实padding只会增加元素占用的宽度,无法增加元素内容空间的宽度,所以这是不同的概念。
  那么问题来了,这玩意儿有啥用呢?下面我们就来实现一个自适应的元素等宽等高布局,而且还带边框和投影。
<!DOCTYPE html>
<style>
body {overflow-x:hidden;}
.wrapper {margin:-12px;}
table {
  table-layout:fixed;
  border-spacing:12px;
  width:100%;
}
td {
  width:50%;
  padding:6px;
  vertical-align:top;
  border:1px solid #E0E0E0;
  background:-webkit-linear-gradient(top,#F6F6F6,#F2F2F2);
  background:-moz-linear-gradient(top,#F6F6F6,#F2F2F2);
  background:linear-gradient(top,#F6F6F6,#F2F2F2);
  box-shadow:0px 0px 10px #CCC;
}
</style>
<div class="container">
  <div class="wrapper">
    <table><tr>
      <td>a<br/>b<br/>c</td>
      <td>ddddddddddd</td>
    </tr></table>
  </div>
</div>
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^