Layout skills: negative margin, text floating around, inline fast, CSS triangle, CSS initialization

Posted by jason257 on Mon, 03 Jan 2022 05:14:36 +0100

Reprinted from: https://jerry-z-j-r.github.io/2021/02/12/HTML-CSS-Cheat-Sheet-12/
(from JERRY)

1, Application of negative margin value

How to achieve the following effects?

Multiple boxes are close together. When the mouse is placed on one of the boxes, the border of the box will change color automatically.

① Move the margin of each box to the left -1px just to press the border of the adjacent box (otherwise the border will overlap * 2)
② When the mouse passes a box, you can raise the level of the current box (if the surrounding boxes are not positioned, you can add relative positioning to the current box (keep the position and display it on other boxes); if there is positioning around, you can raise the z-index of the current box)

2, Text around floating elements

When making the effect of text around the picture, you can skillfully use the feature that floating elements will not suppress the text.

3, Ingenious use of inline blocks

The page number is displayed in the middle of the page:

① Convert these link boxes into inline blocks, and then specify text align: Center to the parent;
② Make use of the gap between the block elements in the row, and add text align: Center to the parent; Inline block elements are centered horizontally

4, CSS triangle enhancement

Principle:

code:

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

Case:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Ingenious application of triangular reinforcement</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* Increase the width of the top border */
            /* border-top: 100px solid transparent;
            border-right: 50px solid skyblue; */
            /* The left and bottom border widths are set to 0 */
            /* border-bottom: 0 solid blue;
            border-left: 0 solid green; */
            /* 1.Only the right border has color */
            border-color: transparent red transparent transparent;
            /* 2. All styles are solid */
            border-style: solid;
            /* 3. The width of the top border should be larger, the width of the right border should be smaller, and the other borders should be 0 */
            border-width: 100px 50px 0 0;

        }

        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;

        }

        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

        .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="price">
            <span class="miaosha">
                ¥1650
                <i></i>
            </span>
    <span class="origin">¥5650</span>
</div>
</body>
</html>

5, CSS initialization

Different browsers have different default values for some tags. In order to eliminate the differences in HTML text rendering between different browsers and take care of browser compatibility, we need to initialize CSS.

Simple understanding: CSS initialization refers to resetting the style of the browser. (also known as CSS reset)

Every web page must first be initialized with CSS.

Here we take JD CSS initialization code as an example.

Unicode encoded font:

Replace the Chinese font name with the corresponding Unicode code, which can effectively avoid the problem of garbled code when the browser interprets the CSS code.

For example:

Bold \ 9ED1F53

Arial \ 5B8BF53

Microsoft YaHei \ 5FAEF6FC5ED1

/* Clear the inside and outside margins of all our labels */
* {
    margin: 0;
    padding: 0
}

/* em And i italicized text is not tilted */
em,
i {
    font-style: normal
}

/* Remove the dot of li */
li {
    list-style: none
}

img {
    /* border 0 Take care of lower version browsers. If the picture contains links, there will be border problems */
    border: 0;
    /* Cancel the problem of blank gap at the bottom of the picture */
    vertical-align: middle
}

button {
    /* When our mouse passes the button button, the mouse becomes a small hand */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" This means that the browser has better compatibility */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 Anti aliasing to make the text display clearer */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

/* Clear float */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

Topics: html css

Programmer Think