Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use css3 to achieve a computable adaptive layout. I hope you will get something after reading this article. Let's discuss it together.

Calc () is a CSS function. You can use calc () to set the margin, pading, width, and other attributes of an element.

And you can nest another calc () inside one calc ().

The syntax of clac () is very simple, using mathematical expressions to express:

Expression is a mathematical expression used to calculate the length, and the result of the expression is used as the final value.

Clac () uses the four operations of "+", "-", "*" and "/". It can use percentage, px, em, rem and other units, and can be calculated in a mixture of multiple units.

It is important to note that

A divisor of "0" will cause the HTML parser to throw an exception.

When "+" and "-", there must be spaces before and after, such as calc (100%-15px), which is wrong.

When "*" and "/", there can be no spaces before and after, but it is recommended to add spaces.

Give me two examples.

one

two

three

four

5demo

six

7.box {

8width:500px

9height:300px

10}

11.left {

12width:250px

13background:#ccc

14float:left

15}

16.right {

17width:calc (100%-250px)

18float:right

19background:#333

20}

21.left,.right {

22 height100%

23}

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

thirty-two

thirty-three

thirty-four

After reading this article, I believe you have a certain understanding of "how to use css3 to achieve a computable adaptive layout". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.