Home > Developer > Web Develop
CSS3 's Calc () usage briefly describes:
Calc is an abbreviation for calculate (calculated meaning).
Judging from the appearance of Calc (), it resembles a method in a programming language and has a computational function.
Indeed, it can dynamically calculate the value of some elements in the CSS, and can use simple "+", "-", "*", "/" arithmetic.
The basic rules are as follows:
(1). You can use percentages, px, EM, REM, and other units.
(2). The calculations can be mixed using various units.
Let's look at a few code snippets:
. Box { border:1px solid #ddd; width:calc (100%-2px)}The above code allows the. Box element width plus a border width of exactly 100%, enabling an adaptive effect.
. Box { width:}Set the. Box width to 10em plus 20px.
The following is a full full-screen layout effect for hashing equal width:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><Metaname= "Viewport"content= "Width=device-width, initial-scale=1"/><title>Ant Tribe</title><styletype= "Text/css">*{margin:0;padding:0;}. col-3{width:Calc (100%/3-5px);float: Left;Margin-right:Calc (5PX*3/2);background:#eee;Color:#333;Height:100px;text-align:Center;Margin-bottom:Calc (5PX*3/2);font-size:18px;Line-height:100px;}. Col-3:nth-child (3){Margin-right:0;}</style></Head><Body><Divclass= "Container"> <Divclass= "Col-3">1</Div> <DivID= "Antzone"class= "Col-3">2</Div> <Divclass= "Col-3">3</Div></Div></Body></HTML>
The above code achieves a wide layout effect such as hashing, where Calc () is used to achieve dynamic computation and to achieve width adaptability.
Related reading:
(1). Calc () can refer to the Calc () usage in CSS3 for a detailed chapter.
(2).: Nth-child () refer to the pseudo-class selector E:nth-child (n) section of CSS .
A brief introduction to the Calc () usage of CSS3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
