Front-end knowledge

Calc () Introduction

calc is the English acronym calculate, as Chinese calculation means, is a new feature css3, used only when the length of the element. For example: You can use Calc () to the element margin, padding, border, font-size, and width and other dynamic value property. Why is a dynamic value it? Because we are using to represent the values obtained. However calc () biggest advantage is that the fluid used in the layout () can be calculated by element width calc.

Calc () usefulness

Calc () allows you to do the calculation elements, you can give a div element, using a percentage, em, px, and its value calculating unit rem width or height, for example, "width: calc (50% + 2em)", so we do not consider the value of the width of the DIV element in the end is how much, and handed over the task to compute browser.

Calc () syntax

calc () syntax is very simple, using a mathematical expression to it would be, just as our previous study plus (+), minus (-), multiplication (*), division (/), as follows:

.elm {

     width: calc(expression);

}

Wherein "expression" is an expression used to calculate the length of the expression.

Calc () operation rules

DIV + CSS layout adaptation

1, highly adaptive layout

　　Principle: Each module is set to the absolute positioning, and then set the value of the top and bottom properties intermediate module are adaptive high head and bottom of the module and the intermediate module on the height adaptation.

html code is as follows:

<body>
        <div class="top">
            120px
        </div>
        <div class="main">
            自适应
        </div>
        <div class="bottom">
            120px
        </div>
</body>

　css code is as follows:

.top{
    width: 100%;
    height: 120px;
    position: absolute;
    background-color: greenyellow;
    
}
.main{
    position: absolute;
    width: 100%;
    top: 120px;
    bottom: 120px;
    background-color: azure;
    height: auto;
}
.bottom{
    position: absolute;
    bottom: 0;//别漏了
    width: 100%;
    height: 120px;
    background-color:greenyellow ;
}

2, the width of the adaptive

Adaptive width three ways: namely, absolute positioning; using margin, to render the intermediate module; float itself.

1), with absolute positioning to set the widths of adaptive layout principle: absolute positioning for adaptation module, and then to left and right width of about two, in fact, the principles and highly adaptive principle is the same, additional two right and left, respectively right and left floating.

html code:

<body>
        <div class="left">
            200px
        </div>
        <div class="main">
            自适应
        </div>
        <div class="right">
            200px
        </div>
</body>

css code:

html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}

.left,
.right {
    width: 200px;
    display: inline;
    height: 100%;
    background-color: greenyellow;
}

.left {
    float: left;
}

.right {
    float: right;
}

.main {
    position: absolute;
    left: 200px;
    right: 200px;
    height: 100%;
    background-color: azure;
    display: inline;
}

2), medium priority to render a three adaptive layout priority rendering (loading) key: html content must be placed in front of the inside. Adaptive div must be placed in front of left and right and includes a parent in the div. Div parent, left and right modules are left floating, and then provided to the adaptive margin div (parent is the div sub-div): 0 200px, then the attribute value of the left margin-left is 100% of the negative, is margin-left: -100%; attribute value of right margin-left width is set to its own negative, is margin-left: -200px.

NOTE: Adaptive div must be placed in front of right and left and the div comprising a parent.

html code:

<body> 
        <div class = "main"> <-! see, here enclosed by a parent div -> 
            <div class = "Content"> 
                adaptive 
            </ div> 
        </ div> 
        <div class = "left"> 
            200px 
        </ div> 
        <div class = "right"> 
            200px 
        </ div> 
</ body>

css code:

html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}

.main {
    width: 100%;
    height: 100%;
    float: left;
}

.main .content {
    margin: 0 200px;
    background-color: azure;
    height: 100%;
}

.left,
.right {
    width: 200px;
    height: 100%;
    float: left;
    background-color: greenyellow;
}

.left {
    margin-left: -100%; //important
}

.right {
    margin-left: -200px; //important
}

3), self-floating principle: the intermediate column is set margin property, it is to the left and right columns are floating around.

NOTE: Using this method of adaptive layout, it must be adaptive in the row behind the left and right in html.

html code:

<body>        
        <div class="left">
            200px
        </div>
        <div class="right">
            200px
        </div>
        <div class="main">
            自适应
        </div>
</body>

css code:

html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}
.main {
    margin: 0 200px;
    height: 100%;
    background-color: azure;
}
.left,
.right {
    width: 200px;
    height: 100%;
    background-color: greenyellow;
}
.left {
    float: left;
}
.right {
    float: right;
}

css3 calc () describes attribute adaptive layout and use

Front-end knowledge

Calc () Introduction

Calc () usefulness

Calc () syntax

DIV + CSS layout adaptation

1, highly adaptive layout

2, the width of the adaptive

Guess you like