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