preface

Layout and style are required for every front end. In daily work, will also encounter some specific scene layout requirements, with the style, can achieve some magical effects. I’ve collected some layouts that I come across on a daily basis, as well as some amazing special effects that I happen to find while browsing various websites.

Due to the length, it will be divided into two chapters. Today, I’ll start with some interesting and useful layouts. The next chapter will show the magic of style.

Lazy loading placeholder adaptive

When displaying commodity pictures in the mall, if there are many pictures, a better experience is that there will be a placeholder map first, in order to make the page without jitter, which is the so-called lazy loading effect of pictures. However, when it comes to adaptation, it is more headache, especially the horizontal and vertical screen switching of mobile phones. Jitter can occur if the calculation is done in JavaScript.

Based on the principle of using CSS, not JS, we have the following solution:

<div class="img-ratio">
    <img src="http://via.placeholder.com/640x384">
</div>
Copy the code
.img-ratio {
    width: 100%;
    position: relative;
    padding-top: 75%;
}

.img-ratio > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
Copy the code

It can be adapted to different screens, as long as the UI provides a 4:3 placeholder map. The image below shows two images of the same scale with different widths and heights, both perfectly centered.

It works like this:

  • According to the width of the container, the actual size of the container is automatically calculated according to the ratio of width to height, and the child elements in the container such as IMG can adapt to the width and height.
  • The width of the image parent container is 100%, and the height percentage of the parent container is: 100 * 3/4 = 75%.
  • The image is absolute and completely covers the parent container.

Horizontal scroll bar on mobile

Mobile interface, every inch of land. Sometimes modules are arranged horizontally to control the scrolling length of the screen. However, horizontal alignment creates layout problems.

For example, mobile scrollbars rely on different styles than mobile browsers. One solution is to hide the scroll axis, but not overflow-x:hidden; Otherwise, it won’t roll. Then calculate the width of each horizontal block so that part of the right-most block is exposed, so that the user knows that there is something beyond the screen on the right and can swipe horizontally.

And if the width of the horizontal scroll is unknown, because the number of horizontal modules may change as the business needs it, then float cannot be used in horizontal layout. Because of the float, you need to know the width of the entire horizontal scroll, which is wider than the sum of the floating blocks to ensure that the float does not break lines.

So, it’s written like this:

<div class="wrapper">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
Copy the code
.wrapper {
    width: 340px;
    height: 80px;
    overflow: hidden;
}

.wrapper ul {
    height: 96px;
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
    padding: 0;
    margin: 0;
}

.wrapper li {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: #ddd;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
    margin-right: 10px;
}
Copy the code

Ul sets white-space:nowrap; Li sets display:inline-block; . The outermost div uses the height difference to hide the horizontal scroll bar.

Top navigation variable width center display

Some official websites have a top navigation bar. The content area of the navigation bar usually needs to be displayed in the center with white space on both sides. There may be a line or shadow below the navigation bar to distinguish the top from the main content.

.center-float {
    float: left;
    position: relative;
    left: 50%;
}

.center-float > ul {
    position: relative;
    left: -50%;
}
Copy the code

This is a way of floating in the center, and then with relative positioning.

The bottom of the footer buy

When the main content area of the page is not high enough, the footer is still displayed at the bottom. This does not mean position: Fixed, the footer is immediately below the content area. There are two ways to do this.

The HTML structure is as follows:

<html>
    <body>
        <div id="content">....</div>
        <div id="footer">....</div>
    </body>
</html>
Copy the code

Margin & padding

html, body {
    height: 100%;
}
$footer-height: 30px;

#content {
    min-height: 100%;
    margin-bottom: -$footer-height;
    padding-bottom: $footer-height;
}

#footer {
    line-height: $footer-height;
    text-align: center;
}
Copy the code

Flex layout

$footer-height: 30px;

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#content {
    flex: 1;
}

#footer {
    line-height: $footer-height;
    text-align: center;
}
Copy the code

Extra-wide background image centered

For some traditional portals, the main content area is typically 980px or 1000px wide. Sometimes, the wider image will be used as the overall background, centered, and not scrolling horizontally. This can be done:

.wrapper {
    min-width: 1000px;
    height: 800px;
    background: url(test.jpg) no-repeat center top;
}

.mainContent {
    position: relative;
    width: 1000px;
    margin: 0 auto;
}
Copy the code

::after implements horizontal and vertical centering

Can pseudo-elements also be used to center? At that time, I saw a feeling that it was amazing, look at the following example:

<div class="wrapper">
    <img src="test.png">
</div>
Copy the code
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    text-align: center;
}

.wrapper::after {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.wrapper > img {
    vertical-align: middle;
}
Copy the code

The horizontal direction is easy to understand. After pulls img down to the middle.

conclusion

Today’s introduction of the content, mainly layout, or encountered in the work, or see in a website, on the study of a, by the way here to do a share.

Of course, their solution is not the only one, if you have a better layout scheme, welcome to leave a comment, I will update, looking forward to more exchanges.

PS: Welcome to follow my public account “Chao Ge Front-end Small stack” to exchange more ideas and technologies.