Home > Developer > Web Develop
Calc () looks like a function of its appearance. Usually in the production of the page, will always encounter some elements are 100% of the width (such as the BODY element). If the element width is 100%, it does not have the other box model property set itself OK, if anything else, it will cause the box to burst. For example, there is a border, or margin and padding, which will make your box burst. In other words, if the width of your element is 100%, as long as you add any value to the element, you will burst the element box (in standard mode, in addition to the IE Border,padding,margin mode). Usually when we encounter such phenomena, we can only change the structure to achieve, and sometimes can not solve. Even if you do this in a tedious way, the end result is inconsistent due to browser compatibility. Although the box-sizing in the CSS3 attribute described in the previous essay addresses this problem to a certain extent, the Calc () function functions to achieve the above effect more easily.
2. GrammarThe Calc () syntax is very simple, as we learned to add (+), subtract (-), multiply (*), and (/) as a child, using mathematical expressions to represent:
Calc () = calc (arithmetic);
Description
used to dynamically calculate length values.width: calc(100% - 10px) ;The browser compatibility with Calc () is good, in ie9+, ff4.0+, chrome19+, safari6+ are better supported, the same need to be preceded by the browser manufacturer's identifier.
(-moz-、-webkit-)
4. ExampleFor example, to achieve the following design (note: The image from the front of the Baidu Technical College 2016 spring class, the first phase of task three, Link: http://7xrp04.com1.z0.glb.clouddn.com/task_1_3_1.png) in the middle column layout.
The code is as follows:
HTML: (only partial layout of the middle column)
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head> <MetaCharSet= "UTF-8" /> <title>Third</title></Head><Body><Divclass= "Middle"> <H3>Team Introduction</H3> <P><Strong>The Gold Teacher</Strong>, "The World Five Absolute" one "East evil". The Peach Blossom Island Lord, the father of Huang Rong. The form of as slim, the body is tall and thin, the wind posture New cool, Siu Shu Xuan, zhan if God. Wearing Tsing Yi straight able, head wearing the same color square, the scribes model. It is not tame to be arrogant and rebellious. Disposition withdrawn, action strange, physique fluttering suddenly, like ghosts. "Peach blossom flying God sword, blue sea tide students according to Jade 簫" is his life martial arts, martial arts Hatsumode extraordinary, has been Zhen sublimation, as Jin Yong Xiao said in martial arts is one of the most absolute master.</P> <P><Strong>The European solar pioneer</Strong>, "The World Five Absolute" one "West Poison". Europe is tall, wearing white, high nose deep eyes, face whisker brown yellow, British atmosphere, eyes such as electricity, eyes such as sword, very sharp knife, language voice 鏗 鏗 like the sound of gold. The white blood system of Europe. This person killer ruthless, in order to seek to seize "martial arts number One" the name of the means, is Jin Yong Wu Batman small say in the famous villain role and martial arts one of the most absolute master.</P> <P><Strong>Chi Zhi Hing</Strong>, "The World Five Absolute" one "South Emperor", later renamed "The South Monk". Law "A lamp", a lamp wearing coarse monk robe, two long white eyebrow from the corner of the eye down, the face is kind, the eyebrows, although hidden sorrow, but a grace high Wah's look. Both "innate work" and "one Sun refers to" the two great Martial science, the power of profound extraordinary.</P> <P><Strong>Hong Seven public</Strong>, "The World Five Absolute" one "North hack", is Guo Jing, Huang Rong teacher father, for Jin Yong Xiao said in martial arts one of the most absolute master. Hong Seven male a long square face, SCO, coarse shouda foot, body clothes, a piece of West a block of the dozen filled with nail, but clean clean, hand holding a dozen dog sticks, on the back of a red lacquer of the big Hu Aloe, Shenfa Thunderbolt not eyes, "God dragon See first not see the end" is his life of the picture.</P> <P><Strong>Wang Heavy Sun</Strong>, "One of the five absolute" "the Avatar". Chinese Taoist All-true faction was created, was revered as one of the true five ancestors, formerly known as Fu, the word of the Secretary, the principal, and then the military attache, renamed Dulwich, Word Shixiong. Humanely renamed 嚞, a zhe, word know, the number of the sun son, so called the king of the Sun, the king of Dolcevita Mad, Jingzhao Salt Sun (today Shaanxi west of the Salt Sun City) Da Wei people. The seven main doors are called Seven true.</P> </Div></Body></HTML>
CSS: (contains only intermediate layout parts)
{ width: Calc (100%-(80px + 120px + 200px)); /* use 100% screen width minus already known fixed width, is the adaptive part */ overflow: auto; background-color: #FFF; Border: 1px #999 solid; margin: 20px;} { margin: 20px;}
Adaptive width According to screen resolution using CLAC () in 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
