This is my first nuggets article, I hope you don’t mind. I am still a college student, just want to write out the knowledge they have learned, deepen their impression, record their growth process, this article is mainly to introduce HTML, CSS some small knowledge points.

  1. First of all, I would like to talk about the two small ‘bugs’ of margin merge and margin collapse.
  • Let me explain what a margin merge is: a margin merge is when two vertical margins meet, they form a margin. The height of the merged margins is equal to the greater of the two merged margins.
  • According to my personal understanding, margin merging is generally between brothers, while margin collapse is generally between father and son.
  • Let’s talk about margin merge first, without further ado, get right to the code.
    • Create two divs<div class="app"></div><div class="app2"></div>
    • The style is as follows.app { height: 60px; margin-bottom: 100px; background-color: #165; } .app2 { height: 60px; margin-top: 100px; background-color: #981; }

      When we add dot app tomargin-bottom: 100pxWhen,

      But when we add dot app2 to itmargin-top: 100px;“And found no change at all.

      This is the Margin merge,The larger margin value is selected as the final margin value between sibling elements.

  • Let’s talk about margin collapse.
  • Create two divs again<div class="app"> <div class="app2"></div> </div>

.app
margin-top: 100px;

.app2
margin-top:100xp;

.app2
margin-top:100px;
.app2
margin-top
To move
maigin

Look at the following error resolution: our bug was also resolved when we added border-top: 10px solid yellowgreen to the.app (added 10px just for easy viewing).

border
10px is 1px

transparent
Remember that we should not change the DOM structure without adding tags or styles that don’t make sense just to solve some problem

2. Before we get to the solution, let’s understand what BFC is. The BFC(Block formattingContext) is a separate rendering area that only block-level boxes participate in. It specifies how the internal block-level box is laid out and has nothing to do with the outside of the area. Simply put, you can change the rendering rules of an element using BFC. Doesn’t sound impressive.

Is BFC an attribute or element? It doesn’t seem to have much effect but it just solves this so-called bug, as if it was made for it. How do you trigger an element’S BFC? It’s easy. You trigger an element’s BFC almost all the time. . Here are a few CSS properties that you probably use every day:

Float element, float value other than None; 2. Position (Absolute, fixed); 3, display as one of the following inline-block, table-cell, table-caption; 4, Overflow values except visible (hidden, auto, scroll); ` ` `Copy the code

Familiar? The list above can trigger a box of BFC, simple as that. When we add display: inline-block to.app; When:

.app2
.app
.app
overflow: hidden
margin

overflow: hidden

Ok, margin collapse solved, then left margin merge, also apply the above BFC rules.

  • Each sibling element is placed inside a block-level element as a child element, and the render rule for its parent element is BFC.

But it’s not recommended. Why? Because you’re changing the structure of your HTML document, you don’t have to change it. So what do we do about it? I’m about to make a big move. Don’t freak you out. My solution: no solution! , right you did not see wrong do not solve! .

  • You just change the margin of one of them.

In fact, when you encounter a margin merge why do you want to set one child and one parent, and then change their rendering rules or even HTML structure, it takes a large value so you give it a large value. For example, if you want them to spacing is 200 px from top to bottom, you have to be a margin – top: 100 px, a margin – bottom: 100 px, you directly take a margin – top | margin – bottom: 200 px.

  1. Now let’s talk about clearing floats

Before floating effect see the picture below:

border

Remove the floating
clear: both

p
clear: both

Out of the document flow
::after { content: ""; clear: both; }
With the inline
after

float

3. Draw an isosceles trapezoid using HTML + CSS.

The CSS part:

.app {
        width: 0;
        height: 0;
        border: 100px solid # 561;
}
Copy the code

  • First, let’s draw a triangle.
    • Let’s look at the top, right, bottom and left of the border.

border 

border-top: 100px solid transparent;
        border-bottom: 100px solid # 561;
        border-left: 100px solid transparent; 
        border-right: 100px solid transparent; 
Copy the code

.app {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: # 561;
    }
    .app::after {
        content: "";
        position: absolute;
        right: -100px;
        border: 50px solid transparent;
        border-bottom-color: # 561;
        border-left-color: # 561;
    }
    .app::before {
        content: "";
        position: absolute;
        left: -100px;
        border: 50px solid transparent;
        border-bottom-color: # 561;
        border-right-color: # 561;
    }
Copy the code

  • When we set the font size, we set the height of the font.
  • It’s actually one elementline-heightIt can also determine the height of an element.
.app {
        width: 100px;
        color: #fff;
        background-color: # 561;
    }
Copy the code

line-height=100px

Summary: The above is my summary of some knowledge points I understand, I hope to help some people, but also let me deepen the understanding and understanding of these knowledge points, as a self-taught front of the college students hope that the leaders point out mistakes, discuss together. Thank you