css的BFC高度塌陷和居中

前端段

已于 2024-04-13 22:29:09 修改

阅读量182

点赞数

分类专栏：笔记文章标签： css css3 html

于 2021-03-26 18:58:40 首次发布

本文链接：https://blog.csdn.net/hkduan/article/details/112983971

版权

笔记专栏收录该内容

28 篇文章 1 订阅

订阅专栏

居中的方法：https://www.jb51.net/article/178250.htm

一、css外边距重叠的解决方法
两个或多个块级盒子的垂直相邻边界会重合。
1）兄弟级
当一个元素出现在另一个元素上面，也就是两个垂直外边距相遇时(只有垂直的才会发生)
1.调高margin
2.padding

父子级元素当一个元素包含在另一个元素中时，如果外面大的那个元素没有内边距或者边框，那么这两个元素的上外边距或下外边距也会发生合并

解决方法：
1.给父级加边框属性
2.给父级加padding代替margin
3.给父级加overflow:hidden
4.给子级或父级一方添加浮动float:left;
5.给子级或父级一方添加绝对定位position: absolute;
6.给子级或父级一方添加display:inline-block;

二、高度塌陷
子div float，父级容易高度塌陷。
overflow:hidden
或者伪元素 :after{clear:both}
万能法：
:after{
content:“";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;}

三、高度上下左右居中
从布局的发展开始，table,position,float,flex,grid
1.table,1种
父元素设置display:table-cell，并设置vertical-align:middle
然后设置子元素的margin:auto

2.position布局3种 (2-4)
父级relative 子级absolute
son {position: absolute; top: 0; bottom:0; left: 0; right: 0; margin: auto}

<style>
    /* * {margin: 0; padding: 0; box-sizing: border-box;} */
    .father {position: relative;}
    .son {position: absolute; top: 0; bottom:0; left: 0; right: 0; margin: auto}
</style>
<body>
    <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
        <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
    </div>
</body>

3 50%减去 div宽度或者高度的50%

<style>
    /* * {margin: 0; padding: 0; box-sizing: border-box;} */
    .father {position: relative;}
    .son {position: relative; top:50%;margin-top:-50px;left:50%;margin-left:-50px}

</style>
<body>
    <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
        <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
    </div>
</body>

4 css的transform: translate(-50%,-50%)

top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

5.flex，2种(5-6)
flex margin:auto
.father {display: flex;}
.son {margin: auto}

6
.parent{
display:flex;
justify-content:center;
align-items:center;
}

7.grid(7-8)
margin:auto
.father {display: grid;}
.son {margin: auto}

8
.parent{
display:grid;
justify-content:center;
align-items:center;
}

<style>
    * {margin: 0; padding: 0; box-sizing: border-box;}
    .father {height:500px; text-align: center; position:relative}
    .son { 
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<body>
    <div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;">
        <div class="son" style="width: 100px; height: 100px;background: rgb(2, 70, 97);"></div>
    </div>
</body>

<style>
    /* * {margin: 0; padding: 0; box-sizing: border-box;} */
    .father {
        display: table-cell;
        vertical-align:middle;
        /* text-align:center; */
    }
    .son {margin: auto}
</style>
<body>
    <div class="father" style="width: 1000px; height: 400px; border: 1px solid rebeccapurple;">
        <div class="son" style="width: 100px; height: 100px;background: palegreen;"></div>
    </div>
</body>

（3）wrap-reverse：换行，第一行在下方。
在这里插入图片描述

1.3 flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: ;

2子级6个属性：
2.1 flex
flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
2.2 flex-grow
2.3 flex-shrink
2.4 flex-basis

固定宽度后，不可压缩

2.5 align-self

2.6 order
order: 排序编号
在这里插入图片描述

在这里插入图片描述

前端段

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
css的BFC高度塌陷和居中

一、css外边距重叠的解决方法两个或多个块级盒子的垂直相邻边界会重合。1.外层元素padding代替2.内层元素透明边框 border:1px solid transparent;3.内层元素绝对定位 postion:absolute:4.外层元素 overflow:hidden;5.内层元素加float:left;或display:inline-block;6.内层元素padding:1px;二、...
复制链接

扫一扫