How to use css3 to implement a computable adaptive layout
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!
