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

Home

Web Front-end

CSS Tutorial

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

青灯夜游

Nov 01, 2018 pm 04:03 PM

calc()css3Adaptive layout

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>

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);
}

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!

Statement

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

So Many Color LinksApr 13, 2025 am 11:36 AM

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.

How Auto Margins Work in FlexboxApr 13, 2025 am 11:35 AM

Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted

Moving Rainbow UnderlinesApr 13, 2025 am 11:27 AM

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not

New Year, New Job? Let's Make a Grid-Powered Resume!Apr 13, 2025 am 11:26 AM

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that

One Way to Break Users Out of the Habit of Reloading Too MuchApr 13, 2025 am 11:25 AM

Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at

Domain-Driven Design With ReactApr 13, 2025 am 11:22 AM

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth

Detecting Inactive UsersApr 13, 2025 am 11:08 AM

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also

See all articles