What can calc() do? Implement flexible layout with css-CSS Tutorial-php.cn

What can calc() do? Implement flexible layout with css

青灯夜游

Release： 2018-11-01 16:03:15

Original

2877 people have browsed it

The content of this article is to introduce what calc() can do? Implement flexible layout with css. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Creating a beautiful CSS adaptive layout starts with allocating space for all content in the web application. A height feature requires the ability to specify dimensions using a mix of length units.

For example, how can I reserve 50% of the area, plus a fixed amount of space (e.g. 10px)?

In the past, we needed to set very complex css styles to achieve the above effects, but now we can easily do this using the calc() attribute.

Also, we can use the calc() attribute anywhere a length or number is used. For example, you can use calc() to position things or set rgb() color values, so it is in the style sheet There are many good uses for .

Let’s introduce how the new attribute calc() of CSS3 implements flexible layout. [Recommended video learning: css3 tutorial]

What can calc() do?

The calc() property can be used anywhere in a stylesheet with CSS lengths or numbers. Regarding the use of calc(), please refer to the previous article [How to use calc? ], there is a detailed introduction, you can refer to it if necessary.

The calc() function provides two main functions to make the layout more flexible: Mixing percentages and absolute values, and the use of mixed units.

Mixing percentages with absolute units

Let’s look at an example of mixing percentages with absolute units. Suppose we wanted to allocate 50% of the available area minus a fixed number of pixels, then we could write:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			.demo {
				width: 400px;
				/*height: 200px;*/
				border: 1px solid #000;
				margin: 100px auto;
			}
			
			.cx {
				width: calc(100% - 100px);
				background-color: palevioletred;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<div class="cx">这是一段测试文字，背景颜色总是比总面积的50%还要小100像素</div>
		</div>

</html>

Copy after login

If its background color was red, it would look like:

What can calc() do? Implement flexible layout with css

If you reduce the parent size, it looks like:

What can calc() do? Implement flexible layout with css

We can see that the benefits of using calc() are very obviously. By combining different value types in this way, your web application can handle layout on devices of different sizes with greater control than before.

Use of Mixed Units

Another benefit is the ability to combine units with different measurements to obtain the final size. For example, you can set the size relative to the current font size by mixing "em" and "px" units.

.bar {
  height: calc(10em + 3px);
}

Copy after login

Let’s look at a good example of combined values.

What can calc() do? Implement flexible layout with css

When using calc(), you can add, subtract, multiply, and divide values using the, -, *, and / symbols, allowing for a variety of possibilities . Calc() can be used anywhere, such as calculating and setting CSS lengths or numbers. We can also use Calc() in calculating angles and frequencies.

Note: If you want to use the calc() attribute in Chrome 19 (Dev channel build), you need to add the -webkit- prefix. In Firefox since version 8, you need to use it after the -moz- prefix. In Internet Explorer versions After 9, it can be used without adding a prefix.

Summary: The above is the entire content of using the calc() attribute of CSS3 to implement CSS flexible layout introduced in this article. I hope it will be helpful to everyone's learning.

The above is the detailed content of What can calc() do? Implement flexible layout with css. For more information, please follow other related articles on the PHP Chinese website!