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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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

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 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

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

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

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

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

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.
