Description of using the calc() property in CSS3 to express size values ​​in calculations

This article describes how to use the calc() attribute in CSS3 to express size values ​​​​in calculations

The usage of calc() is very clever. You can list the formulas like we do math problems in school. Calculate length, width and other values ​​to achieve adaptive layout to a certain extent. Below we will introduce how to use the calc() attribute in CSS3 to express size values ​​​​in calculations

When we want to implement adaptive layout of the page , usually because of the existence of margin, it is more troublesome; sometimes when you want to implement a width-adaptive input box, it is also quite cumbersome because of the existence of padding or margin, and at the same time, the final effect is inconsistent due to browser compatibility. The new attribute box-sizing added to CSS3 solves the above problem to a certain extent. In today's article, we will use another newly added attribute calc() of CSS3 to implement adaptive layout.

calc() is a newly added attribute of CSS3. It allows you to use an arithmetic expression to express the length value, which means you can use it to define the width of p and set margin, padding, border, etc.
Calc() operation rules:
1. Use the four arithmetic operations "+", "-", "*", and "/";
2. You can use units such as percentage, px, em, rem, etc. ;
3. Various units can be mixed for calculation.

Usage
The calc() syntax is very simple, just like when we learned addition (+), subtraction (-), multiplication (*), and division (/) when we were children, use Mathematical expression to represent:

.haorooms {   
  width: calc(expression);   
}

In this way, using padding, margin and percentage together, the problem can be solved.

For example, our margin is 20px. Then we can write

.haorooms{   
  width: calc(100% - 20px);  //注：减号前后要有空格，否则很可能不生效！！   
}

or we can use it like this:

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

Example
Example 1: Positioning Block elements on the page, with margins

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

Example 2: Auto-resizing form, also adapting to the container

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>
  <p id="formbox">
  <label>Type something:</label>
  <input type="text">
  </p>
</form>

The above is the detailed content of Description of using the calc() property in CSS3 to express size values ​​in calculations. For more information, please follow other related articles on the PHP Chinese website!