前言

最近已经结束了项目的学习，因为里实习的时间越来越近，我也开始看一些面试题，这次主要是学习CSS方面的知识，分享一些水平垂直居中和盒子塌陷内容

正文

盒子塌陷（第一种情况）

html代码

<body>
    <div id="fat">
        <div id="son"></div>
    </div>
/body>
复制代码

css代码

#fat{
    width: 800px;
    height: 400px;
    background-color: #0074D9;
}
#son{
    width: 400px;
    height: 200px;
    background-color: #000066;
    margin-top: 100px;
}
复制代码

效果图

通过上面的样式，理论上是让子盒子距离父盒子100px的，但是父盒子随着子盒子一起向下移动了。那么如何解决呢，有两种方法，都可以解决塌陷问题

第一种 overflow
    overflow: hidden;
第二种 boder
    border:1px solid transparent
复制代码

效果图

盒子塌陷（第二种情况）

在写项目样式的时候，没有给父盒子添加高度，而子元素中又使用了浮动，就会出现盒子塌陷问题，因为脱离了文档流

html代码

<body>
    <div class="fat">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
复制代码

css代码

.fat {
    width: 100%;
    border: 1px solid #000000;
    //这里用border可以更好的看出来，平时可能用的bgc更多，所以一直看不出来
}
.left {
    height: 200px;
    width: 200px;
    background-color: #000066;
    float: left;
}
.right {
    height: 200px;
    width: 200px;
    background-color: #008080;
    float: right;
}
复制代码

效果图

子盒子脱离了文档流，父元素没有高度，没有内容可以撑开父元素。知道了原因，那么我们可以有多种方法来解决这个问题

1.没有高度就给个高度，不过需要你去测量这个高度，如果子元素是不固定的，那么这个方法可能不行
    height: 100px;
2.通过overflow也可以解决
    overflow: hidden;
3.在父元素.fat下在增加一个div
    <div id="box"></div>
    #box{
        clear: both;//清除浮动
    }
4.通过伪类选择器,效果其实等同于第三种，两种的本质一样
    .fat::after{
        clear: both;
        content: "";
        width: 0;
        height: 0;
        display: block;
        visibility: hidden;
    }
复制代码

伪类选择器小知识点

伪类选择器中我们会看到一个冒号或者两个冒号，它们的区别是什么？

这里我直接做个总结：

伪类用一个冒号来表示，而伪元素则用两个冒号来表示。而上面的after是伪元素，
同时如果css2中已经有的伪元素，那么它们的单冒号和双冒号的写法是一样的，::before和:before。
复制代码

box-sizing

这个知识点，个人认为在做项目的时候挺有用的

HTML代码

<body>
    <div id="box"></div>
</body>
复制代码

CSS代码

<style type="text/css">
    #box{
        width: 100px;
        height: 100px;
        background-color: skyblue;
        border: 10px solid #000;
        当我们加上border、padding、margin时，盒子整体宽度高度会变成120px
    }
</style>
复制代码

        box-sizing: border-box;
        当我们加上box-sizing,他会挤压content宽度，使整体宽度为我们设置的宽度高度100px,
        对应border、padding、margin都有效
复制代码

水平垂直居中

其实方法有挺多的，网上提供了许多方法，这里就提几种常见的
HTML代码

<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>
复制代码

CSS代码

<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>

建议的话，就是上机实验，印象更深刻，也更好理解
复制代码

效果图