How to express dimensions using the calc() property in CSS3

This article mainly introduces how to use the calc() attribute in CSS3 to express size. It has certain reference value. Now I share it with you. Friends in need can refer to it

calc() The usage of Calculation expression size value

When we want to implement adaptive page layout, it is usually troublesome because of the existence of margin; sometimes when we want to implement an input box with adaptive width, it is also because of the existence of padding or margin. , which is quite cumbersome, and 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 " ", "-", "*", "/";
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 mathematics Expression:

.haorooms {   
  width: calc(expression);   
}

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

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

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

or it can be used 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: Block element positioned on the page , containing 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: Automatically resize the form and adapt 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 entire content of this article, I hope it will be useful for everyone's learning Help, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

About CSS3 animation to achieve frame-by-frame animation effect

How to use CSS3 box-reflect to Create a reflection effect

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