Practical tips from CSS World

Please support Teacher Zhang for the specific principles and explanations of the following skillsCSS WorldI’m not doing expansion here.

Part of the trick is that some attributes will be deprecated by the standard, such as clip. This is partly because I feel compatibility is poor, and CSS3 has features that compensate, such as text-align:justify; , can be done with flex layout.

Demanded by netizens, join department distribution diagram, illustrated the principle is to prevent large amount of code and remove unwanted properties (such as that caused by background color) look seems to be no effect of skills will add some pictures, if you have no effect in the process of test phenomenon, suggested by element to check the geometric properties of the following elements. There are also some copy-paste effects that I will not take screenshots (in case readers are lazy, THE main purpose of my format is to directly copy into the body can be used), because the space is too long.

This article is fromPersonal blog

Remove the floating

Used mainly after a child element floats, the parent element cannot support the height and width.

<! -- html -->
<div class="clear">
    <img src="demo.gif">
</div>

<! -- CSS -->
<style>
    img {
        float: left;
    }
    /* Clear float */
    .clear::after {
      content: "";
      display: block;
      clear: both;
    }
</style>
Copy the code

Words are sometimes centered, sometimes left

Because div has p nested within it, p is no bigger than div. Note, however, when the content of p in English words, if a word is too long, “PPPPPPPPPPPPPPPPPPPPPPPPPPPP” this even longer, for example, would be seen as a unit and cause beyond the size of the div.

If you want English characters to look like Chinese characters, use “word-break:break-all” in p.
```
<! -- html -->
<div class="box">
    <p class="content"></p>
</div>

<! -- CSS -->
<style>
    .box {
        text-align: center;
    }
    .content {
        display: inline-block;
        text-align: left;
    }
</style>
Copy the code
```

The bump man

The purpose is to create a concave or convex shape, taking advantage of the “2” Chinese and English words do not wrap characteristics

<! -- html -->
<div class='ao'></div>

<! -- CSS -->
<style>
    .ao {
        display: inline-block;
        width: 0;
    }
    .ao::before {
        content: "Love you love";
        outline: 2px solid # 000;
        color: #fff;
    }
</style>
Copy the code

Let the padding and border not affect the size of the box model

I’m sure most of you know this, but what about some weird behavior like width< Content +padding? In fact, when padding+border>width, the render size of the element is the padding+border; Padding +border<width allocates the remaining space to content.
```
<! -- html -->
<div></div>

<! -- CSS -->
<style>
    div {
        box-sizing: border-box;
    }
</style>
Copy the code
```

Height: 100% of the screen

<! -- html -->
<div></div>

<! -- CSS method 1 -->
<style>
    html.body {
        height: 100%;
    } 
    div {
        height: 100%
    }
</style>
<! CSS method 2 -->
<style>
    div {
        position: absolute;
        height: 100%;
    }
</style>
Copy the code

Expand elements at any height

The disadvantage is that if the height is too high, it will cause rapid expansion and recall delays, so this large enough value should be appropriate.

<! -- html -->
<div></div>

<! -- CSS -->
<style>
    div {
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s; 
    }
    div.active {
        max-height: 666px;  /* Requires a sufficiently large value */
    }
</style>
Copy the code

Elegant images not loaded or failed to load effects

Note that after the image is displayed, the img becomes a “replacement element”, and the replacement element cannot be set as a pseudo-element because the content is replaced by the image. Also note that variables inside attR cannot be quoted in double quotes.

<! -- html -->
<div>
    <img src="demo.gif" alt="lululu">
</div>

<! -- CSS -->
<style>
    div {
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
    img {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: relative;
    }
    img::after {
        /* Generates Alt message */
        content: attr(alt);
        /* Dimensions and positioning */
        position: absolute; left: 0;bottom: 0;right: 0;
        / * * / color
        background-color: rgba(0, 0, 5);/* Alt message hidden */
        transform: translateY(100%)./* Transition animation */
        transition: transform .2s;
        }
        img:hover::after {
        /* Alt message display */
        transform: translateY(0);
    } 
</style>
Copy the code

CSS hover image replacement effect

Note that if you right-click to save the image, you save the image inside SRC, not the image after the replacement.

<! -- html -->
<img src="demo.gif">

<! -- CSS -->
<style>
    img:hover {
        content: url(amazing.gif);
    }
</style>
Copy the code

Seo-friendly “Replacement element” title logo

The reason for using H1 is mainly because of SEO, semantic problems.

<! -- html -->
<h1>Weismann's blog</h1>

<! -- CSS -->
<style>
    h1 {
        content: url(logo.gif);
    }
</style>
Copy the code

Highly compatible, automatic equal-width, bottom-aligned bar chart

Note that the first I cannot be wrapped on a line, which will result in a backward shift.

<! -- html -->
<div class="box"><i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
</div>

<! -- CSS -->
<style>
    .box {
        width: 256px;
        height: 256px;
        text-align: justify;
    }
    .box:before { 
        content: "";
        display: inline-block;
        height: 100%;
    }
    .box:after {
        content: "";
        display: inline-block;
        width: 100%;
    }
    .bar {
        display: inline-block;
        width: 20px;
        /* /
    } 
</style>
Copy the code

Highly compatible loading effects

In IE6-IE9 it is… Everything else is dynamic; The purpose of using dot is semantic and compatible with older browsers.

<! -- html -->Loading in progress<dot>.</dot>

<! -- CSS -->
    <style>
    dot {
        display: inline-block;
        height: 1em;
        line-height: 1;
        text-align: left;
        vertical-align: -.25em;
        overflow: hidden;
    }
    dot::before {
        display: block;
        content: '... \A.. \A.'; 
        white-space: pre-wrap;
        animation: dot 3s infinite step-start both;
    }
    @keyframes dot {
        33% { transform: translateY(-2em); 66%} {transform: translateY(-1em); }}</style>
Copy the code

Increase click area

The first takes advantage of the fact that the padding of inline elements only affects the appearance and does not affect the layout. The second is a way to change the location of the background image for other attributes.

<! -- html -->
<a href="">demo</a>

<! -- CSS1 -->
<style>
    a {
        padding: 20px 0; 
    }
</style>
<! -- CSS2 -->
<style>
    a {
        border: 11px solid transparent;
    }
</style>
Copy the code

Do not use the “three bars” and “dot” effects of pseudo-elements

<! -- html -->
<i class="icon"></i>

<! -- CSS three bars -->
<style>
    .icon {
        display: inline-block;
        width: 140px; height: 10px;
        padding: 35px 0;
        border-top: 10px solid;
        border-bottom: 10px solid;
        background-color: currentColor;
        background-clip: content-box;
    }
</style>
<! -- CSS triple bar 2 -->
<style>
    .icon {
        width: 120px;
        height: 20px;
        border-top: 60px double;
        border-bottom: 20px solid;
    }
</style>
<! -- CSS dot -->
<style>
    .icon {
        display: inline-block;
        width: 100px; height: 100px;
        padding: 10px;
        border: 10px solid;
        border-radius: 50%;
        background-color: currentColor;
        background-clip: content-box;
    }
</style>
Copy the code

Navigation bar to remove excess size on the right

Margin is used to change the size. Note that the horizontal dimension of the element changing the size cannot be determined.

<! -- html -->
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<! -- CSS -->
<style>
    div {
        width: 380px;
    }
    ul {
        margin-right: -20px;
    }
    ul > li {
        float: left;
        width: 100px;
        margin-right: 20px;
    } 
</style>
Copy the code

Correct scroll bottom blank way

If you use padding, it won’t show up in Firefox or IE.

<! -- html -->
<div class="box">
	<img src="demo.gif">
</div>

<! -- CSS -->
    <style>
    .box {
        height:200px;
        overflow:auto;
    }
    .box>img {
        margin: 50px 0;
    }
</style>
Copy the code

Highly compatible with multi-column contour heights

Note that the container height cannot be a fixed value. The disadvantage is that anchor points may be used internally to locate the container.

<! -- html -->
<div class="container">
    <div id="colLeft" class="column-left">
        <h4>pro</h4>
        <p>Point 1</p>
        <p>Point 1</p>
    </div>
    <div id="colRight" class="column-right">
        <h4>fanfangguandian</h4>
        <p>Point 1</p>
    </div>
</div>

<! -- CSS -->
<style>
    .container {
        overflow: hidden;
    }
    .column-left..column-right {
        margin-bottom: -9999px;
        padding-bottom: 9999px;
        width: 50%;
        float: left;
    }
    .column-left {
        background-color: #34538b;
    }
    .column-right {
        background-color: #cd0000;
    }
</style>
Copy the code

The correct block-level element is right-aligned

The auto value for margin takes up the remaining space.

<! -- html -->
<div>demo</div>

<! -- CSS -->
<style>
    div {
        width: 100px;
        margin-left: auto;
    }
</style>
Copy the code

Image upload added box

This tip mainly states that the border color inherits from color by default

<! -- html -->
<div class="add"></div>

<! -- CSS -->
<style>
    .add {
        display: inline-block;
        width: 76px; height: 76px;
        color: #ccc;
        border: 2px dashed;
        text-indent: -12em;
        transition: color .25s;
        position: relative;
        overflow: hidden;
    }
    .add:hover {
        color: #34538b;
    }
    .add::before..add::after {
        content: ' ';
        position: absolute;
        top: 50%;
        left: 50%;
    }
    .add::before {
        width: 20px;
        border-top: 4px solid;
        margin: -2px 0 0 -10px;
    }
    .add::after {
        height: 20px;
        border-left: 4px solid;
        margin: -10px 0 0 -2px;
    }
</style>
Copy the code

Does not affect the background image position setting margin

Same as the second way to increase the click area

<! -- html -->
<div class="box"></div>

<! -- CSS -->
<style>
    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        border-right: 50px solid transparent;
        background-position: 100% 50%;
    }
</style>
Copy the code

Border make trapezoid, various triangles

<! -- html -->
<div></div>

<! CSS trapezoid -->
<style>
    div {
        width: 10px; height: 10px;
        border: 10px solid;
        border-color: #f30 transparent transparent;
    }
</style>
<! -- CSS triangle -->
<style>
    div {
        width: 0;
        border-width: 10px 20px;
        border-style: solid;
        border-color: #f30 transparent transparent;
    } 
</style>
<! -- CSS Triangle -->
<style>
    div {
        width: 0;
        border-width: 10px 20px;
        border-style: solid;
        border-color: #f30 #f30 transparent transparent;
    } 
</style>
Copy the code

High compatible double column, equal width side adaptive, equal height layout

The disadvantage is that border does not support percentages, 2-3 columns at most.

<! -- html -->
<div class="box">
    <nav>
        <div>123</div>
        <div>123</div>
        <div>123</div>
    </nav>
    <section>
        <div>1234</div>
    </section>
</div>

<! -- CSS -->
<style>
    .box {
        border-left: 150px solid # 333;
        background-color: #f0f3f9;
    }
    .box::after {
        content: "";
        display: block;
        clear: both;
    }
    .box > nav {
        width: 150px;
        margin-left: -150px;
        float: left;
    }
    .box > section {
        overflow: hidden;
    }
</style>
Copy the code

Inline elements are “approximately” vertically centered

As for why to say “approximate”, a word is not clear, please see the beginning
```
<! -- CSS -->
<style>
    span {
        line-height: 24px;
    }
</style>
Copy the code
```

Multi-line content is “approximately” vertically centered

<! -- html -->
<div class="box">
    <div class="content">Implementation based on line height...</div>
</div> 

<! -- CSS -->
<style>
    .box {
        width: 120px;
        line-height: 120px;
        background-color: #f0f3f9;
    }
    .content {
        display: inline-block;
        line-height: 20px;
        margin: 0 20px;
        vertical-align: middle;
    } 
</style>
Copy the code

The vertical gap of the picture in the container

The problem has to do with the “ghost blank node” and x-height, you can try adding the X character before img to see.

<! -- html -->
<div class="box">
	<img src="demo.gif">
</div>

<! -- CSS -->
<style>
    .box {
        width: 280px;
        outline: 1px solid #aaa;
        text-align: center;
        /* Solution 1 */
        font-size: 0;
        /* Solution 2 */
        line-leight: 0;
    }
    .box > img {
        height: 96px;
        /* Solution 3 */
        display: block;
    } 
</style>
Copy the code

Icon text alignment

The feature is that text size changes without affecting alignment. Ex stands for x-height, depending on the shape of the X (e.g. font-family).

<! -- Way 1 -->
<! -- html -->
<div class="box">
    <p>
    	<i class="icon icon-demo"></i>lala</p>
</div>

<! -- CSS -->
<style>
    .box {
        /* According to the image size */
        line-height: 20px;
    }
    p {
        font-size: 40px;
    }
    .icon {
        display: inline-block;
        width: 20px;
        height: 20px; 
        white-space: nowrap;
        letter-spacing: -1em;
        text-indent: -999em;
    }
    .icon::before {
        /* Older versions of IE7 are compatible with */
        content: '\ 3000';
    }
    .icon-demo {
        background: url(demo.png) no-repeat center;
    }
</style>

<! -- Mode two -->
<! -- html -->
<p>The text<img src="delete.png"></p>

<! -- CSS -->
<style>
    p {
        font-size: 14px;
    }
    p > img {
        width: 16px; height: 16px;
        vertical-align:.6ex;
        position: relative;
        top: 8px;
    }
</style>
Copy the code

Always centered frame

Content and browser size changes are automatically sized and positioned, and can be controlled by the height of the pseudo-element.

<! -- html -->
<div class="container">
    <div class="dialog">demo</dialog>
</div>

<! -- CSS -->
<style>
    .container {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: rgba(0, 0, 5);text-align: center;
        font-size: 0;
        white-space: nowrap;
        overflow: auto;
    }
    .container::after {
        content: ' ';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    .dialog {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        font-size: 14px;
        white-space: normal;
        /* Popbox style */
        padding: 10px 14px;
        border: 1px solid # 000;
        border-radius: 4px;
        background: #fff;
    }
</style>
Copy the code

Text wrap picture

The real purpose of float.

<! -- html -->
<div class="box">
    <div>
    	<img src="demo.gif">
    </div>
    <p>Demo, demo, demo, demo, demo, demo, demo</p>
</div>

<! -- CSS -->
<style>
    .box {
        width: 100px;
    }
    img {
        float: left;
        width: 40px;
        height: 40px;
    }
</style>
Copy the code

Customize the scroll bar with Overflow: Hidden

Overflow: Hidden is actually scrollable, scrolling through anchor points, focus, and scrollTop. Scroll bar implementation please play by yourself.

TAB effects implemented by label

Unlike anchors, which do not trigger page-jumping from inside out (event bubbling effect caused by multiple layers of scrolling), they also support tab-option effects; The disadvantage is that you need JS support for selected effects.

<! -- html -->
<div class="box">
    <div class="list"><input id="one">1</div>
    <div class="list"><input id="two">2</div>
    <div class="list"><input id="three">3</div>
    <div class="list"><input id="four">4</div>
</div>
<div class="link">
    <label class="click" for="one">1</label>
    <label class="click" for="two">2</label>
    <label class="click" for="three">3</label>
    <label class="click" for="four">4</label>
</div> 

<! -- CSS -->
<style>
    .box {
        height: 10em;
        border: 1px solid #ddd;
        overflow: hidden;
    }
    .list {
        height: 100%;
        background: #ddd;
        position: relative;
    }
    .list > input {
        position: absolute; top:0;
        height: 100%; width: 0;
        border:0; padding: 0; margin: 0;
    } 
</style>
Copy the code

“Contain block” absolute positioning element “a column of heaven” problem

<! -- html -->
<div class="father">
    <div class="son">lala</div>
</div>

<! -- CSS -->
<style>
    .father {
        position: relative;
        width: 20px;
        height: 20px;
    }
    .son {
        position: absolute;
        /* Solution */
        white-space: nowrap;
    }
</style>
Copy the code

Form validation application with “no dependency absolute positioning”

If you use “position: Absolute” alone on an element (the position attribute of the parent element is the default), the element will actually stay put, resulting in a BFC.

<! -- html -->
<div class="group">
    <label class="label"><span class="star">*</span>email</label>
    <div class="cell">
        <input type="email" class="input">
        <span class="remark">The format of the mailbox is incorrect.</span>
    </div>
</div>
<div class="group">.</div>

<! -- CSS -->
    <style>
    .group {
        width: 300px;
    }
    .label {
        float: left;
    }
    .remark {
        position: absolute;
    }
</style>
Copy the code

Body page sidebar

Use a combination of text-align and fixed; The purpose of height 0 and overflow hiding is not to affect the subject’s experience. The reason why absolute positioning elements are not hidden is that “if overflow is not a positioning element and there are no positioning elements between the absolute positioning element and the overflow container, Overflow cannot crop absolutely positioned elements.” – CSS World.

<! -- html -->
<div class="alignright">
    <span class="follow"></span>
</div>

<! -- CSS -->
<style>
    .alignright {
        height: 0;
        text-align: right;
        overflow: hidden;
        background: blue;
    }
    .alignright:before {
        content: "\ 2002";
    }
    .follow {
        position: fixed;
        bottom: 100px;
        z-index: 1;
        width: 10px;
        height: 10px;
        border: 1px solid # 000;
    } 
</style>
Copy the code

Do not set width and height to form full occupancy?

Using top and bottom or left and right at the same time triggers fluid properties And by “top: 0; left:0; width:100%; height:100%; “By contrast, margin, border, and padding don’t overflow to the outside of the window (even if you think box-sizing, what about margin?). ; The reason for using span is to show that absolute positioning sets the element’s display to a block.
```
<! -- html -->
<span></span>

<! -- CSS -->
<style>
    span {
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom: 0;
    }
</style>
Copy the code
```

Margin: Auto Horizontal vertical center

<! -- html -->
<div></div>

<! -- CSS -->
<style>
    div {
        width: 300px; height: 200px;
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
        margin: auto;
    }
</style>
Copy the code

Paper edge curl shadow

Position: relative; Z – index: 0;” Creating a cascading context with a negative value of z-index places the shadow between “Contaniner” and “Page”.

You can try to remove the key CSS to see the effect.

<! -- html -->
<div class="container">
    <div class="page">
        <h4>demo</h4>
        <p>demo</p>
    </div>
</div>

<! -- CSS -->
<style>
    .container {
        background-color: # 666;
        height: 1000px;
        /* Create a cascading context, key */
        position: relative;
        z-index: 0;
    }
    .page {
        width: 600px;
        background-color: #f4f39e;
        background: linear-gradient(to bottom, #f4f39e, #f5da41 60%, #fe6);
        box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 2);text-shadow: 0 1px 0 #f6ef97;
        position: relative;
        left: 200px;
        top: 200px;
    }
    .page:before {
        transform: skew(-15deg) rotate(-5deg);
        transform-origin: left bottom;
        left: 0;
    }
    .page:after {
        transform: skew(15deg) rotate(5deg);
        transform-origin: right bottom;
        right: 0;
    }
    /* Edge curl edge shadow */
    .page:before..page:after {
        width: 90%; height: 20%;
        content: "";
        box-shadow: 0 8px 16px rgba(0, 0, 0, 3);position: absolute;
        bottom: 0;
        z-index: -1;
    }
</style>
Copy the code

The hidden text

The main point of this is to show that Chrome will automatically process a font size below 12px (the new version doesn’t limit font size anymore) to 12px, except for one value, 0.
```
<! -- CSS -->
<style>
    p {
        font-size: 0;
    }
</style>
Copy the code
```

Address text-decoration and text overlap

Because the elements are inline, you don’t have to worry about affecting the height of the elements.

<! -- CSS -->
<style>
    a {
        text-decoration: none;
        border-bottom: 1px solid;
        padding-bottom: 5px;
    }
</style>
Copy the code

Automatically converts input lowercase letters to uppercase

<! -- CSS -->
<style>
    input {
        text-transform: uppercase;
    }
</style>
Copy the code

The first symbol selector in the price scenario

The feature is to keep the HTML structure clean

<! -- html -->
<p class="price">Selections of 399</p>

<! -- CSS -->
<style>.price:first-letter { ... }</style>
Copy the code

Elements are hidden while resources are not loaded

This can be accessed via script.innerhtml.

<! -- html -->
<script type="text/html">
    <img src="1.jpg">
</script> 
Copy the code

Head cut rectangle hollow out effect

Mainly use outline.

<! -- html -->
<div class="crop">
    <div id="cropArea" class="crop-area"></div>
    <img src="demo.gif">
</div>

<! -- CSS -->
<style>
    .crop {
        width: 200px; height: 200px;
        overflow: hidden;
        position: relative;
    }
    .crop > .crop-area {
        position: absolute; top:0; height: 0;
        width: 80px; height: 80px;
        outline: 200px solid rgba(0, 0, 5);cursor: move;
    } 
</style>
Copy the code

Custom cursor

Note that IE only supports cur files.

<! -- CSS -->
<style>
    .cursor-demo {
        cursor: url(demo.cur);
    }
</style>
Copy the code

Modify horizontal flow to vertical flow

Compatible with IE7; There are many things involved in this application, and all the characteristics of horizontal flow can be applied to vertical flow (for example, horizontal center becomes vertical center).
```
<! -- CSS -->
<style>
    .verticle-mode{
        writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }
</style>
Copy the code
```