使用CSS3中的calc()属性来以算式表达尺寸数值

2020-04-28 07:17:30易采站长站整理

  background-color: yellow;   
  padding: 6px;   
  text-align: center;   
}  

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

CSS Code复制内容到剪贴板

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

XML/HTML Code复制内容到剪贴板

<form>  
  <div id="formbox">  
  <label>Type something:</label>  
  <input type="text">  
  </div>  
</form>