居中的方法: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>
四.flex属性
https://www.runoob.com/w3cnote/flex-grammar.html
1父级flex5个属性
1.1 flex-direction:row | row-reverse | column | column-reverse;
1.2 flex-wrap:nowrap | wrap | wrap-reverse;// 超出长度是否换行
nowrap(默认):不换行。
(2)wrap:换行,第一行在上方。
(3)wrap-reverse:换行,第一行在下方。
1.3 flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
flex-flow: ;
1.4 justify-content:center;
justify-content: flex-start | flex-end | center | space-between | space-around;
1.5 align-items:center;
align-items: flex-start | flex-end | center | baseline | stretch;
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: 排序编号