HTML

How to understand HTML semantics

  1. Makes it easier to read (increases code readability)
  2. Make search engines easier to read (SEO)

Block elements & inline elements

  1. Block element: occupies a single line
display: block/table
div h1 h2 table ul ol p...
Copy the code
  1. Inline element: exclusive piece
display: inline/inline-block
span img input button...
Copy the code

CSS

layout

Priority algorithm

writing The weight
! important Infinity
Header styles 1000
id 100
Class, property, pseudo class 10
Tag selector, pseudo element 1
The wildcard 0

The box model

  • Box model: IE box model, standard box model.
// Internet explorer
width = content + padding + border;
box-sizing: border-box;
/ / standard
width = content;
box-sizing: content-box;
Copy the code
// How big is box's offsetWidth?
<style>
    #box {
        width: 100px;
        padding: 10px;
        border: 1px solid red;
        margin: 10px;
        box-sizing: border-box; // How big is offsetWidth?
    }
</style>
<div id="box"></div>
Copy the code

Answer: 122px / 100px. Because: offsetWidth = (content width + inside margin + border), no margin. And then you add that to whatever the width is.

Margin longitudinal overlap problem

// What is the distance between AAA and BBB?
<style>
    p {
      font-size: 16px;
      line-height: 1;
      margin-top: 10px;
      margin-bottom: 15px;
    }
</style>

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
Copy the code

Answer: 15px. Margin-top and margin-bottom of adjacent elements overlap; The

of blank content also overlaps, equivalent to being ignored.

Margin negative problem

  • Margin = top left right bottom
  1. Margin-top and margin-left are negative values, and elements move up and left.
  2. Margin-right is a negative value, and the right element moves to the left, not affecting itself.
  3. Margin-bottom negative value, the bottom element moves up, not affecting itself.

BFC understanding and application

  • meaning
  1. Block Format context, Block format context.
  2. A separate rendering area where the rendering of internal elements does not affect elements outside the boundary.
  • Common conditions for BFC formation
  1. Float is not None.
  2. Position is absolute or fixed.
  3. Overflow is not visible.
  4. Display is flex or inline-block, etc.
  • Common application
  1. Clear the float.
<style type="text/css">
    .box {border: 1px solid red; } .box div {width: 100px; height: 100px; background-color: #ccc; } .box-left {float: left; } .box-right {float: left; }// Clear the float
    .bfc {
        overflow: hidden;
    }
</style>

<div class="box bfc">
    <div class="box-left"></div>
    <div class="box-right"></div>
</div>
Copy the code

Float layout and ClearFix

  • Float layout
  1. Grail layout.
  2. Twin wing layout.
  • Clearfix by hand (Clear float)
.clearfix:after {
    content: ' ';
    display: table;
    clear: both;
}
Copy the code

Flex layout

  • Common grammar
  1. Flex-direction: indicates the main axis direction.
  2. Flex-wrap: whether to wrap a line.
  3. Illustration-content: the alignment of the main axis.
  4. Align-items: alignment with the vertical axis (cross axis) of the main axis.
  5. Align-self: The alignment of child elements on the cross axes.
  • Flex draws a three-dot die
<style type="text/css">
    .box {
        width: 200px;
        height: 200px;
        border: 2px solid #ccc;
        border-radius: 10px;
        padding: 20px;

        display: flex; / / flex layout
        justify-content: space-between; // Align both ends
    }
    .item {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #Awesome!;
    }
    .item:nth-child(2) {
        align-self: center; // Center the second item
    }
    .item:nth-child(3) {
        align-self: flex-end; // The third item is tail-aligned
    }
</style>

<div class="box">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
</div>
Copy the code

positioning

What are absolute and relative based on

  • Relative: relative to oneself.
  • Absolute: Location based on the location element of the nearest layer.
  1. The positioning elements can be: body, fixed, relative, absolute…

Implementation of center alignment

  • Horizontal center
  1. Inline element: text-align: center.
  2. Block element: margin: Auto.
  3. Absolute element: left: 50% + margin-left negative.
  • Vertical center
  1. Inline element: line-height equals height.
  2. Absolute: top: 50% + margin-top negative.
  3. Absolute element: transform(-50%, -50%).
  4. Absolute: top, left, bottom, right = 0 + margin: auto.
<style type="text/css">
    .container {
        position: relative;
        border: 1px solid #ccc;
        margin: 10px;
        padding: 10px;
        height: 200px;
    }
    .block {
        width: 200px;
        height: 100px;
        background-color: #ccc;
    }

    .container-1 {
        text-align: center; // Align horizontally
        line-height: 200px; // Align vertically
        height: 200px;
    }
    .container-2 .block {
        margin: auto; // Align horizontally
    }
    .container-2 .block { // Disadvantages: must know the width and height
        position: absolute;
        left: 50%;  // Align horizontally
        margin-left: -100px;
        top: 50%; // Align vertically
        margin-top: -50px;
    }
    .container-3 .block { // Disadvantages: Some browsers do not support this method
        position: absolute; // Align vertically + align horizontally
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .container-4 .block {
        position: absolute; // Align vertically + align horizontally
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
</style>

<div class="container container-1">
    <span>Inline element inline</span>
</div>

<div class="container container-2">
    <div class="block">this is block</div>
</div>

<div class="container container-3">
    <div class="block">this is block</div>
</div>

<div class="container container-4">
    <div class="block">this is block</div>
</div>
Copy the code

Graphic style

Line-height inheritance problem

  1. A specific value, such as 30px, is inherited.
  2. Write ratio, such as 2 or 1.5, inherits the ratio.
  3. Write percentages, such as 200%, and inherit the calculated value.
<style type="text/css">
    body {
        font-size: 20px;
        // 1. Specific value
        line-height: 30px; // Inherit the result 30px
        / / 2. The proportion
        line-height: 2; 2 * 16 = 32px
        // 3. Percentage
        line-height: 200%; 20 * 200% = 40px
    }
    p {
        background-color: #ccc;
        font-size: 16px;
    }
</style>
<body>
    <p>This is a line of text</p>
</body>
Copy the code

Color value

  • Three primary colors: red, green and blue

R (00-ff), G (00-FF), b(00-FF)

  • Hexadecimal, representing the degree of saturation.

RGB (0-255, 0, 0-255-255);

  • Base 10 represents the degree of saturation.

responsive

What is rem

  • Rem is a unit of length.
  1. Px, the absolute unit of length, most commonly used.
  2. Em, a unit of relative length, relative to the parent element, not often used.
  3. Rem, a unit of relative length, relative to the root element, often used in reactive layouts.
<style>
    html {
        font-size: 100px;
    }
    div {
        font-size: 0.16rem; // font-size: 16px
    }
</style>
Copy the code

How to implement responsiveness

  • Media-query: sets the font size of the root element depending on the screen width. Then, rem calculates the length based on the relative units of the root element.
<style type="text/css">
    @media only screen and (max-width: 374px) {
        /* iphone5 or smaller size, set to iphone5 width (320px) ratio font size */
        html {
            font-size: 86px;
        }
    }
    @media only screen and (min-width: 375px) and (max-width: 413px) {
        /* iphone6/7/8 and iPhone X */
        html {
            font-size: 100px;
        }
    }
    @media only screen and (min-width: 414px) {
        /* iphone6p or larger size, scale to iphone6p width (414px) font size */
        html {
            font-size: 110px;
        }
    }

    body {
        font-size: 0.16rem;
    }
    #div1 {
        width: 1rem;
        background-color: #ccc;
    }
</style>

<body>
    <div id="div1">this is div</div>
</body>
Copy the code

CSS3

The new class

div:first-child{}
div:last-child{}
div:only-child{}
div:nth-child(2){}... :after,:before,:disabled,:checked...Copy the code

About CSS3 animation

// Move the X-axis 100px from left to right
transform: translateX(100px);

// Rotate 45 degrees clockwise
transform: rotate(45deg);

// Zoom in 2 times
transform: scale(2);

// Stretch and twist 45 degrees
transform: skew(45deg);

// Transition properties to make CSS animation transitions less abrupt
transition: 1s all ease;

// Animation effect
animation: theAni 1s linear infinite both;
@keyframes theAni {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    50% {
        transform: translateY(-20px) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 0; }}Copy the code