Invariant and variable in CSS design

"People live a life, someone has become a face, some people become lining, are the times of the dictates." "--the guru of the Generation"

If refactoring lining and face, then HTML should be responsible for lining, and CSS is responsible for face. In terms of CSS, this time we analyze from a mutable and unchanging perspective.

A face question

First of all, this is a face test, and secondly, I did not do this interview, and finally forgot which factory is the face of the question.

Specific requirements I forgot, probably meant to be this content in the vertical center of the window, to the picture as a reference, text up and down, above the text more open up, the text is more open down, the image size fixed, the text how much is not fixed (red line is I add, as the vertical direction of the middle line, to assist the description). Here the text belongs to the variable factor, and the picture belongs to the fixed factor.

Thinking analysis

First, we see the picture here at the same level, the text of how much can not affect the picture, so we draw the possible two scenarios, the first text normal document flow, the absolute positioning of the image, the second text absolute positioning, picture normal document flow.

Secondly, because the above text extension direction is upward, itself violates the normal flow direction of the document (normal should be as the text increases downward extension height), so that the above text part must be absolutely positioned, set bottom value

Finally, combined with the above two reasons, we first use the second scheme test, text absolute positioning, picture normal flow of documents.

Here, we use the idea of breaking up in the previous article to get the HTML structure as follows:

Ul.demo    li        text-top        img.img-center        . Text-bottom

The main CSS code is as follows:

. demo{position:absolute; top:50%;}. demo li{float:left; width:120px; margin:0 20px; position:relative;} text-top{ Position:absolute; bottom:90px; left:0;} . img-center{margin-top: -34px; width:120px; height:68px;} text-bottom{position:absolute; top:50px;}

Common examples

Content Fluid Layout

Here the sidebar is fixed and the content is the fluid layout with the remaining width. The sidebar is a fixed factor and the content is a variable factor.

Section.section-main    . Inner-center.clearfix        . Main>.content        Aside.aside-right

. main{float:left; width:100%;}. Main. content{margin-right:320px;} aside-right{float:left; width:300px; margin-le FT: -320px;}

Picture and text mixed row

Or before the picture mixed, generally speaking the image is fixed width, and the text part is not set width. The fixed factor is the width of the picture, and the variable factor is the width of the text.

. imgtext-mix    a.mix-img-link>img.mix-img    . Mix-text        h3.mix-tt>a.mix-tt-link        . Mix-intro

. mix-img-link{float:left; width:200px; margin-right:20px;}. mix-text{Overflow:hidden;}

The container width is variable, but the width to height ratio must

Specific reference: How to do in the CSS in the container scale, here does not expand the detail, the constant factor is the aspect ratio, variable factor is the width.

Variable and constant on the mobile side

There are a lot of people who are just getting started mobile end multiplicity The general will ask a question, whether the mobile end is to use a percentage ah. In fact, aside from those new units REM, VW, VH and so on, the mobile side in addition to the percentage, PX can also be used, is not as you imagined. With what units, the most important thing is to grasp the variable and immutable. If you grasp it, the mobile end multiplicity is the same as the PC. Of course, if you're accustomed to setting a fixed wide height on your PC, you'll have to be frustrated.

Full-screen picture scrolling

The full screen of this thing, in the case of VW can not be used, that is not 100% mo (the full screen here refers to the width of the entire display, excluding height).

Ul.imgslide    li*4>img

float layout. imgslide{    width:400%;}. Imgslide li{    width:25%;    Float:left;} Absoulte layout. imgslide{    width:100%;    height:100px;    Position:relative;}. Imgslide li{    width:100%;    height:100%;    Position:absolute;    top:0;    left:0;}. Imgslide Li:nth-child (n+1) {    transform:translate (100%, 0);}

Graphic Mixed list

Or the front of the picture mix, haha, for the PC maybe you can ignore the right text on the variable direct setting width, but the mobile side that is sorry, you must consider this variable factor.

This is an estimated 90% of the mobile side has this effect, of course, it is not possible to design your 375px manuscript, and then you do a 375px width effect. But if the proportion of the design draft, and then set the picture and the width of the percentage of the picture, the width of the change, of course, will affect the height of the image changes (if the height of the image can not be seen, all kinds of stretching or deformation), and the height of the image changes will affect the overall row changes, That is estimated to hold a different phone, see the right of the text content or high or low is also drunk.

The percentage effect is probably as follows:

So the general design here is the image fixed size unchanged, the right text variable, occupy the rest of the space. Implementation with the above picture and text mixed, of course, there are many techniques can be used, such as Flex,absolute,float

Single-line list

The same line list, title because the length of the variable factor, it is not appropriate to directly control its width. The right side of some buttons or auxiliary information relative to the use of absolute positioning on the right is more reasonable.

Ul.line-list    Li        p.title+i.icon-xxx

. line-list li{    position:relative;    padding-right:40px;    line-height:40px;}. Line-list Li icon-xxx{    position:absolute;    right:10px;    top:50%;    Tranform:translate (0,-50%);} If the text is longer, you need to do more than omit the truncation. Line-list li. title{    padding-left:10px;    text-overflow:ellipsis;    White-space:nowrap;    Overflow:hidden;}

Aliquot

Here the sub-level of equal points, you can use the technology has Flex,float,table-cell and so on, where float should be the lowest, because you have to set the width of the item, the three-part set 33.33%, the four equal set 25%, and so on, this re-use is too low, is not suitable for more advanced mobile end, so Flex and Table-cell is a good choice, there is no need to care about the number of items (of course, you have to determine a line can be displayed, not show that is also sad). So even units are redundant in this case.

Ul.equal-list    Li*n

flex.equal-list{    Display:flex;}. Equal-list li{    flex:1;} table-cell.equal-list{    display:table;    table-layout:fixed;    width:100%;}. Equal-list li{    Display:table-cell;}

Translate

The percentage units used in translate are for the percentage of their own width and height, so it is a great advantage for unknown, wide-height calculations, especially for horizontal and vertical centering.

. center-translate{Position:absolute; left:50%; top:50%; transform:translate (-50%,-50%);}

Of course, there are many changes and variables, in short, on the mobile side of the variable factor more than the PC, more on the width or height of the uncertainty, there is a need for various methods to avoid the direct setting of the dead width or height, of course, fortunately, CSS3 's support to the control of these uncertainties tend to become simple.

The way of change and constant

Finally, whether it is mobile or PC side, the way to set a specific width or height is doomed to lack of extensibility. So especially when it comes to making generic components, be sure to dig deeper, learn more about usage scenarios, special features for each scene, and even predictability for future revisions.

May be said here more is the width of control, in fact, the choice of methods is the same, the same effect, there may be many ways to achieve, and each method has its own pros and cons, so also according to the actual situation to flexible use, this also belongs to the variable. If you all are fits, that is a fixed thinking, no matter how flexible.

If, from a higher point of view, nothing is constant, everything is mutable. Perhaps this site is immutable, to the site will have to change, so reject dogmatism, everything from the actual situation, according to demand analysis, to draw a reasonable practice.

