阅读 352

水平垂直居中和盒子塌陷

前言

最近已经结束了项目的学习,因为里实习的时间越来越近,我也开始看一些面试题,这次主要是学习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;
}
复制代码

效果图 image.png

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

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

效果图

image.png

盒子塌陷(第二种情况)

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

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;
}
复制代码

效果图

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

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>

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

效果图

image.png

总结

文章分类
前端
文章标签