Home > Article > Web Front-end > How to set division in calc in css3
How to set division in calc in css3
- WBOYOriginal
- 2022-06-06 16:37:133422browse
In CSS3, you can use the "/" operator to set the division operation of the calc() function. This function is used to dynamically calculate the length value. The parameter can be set to a mathematical expression, and the result will be the calculated value. The return value, the syntax is "length attribute: calc (dividend/divisor)"; a space must be reserved before and after the "/" operator.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to set up division in calc in css3
The calc() function is used to dynamically calculate the length value.
It should be noted that a space needs to be reserved before and after the operator, for example: width: calc(100% - 10px);
Any length value can be calculated using the calc() function ;
The calc() function supports " ", "-", "*", "/" operations;
The calc() function uses standard mathematical operation priority rules;
The syntax is:
calc(expression)
expression must be a mathematical expression, and the result will be the return value after the operation.
Examples are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
input {
padding: 2px;
display: block;
width: calc(100% - 1em);
}
#formbox {
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
}
</style>
</head>
<body>
<form>
<div id="formbox">
<label>Type something:</label>
<input type="text">
</div>
</form>
</body>
</html>Output results;
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set division in calc in css3. For more information, please follow other related articles on the PHP Chinese website!