Home > Web Front-end > CSS Tutorial > How to express dimensions using the calc() property in CSS3

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

不言
Release: 2018-06-20 17:24:45
Original
1934 people have browsed it

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);   
}
Copy after login

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);  //注:减号前后要有空格,否则很可能不生效!!   
}
Copy after login

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);   
}
Copy after login

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;   
}
Copy after login

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template