前端,字体图标,盒子显隐,2d形变,盒子阴影
---恢复内容开始---
字体图标 1.将font-awesome-4.7.0文件夹放入项目内 2.在html head中连接 3.在body中导入盒子显隐
1.使用高度显隐
<p>---恢复内容结束---</p>
<style>
div{
width: 100px;
height: 100px;
background-color: cyan;
margin-top: 10px;
font:900 18px/100px "STsong";
text-align: center;
}
.div1{
position: relative;
}
.div2{
height:0;
overflow: hidden;
position: absolute;
transition: .3s;
}
/*此处不设置兄弟标签的话设置不了div2*/
.div1:hover ~ .div2{
height:100px
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
</body>
2.使用display显隐
.div2{
display: none;
position: absolute;
}
/*此处不设置兄弟标签的话设置不了div2*/
.div1:hover ~ .div2{
display: block;
}
</style>
3.使用opacity(透明度)
.div2{
opacity: 0;
position: absolute;
transition: 0.3s;
}
/*此处不设置兄弟标签的话设置不了div2*/
.div1:hover ~ .div2{
opacity: 1;
}
总结:display消失的时候不占位,显示的时候占位
opacity消失,显示都占位
height显示的时候占位
height和opacity有动画效果,display没有
overflow
解决: 超出盒子规定的显示区域外的内容的处理方式
/*将超出规定区域的内容隐藏, 隐藏掉的内容无法直接查看*/
/*overflow: hidden;*/
/*不超出正常，超出滚动 两种不同的处理方式来处理超出规定区域的内容*/
/*overflow: auto;*/
/*一直以滚动方式处理超出规定区域的内容*/
/*overflow: scroll;*/
伪类边框
设计边框=>在页面中不占位=>让其定位处理=>脱离文档流=>不占位层级结构复杂
设计一个不占位的边框=>伪类:before|after
.box {
width: 200px;
height: 200px;
background-color: red;
/*给伪类边框提供定位参考系*/
position: relative;
}
.box:before {
content: "";
/*上下边框*/
width: 180px;
height: 1px;
background-color: green;
/*控制边框位置*/
position: absolute;
bottom:0px;
left: 10px;
}
#只能设置两个伪类边框
盒子阴影
box-shadow: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色, ...;
一个盒子可以拥有多套阴影
2d形变
# 形变参考点
transform-origin: x轴坐标 y轴坐标
# 形变属性
transform: rotate() translate() scale();
# 旋转角度(deg) 偏移距离(px) 缩放比例(无单位)