CSS chapter of front-end knowledge combing of "CSS deep pointing North" (special chapter of mid autumn National Day)

Know browser

component

It's possible that when we talk about the components, the partners are directly confused. To be frank, don't be afraid, there are more confused people behind!

The composition is divided into two parts: shell and kernel (the kernel is the core part, which represents the technical means used by the browser, and the shell is the interface seen by our users)

For example, do you know the larger browser manufacturers?

shell kernel
Google Chrome webkit (developed by Google and apple safari) / blink (Google separates Technology)
safari webkit
firefox gecko
IE trident
opera (currently belongs to 360 and Kunlun world wide) presto

=====Manual boundary=====

  • 360
  • QQ
  • Roam
  • Cheetah
  • Global
  • Sogou
  • ...

The meaning of the dividing line: the lower part of the interface is only a means on the shell, and there is no exclusive kernel. If we answer, just answer the part on the dividing line.

kernel

Including rendering engine and JS engine

Rendering engine, literally, is to render our page. You can roughly understand it. This article explains JS engine here. JS engine didn't exist in the early days. It is responsible for JS parsing through synchronous rendering engine. The performance of the rendering engine is limited, so the ability of JS to parse code is relatively low, and more than 100 lines of code may crash. Therefore, the introduction of JS engine greatly increases the optimization of JS parsing, and the speed is quite fast.

The more famous is the V8 engine launched by Google, which has made a lot of optimization for JS parsing. Only one word, Google, cow!

Understanding CSS

cascading style sheet

selector

<!-- inline style  -->
<div style="width: 100px; height: 100px;"></div>
<style type="text/css">
  /* Internal style */
  div{
    width: 100px;
    height: 100px;
    background-color: #000;
  }
</style>
<!-- External style -->
<link rel="stylesheet" href="./index.css">

Weight priority problem

Check the following code. What color will it display?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Basic style</title>
  <!-- External style -->
  <link rel="stylesheet" href="./index.css">
  <style type="text/css">
  /* Internal style */
    div{
      background-color: blue;
    }
  </style>
</head>
<body>
  <div style="background-color: red;"></div>
</body>
</html>

External style index CSS file code is as follows:

div{
  width: 100px;
  height: 100px;
  background-color: yellow;
}

The answer is red

Weight: inline style (less used, you can use display: none to cache data) > internal style sheet (for general testing) > external style sheet (mainly used)

Priority of selector

! Important > ID > class | attribute > label >*

Group selector

Clears the outline of the input box

input,
textarea{
  outline: none;	
}

Browser matching rules for parent-child selectors

Bottom to top, right to left

button

button{
  border: none; // Remove the border of the button
  color: white; // Change button font color
  background-color: red; // Change button color
  font-size: 12px; // Change font size
}

Single line text truncation and ellipsis display

div{
  width: 200px;
  height: 22px;
  border: 1px solid #000;
  white-space: nowrap; /*nowrap */
  overflow: hidden; /*Hidden beyond*/
  text-overflow: ellipsis; /*Ellipsis on hidden parts*/
}

The difference between visibility:hidden and display:none

visibility:hidden preserves the HTML document space occupied by hidden elements

display:none does not reserve the HTML document space occupied by hidden elements

Text alignment of inline blocks and inline elements

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text alignment of inline blocks and inline elements</title>
  <style type="text/css">
    .block{
      display: inline-block;
      width: 150px;
      height: 100px;
      border: 1px solid #000;
      vertical-align: middle; /*alignment*/
    }
  </style>
</head>
<body>
  <span class="block">123</span>
  <span>123</span>
</body>
</html>

Method for centering multiple lines of text in container

1. Set the display of the container to table
2. Set the display of the text in the container to table cell (table cell attribute)
3. Set the vertical align of the text in the container to middle

Default spacing between inline block elements

Set the attribute on the parent element of the block in the row where the margin is generated: font size: 0px;

Set the value of word spacing on the parent element to an appropriate negative value

Horizontal and vertical center: the outer box is fixed with the inner margin, and the width and height of the inner box are 100%

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal and vertical centering mode 1</title>
  <style type="text/css">
    .box {
      width: 100px;
      height: 100px;
      padding: 30px;
      border: 1px solid #000;
    }
    .box .box1 {
      width: 100%;
      height: 100%;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box1"></div>
  </div>
</body>
</html>

Browser body default margin

IE8 - > up and down 16px, left and right 8px
IE7 - > up and down 15px, left and right 11px

location

Floating flow

Floating stream, block level element cannot recognize the position of floating stream element. Positioning position creates a new layer.

Inline, inline block, floating, overflow hiding and plain text can identify the location of floating elements, except block level elements.

After float, the element becomes an inline block level element

Clear floating mode 1

Because after the floating flow is set, the block level elements cannot recognize the position of the floating flow elements, and the problem of high collapse will naturally occur. You can clear it in the following way. You can set clear: both through a block element, but this method is not particularly good. An additional element is added.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clear floating mode 1</title>
  <style type="text/css">
    .box {
      width: 200px;
      border: 1px solid #000;
    }

    .box .inner-box{
      float: left;
      width: 100px;
      height: 100px;
    }

    .box .inner-box.box1{
      background-color: green;
    }

    .box .inner-box.box2{
      background-color: orange;
    }

    .clearfix{
      clear: both;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="inner-box box1"></div>
    <div class="inner-box box2"></div>
    <p class="clearfix"></p>
  </div>
</body>
</html>

Pseudo class

Look directly at the following example to see how pseudo classes are used

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pseudo class simple use</title>
  <style type="text/css">
    p:before{
      content: "Chocolate";
    }

    p:after{
      content: "Blog!";
    }
  </style>
</head>
<body>
  <p>like</p>
</body>
</html>

Among them, the attribute value of content must be added!

Clear floating mode 2

Use pseudo elements to clear floats by adding a block level and setting clear:both.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clear floating mode 2</title>
  <style type="text/css">
    ul::after,
    div::after{
      content: "";
      display: block;
      clear: both;
    }

    .box {
      width: 200px;
      border: 10px solid #000;
    }
    /* The following method can also be used, but it is not as good as setting div directly above */
    /* .box::after{
      content: "";
      display: block;
      clear: both;
    } */

    .box .inner-box{
      float: left;
      width: 100px;
      height: 100px;
    }

    .box .inner-box.box1{
      background-color: green;
    }

    .box .inner-box.box2{
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="inner-box box1"></div>
    <div class="inner-box box2"></div>
  </div>
</body>
</html>

Clear floating mode 3

The following is the best way to clear the float. Write a class clearfix directly, and then add this class directly to the parent element if you need to clear the float.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clear floating mode 3</title>
  <style type="text/css">
    .clearfix::after{
      content: "";
      display: block;
      clear: both;
    }

    .box {
      width: 200px;
      border: 10px solid #000;
    }

    .box .inner-box{
      float: left;
      width: 100px;
      height: 100px;
    }

    .box .inner-box.box1{
      background-color: green;
    }

    .box .inner-box.box2{
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="box clearfix">
    <div class="inner-box box1"></div>
    <div class="inner-box box2"></div>
  </div>
</body>
</html>

content realizes dynamic data

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>content Dynamic data acquisition</title>
  <style type="text/css">
    p::before{
      content: attr(data-username);
    }
  </style>
</head>
<body>
  <p data-username="Chocolate">,Welcome to visit!</p>
</body>
</html>

CSS3

Box shadow

Box shadow: horizontal position (must) vertical position (must) blur distance shadow size (equivalent to an increment in horizontal and vertical) shadow color type of shadow

Compatibility writing

-webkit-box-shadow: 0 0 10px;
-moz-box-shadow: 0 0 10px;
-o-box-shadow: 0 0 10px;

Border fillet

Pure circle 50% width and height

Semicircle angle height/2 + px

When you encounter the problem of prominent image coverage, you can use overflow: hidden to solve it.

The zoom of the background image of the website cover does not change the scale

.banner{
  width: 100%;
  height: 600px;
  background-color: orange;
  background-image: url(img/xxx.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

The background image does not change with the scroll bar

Background attachment has two attribute values: scrool (the default value, which will change with the scroll bar) and fixed (which will not change with the scroll bar)

html{
  height: 100%;
  background-color: orange;
  background-image: url(img/xxx.jpg);
  background-size: 100% 100%;
  background-attachment: fixed;
}

Common writing templates of logo company

There is a remedy to solve the problem that css cannot be loaded due to network problems

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>logo Company common writing template</title>
  <style type="text/css">
    h1{
      margin: 0;
    }

    .logo{
      width: 142px;
      height: 58px;
    }

    .logo h1 .logo-hd{
      display: block;
      width: 142px;
      height: 0;
      padding-top: 58px;
      background: url(img/logo.png) no-repeat 0 0/142px 58px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="logo">
    <h1>
      <a href="" class="logo-hd">TaoBao</a>
    </h1>
  </div>
</body>
</html>

BFC features

  • It is a bit like a completely independent container, which will not affect the layout of external elements.
  • It belongs to the category of ordinary flow

How to make an element BFC

  • body itself is a BFC element
  • Defined float: left / right
  • position: absolute / fixed
  • display: inline-block / table-cell / flex
  • overflow: auto / hidden / scroll

What problem has BFC solved

What problem does it solve?

  • margin merge problem
  • Height collapse problem
  • margin collapse problem

Let's explain the problem of margin collapse. The following code shows that when we set margin top in the child box, we will find that we will go down with the parent box.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC: margin Collapse problem</title>
  <style type="text/css">
    .box1{
      width: 300px;
      height: 300px;
      background-color: #000;
    }

    .box2{
      width: 50px;
      height: 50px;
      margin: 0 auto;
      margin-top: 100px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>
</html>


The solution is to use the BFC feature

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC: margin Collapse problem</title>
  <style type="text/css">
    .box1{
      /* Optional mode */
      /* border: 1px solid transparent; */

      /* Solution, form BFC */
      /* display: inline-block; */
      /* display: table-cell; */
      /* overflow: hidden; */
      /* float: left; */
      width: 300px;
      height: 300px;
      background-color: #000;
    }

    .box2{
      width: 50px;
      height: 50px;
      margin: 0 auto;
      margin-top: 100px;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>
</html>

CSS writing order

  • display position float clear
  • Self attribute: width height margin padding border background
  • Text attribute: color font text align vertical align white space

Article reference

The most detailed and complete "CSS foundation + Advanced + actual combat" depth guide in the whole network

Thank Mr. Ono for his detailed explanation of CSS and call the teacher. It is suggested that you can take a look at it in combination with the video. After reading it, you will suddenly realize it!

last

The output of the article is not easy. I hope all my friends will support it!

Previous selections:

Little lion front-end note warehouse

LeetCode javascript: LeetCode's JavaScript problem solving warehouse, front-end problem brushing route (mind map)

Partners can submit their own problem-solving codes in Issues, 🤝 Welcome to Contributing, punch in and swipe questions, Give a ⭐ ️ if this project helped you!

Visit Chaoyi blog It is convenient for children to read and play~

Learning is like sailing against the current. If you don't advance, you will fall back

Tags: css3 html5 html css

Posted by xbase on Fri, 13 May 2022 15:22:54 +0300