原码笔记

原码笔记

CSS3 calc()会计算属性详解

小诸哥 0

这篇文章主要介绍了CSS3 calc()会计算属性详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前言

正如其名,calc是css3中新增的计算属性,让很多属性增加了一个表达式的说法;

calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。

怎么使用

calc()可以使用数学运算中的简单加(+)、减(-)、乘(*)和除(/)来解决问题,而且还可以根据单位如px,em,rem和百分比来转化计算。
标准的写法:

  1.      .class{
  2.          /*
  3.      area: expression;
  4.          */
  5.          width:calc();
  6.          padding:calc();
  7.          margin-top:calc();
  8.          ...
  9.      }

兼容性

基本理论

  1. calc可以做用于任何具有大小的东东,比如border、margin、pading、font-size和width等属性设置动态值
  2. 支持的运算单位: rem , em , percentage , px
  3. 计算优先级别和数学一致

注意点:

calc 内部的表达式,在使用运算符号时,两遍必须加上空格(虽然乘除可以无视,但还是建议带上)!!!!!,不然会解析错误!!,看演示写法

  1.      width:calc(10 * 10px);
  2.      width:calc(50% - 50px);
  3.      width:calc(50% + 5em);
  4.      width:calc(10% / 1rem);

小demo

仅仅作为演示,响应伸缩

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.      <meta charset="UTF-8">
  6.      <title>CSS3 Calc</title>
  7.      <style type="text/css" media="screen">
  8.          html{
  9.              font-size:62.5%;
  10.          }
  11.          .wrapper{
  12.              width:100%;
  13.              border:5px solid #f00;
  14.              margin:10px ;
  15.              box-sizing:border-box;
  16.              height:200px;
  17.              clear:b;
  18.          }
  19.          .items{
  20.              height:calc(100% - 40px);
  21.              display:inline-block;
  22.              border:1px solid #f70;
  23.              text-align:center;
  24.          }
  25.  
  26.          .w1 .items{
  27.  
  28.              float:left;
  29.              margin-top:calc( 5 * 4px );
  30.              border:3px solid #0F16C6;
  31.              width:calc(100% / 3 - 6px)
  32.          }
  33.  
  34.          .w2 .items{
  35.              float:left;
  36.              margin-top:calc(200px - 20px * 9);
  37.              width:calc(100% / 3 - 2px)
  38.          }
  39.  
  40.          .w3 .items{
  41.              float:left;
  42.              width:calc(100% / 3 - (3 * 6px));
  43.              margin:calc(2px * 4 );
  44.          }
  45.  
  46.          .w3 .items:first-child{
  47.              padding:calc(5 * 1rem - 3rem);
  48.              box-sizing:border-box;
  49.          }
  50.  
  51.      </style>
  52. </head>
  53.  
  54. <body>
  55.      <div class="wrapper w1">
  56.          <div class="items">margin-top:calc( 5 * 4px );</div>
  57.          <div class="items">margin-top:calc( 5 * 4px );</div>
  58.          <div class="items">margin-top:calc( 5 * 4px );</div>
  59.      </div>
  60.      <div class="wrapper w2">
  61.          <div class="items">margin-top:calc(200px - 20px * 9);</div>
  62.          <div class="items">margin-top:calc(200px - 20px * 9);</div>
  63.          <div class="items">margin-top:calc(200px - 20px * 9);</div>
  64.      </div>
  65.      <div class="wrapper w3">
  66.          <div class="items">width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 );<br>padding:calc(5 * 1rem - 3rem);</div>
  67.          <div class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div>
  68.          <div class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div>
  69.      </div>
  70. </body>
  71. </html>

总结

calac 和flexbox搭配,用来写流式布局非常好;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

标签: CSS3 calc() 会计算属性