1. 让图片填满一个固定宽高的div且图片不变形:
css:
.div{
width:100px;
height:100px;
}
.div1 img{
width:100%;
height:100%;
object-fit:cover;//控制图片不变形的样式
}
2. 解决父元素的第一个子元素的margin-top越界的问题：
问题如下图：
主要原因：div3是div2的第一个子元素！
解决方法：
css:
div2:befor{
content:" ";//有空格
display:table;
}
3. 解决所有的子元素浮动后父元素高度为0（一个大div里有很多小div以浮动排列，大div就会没有高度，导致排版出现问题）
解决方法：
css：
<style>
.a:after{
content: " ";
display: table;
clear: both;
}
.b{
width:100px;
height: 100px;
float: left;
}
.c{
clear: both;
}
.d{
width: 200px;
height: 200px;
background: greenyellow;
}
</style>
html：
<div class="a">//设置它的：after（...）
<div class="b">我是div1</div>
<div class="b">我是div2</div>
<div class="c"></div>//加入一个空div清除浮动
</div>
<div class="d"></div>
综合2和3，就有了bootstrap里的：after和：before。
4. css设置垂直居中：
css:
<style>
.a{
position: relative;
width:300px;
height: 300px;
background: yellow;
}
.b{
width: 100px;
height: 100px;
background: pink;
position: absolute;
top:50%;//设置top为父元素的50%高度
transform:translatey(-50%);//向上偏移自身的50%高度
}
</style>
html：
<div class="a">
<div class="b">我是div1</div>
</div>
5. css设置鼠标的显示类型：
css:
cursor: pointer;//一只手
cursor: wait;//一只表或是沙漏
cursor: help;//一个问号或气球
cursor: text;//文本
cursor: crosshair;//十字线
cursor: move;//可被移动
6. 实现响应式网页的必要知识：css3媒体查询
css:
<style>
@media screen and (min-width: 990px){//该代码只在媒体查询为真的情况下执行（屏幕最小宽度大于990px时执行）
div{
width:300px;
height: 300px;
background: yellow;
}
}
</style>