preface

Recently, I have finished the study of the project. As the internship time is getting closer and closer, I also started to read some interview questions. This time, I mainly studied the knowledge of CSS and shared some content about horizontal vertical center and box collapse

The body of the

Margin overlap

Solution to prevent margin overlap:

The outer element padding is replaced

Border :1px solid transparent;

Inner element postion absolute:

The outer element overflow:hidden;

Float :left; Or display: inline – block;

Inner element padding:1px;

Box collapse (Case 1)

The HTML code

<body>
    <div id="fat">
        <div id="son"></div>
    </div>
/body>
Copy the code

CSS code

#fat{
    width: 800px;
    height: 400px;
    background-color: #0074D9;
}
#son{
    width: 400px;
    height: 200px;
    background-color: #000066;
    margin-top: 100px;
}
Copy the code

rendering

With the style above, the child box is theoretically 100px away from the parent box, but the parent box moves down with the child box. So how do we solve this? There are two ways to solve the collapse problem, right

The first kind of overflow: hidden; Boder border:1px solid transparentCopy the code

rendering

Box collapse (second case)

When writing a project style without adding a height to the parent box and using a float in the child element, the box collapses because it falls out of the document flow

The HTML code

<body>
    <div class="fat">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
Copy the code

CSS code

.fat { width: 100%; border: 1px solid #000000; }. Left {height: 200px; width: 200px; background-color: #000066; float: left; } .right { height: 200px; width: 200px; background-color: #008080; float: right; }Copy the code

rendering

The child box is separated from the document flow, the parent element has no height, no content to support the parent element. Knowing the cause, we can solve the problem in a variety of ways

If the child element is not fixed, this method may not work. Height: 100px; 2. Overflow: hidden; <div id="box"></div> #box{clear: both; Fat ::after{clear: both; fat::after{clear: both; content: ""; width: 0; height: 0; display: block; visibility: hidden; }Copy the code

Pseudo class selector tips

We’ll see one colon or two colons in the pseudo-class selector, what’s the difference?

So let me just summarize:

Pseudo-classes are represented by a colon, while pseudo-elements are represented by two colons. After above is a pseudo-element, and if a pseudo-element already exists in CSS2, its single and double colons are written the same ::before and :before.Copy the code

box-sizing

Personally, I think this knowledge point is very useful when doing projects

The HTML code

<body>
    <div id="box"></div>
</body>
Copy the code

CSS code

<style type="text/css"> #box{ width: 100px; height: 100px; background-color: skyblue; border: 10px solid #000; </style> < span style = "box-sizing: border-box;Copy the code
box-sizing: border-box; When we add box-sizing, it squeezes the Content width so that the overall width is 100px, corresponding to the border, padding, and marginCopy the code

Horizontal and vertical center

In fact, there are many methods, there are many methods available on the Internet, here are some common HTML code

<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>
Copy the code

CSS code

<style type="text/css"> .wrap { width: 300px; height: 300px; background-color: skyblue; /* 1. */ display: flex; align-items: center; justify-content: center; /* 2. */ display: table-cell; text-align: center; vertical-align: middle; /* 3 */ position: relative; /* 4 */ position: relative; } .box { width: 100px; height: 100px; background-color: #006666; /* 2 */ display: inline-block; /* 3 */ position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; /* 4 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style> < span style = "margin: 0pt 0pt 0.0001pt 0.0001pt; padding: 0pxCopy the code

rendering

conclusion

There is no