前端补充

 

 

 

 

一、清除浮动

1、解决子级margin-top后 父级塌陷问题，

父级加overflow：hidden；或 去掉子级margin-top给父级加padding-top属性

2、垂直两个div 上面margin-bottom，下面margin-top，值会合并 只取较大值显示。

*{
padding:0 0;
margin:0 auto;
border-sizing:border-box; //盒子模型內减模式
}
ul,li{
list-style:none;
}

//单伪元素法清除浮动
.clearfix::after{
content:"";//伪元素after,before必须跟content一起使用才有效
display:block;
clear:both;
}

//双伪元素清除浮动(推荐)
.clearfix::after,
.clearfix::before{
content:"";
display:table;
}
.clearfix::after{
clear:both;
}

　　

二、flex布局

<style>
//加了flex的叫弹性容器
.box{
display:flex;
height:300px;
}
//弹性盒子：沿着主轴（默认横向）排列
.box div{
width:200px;
}
</style>

　　

 

 

 

 

 

 

 

三 、图片属性

banner

object-fit:cover 宽高等比例缩放，超过后裁剪

background-size:cover 背景图等比例缩放

字体图标用法