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

Jun 20, 2018 pm 05:24 PM
calc() css3 size calculate

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!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

CUDA's universal matrix multiplication: from entry to proficiency! CUDA's universal matrix multiplication: from entry to proficiency! Mar 25, 2024 pm 12:30 PM

General Matrix Multiplication (GEMM) is a vital part of many applications and algorithms, and is also one of the important indicators for evaluating computer hardware performance. In-depth research and optimization of the implementation of GEMM can help us better understand high-performance computing and the relationship between software and hardware systems. In computer science, effective optimization of GEMM can increase computing speed and save resources, which is crucial to improving the overall performance of a computer system. An in-depth understanding of the working principle and optimization method of GEMM will help us better utilize the potential of modern computing hardware and provide more efficient solutions for various complex computing tasks. By optimizing the performance of GEMM

How to calculate addition, subtraction, multiplication and division in word document How to calculate addition, subtraction, multiplication and division in word document Mar 19, 2024 pm 08:13 PM

WORD is a powerful word processor. We can use word to edit various texts. In Excel tables, we have mastered the calculation methods of addition, subtraction and multipliers. So if we need to calculate the addition of numerical values ​​in Word tables, How to subtract the multiplier? Can I only use a calculator to calculate it? The answer is of course no, WORD can also do it. Today I will teach you how to use formulas to calculate basic operations such as addition, subtraction, multiplication and division in tables in Word documents. Let's learn together. So, today let me demonstrate in detail how to calculate addition, subtraction, multiplication and division in a WORD document? Step 1: Open a WORD, click [Table] under [Insert] on the toolbar, and insert a table in the drop-down menu.

How to count the number of elements in a list using Python's count() function How to count the number of elements in a list using Python's count() function Nov 18, 2023 pm 02:53 PM

How to use Python's count() function to calculate the number of an element in a list requires specific code examples. As a powerful and easy-to-learn programming language, Python provides many built-in functions to handle different data structures. One of them is the count() function, which can be used to count the number of elements in a list. In this article, we will explain how to use the count() function in detail and provide specific code examples. The count() function is a built-in function of Python, used to calculate a certain

What is the size of a4 paper in centimeters? What is the size of a4 paper in centimeters? Feb 11, 2024 pm 11:51 PM

A4 paper is now used in many places, such as office, study, etc. The paper used for copying is basically A4 paper. Many friends don’t know how many centimeters the size of A4 paper is. Let’s take a look. Bar. 1. Size A4 paper is 21cm × 29.7cm (210mm × 297mm). The paper size used in most countries in the world adopts this international standard. 2. Origin A4 paper is 210mm×297mm. Reason 1: A rectangle with a length of 2 and a width of The resulting ratio is . However, 297 divided by 210, the result is 1.414, which is close to, and this ratio is exactly a piece of paper

Java program to calculate the area of ​​a triangle using determinants Java program to calculate the area of ​​a triangle using determinants Aug 31, 2023 am 10:17 AM

Introduction The Java program for calculating the area of ​​a triangle using determinants is a concise and efficient program that can calculate the area of ​​a triangle given the coordinates of three vertices. This program is useful for anyone learning or working with geometry, as it demonstrates how to use basic arithmetic and algebraic calculations in Java, as well as how to use the Scanner class to read user input. The program prompts the user for the coordinates of three points of the triangle, which are then read in and used to calculate the determinant of the coordinate matrix. Use the absolute value of the determinant to ensure the area is always positive, then use a formula to calculate the area of ​​the triangle and display it to the user. The program can be easily modified to accept input in different formats or to perform additional calculations, making it a versatile tool for geometric calculations. ranks of determinants

Count the number of occurrences of a substring recursively in Java Count the number of occurrences of a substring recursively in Java Sep 17, 2023 pm 07:49 PM

Given two strings str_1 and str_2. The goal is to count the number of occurrences of substring str2 in string str1 using a recursive procedure. A recursive function is a function that calls itself within its definition. If str1 is "Iknowthatyouknowthatiknow" and str2 is "know" the number of occurrences is -3. Let us understand through examples. For example, input str1="TPisTPareTPamTP", str2="TP"; output Countofoccurrencesofasubstringrecursi

How to use the Math.Pow function in C# to calculate the power of a specified number How to use the Math.Pow function in C# to calculate the power of a specified number Nov 18, 2023 am 11:32 AM

In C#, there is a Math class library, which contains many mathematical functions. These include the function Math.Pow, which calculates powers, which can help us calculate the power of a specified number. The usage of the Math.Pow function is very simple, you only need to specify the base and exponent. The syntax is as follows: Math.Pow(base,exponent); where base represents the base and exponent represents the exponent. This function returns a double type result, that is, the power calculation result. Let's

What is the size of a4 paper? What is the size of a4 paper? Apr 25, 2024 am 11:55 AM

1. The aspect ratio of A4 paper is different from the common 2:3 or 3:4. Its unique ratio of √2:1 makes it stand out among many paper sizes. 2. This special ratio provides ideal visual effects and practicality for A4 paper.

See all articles