<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*calc是个函数他不是属性他可以去计算宽度与高度,这样我们的盒子属性就不是一定为死的*/
.outbox {
width: 500px;
height: 200px;
background-color: brown;
}
.innerbox {
/*width:150px;*/
/*width: calc(150px + 30px);*/
/*calc函数有重要的地方+两边必须用空格隔开不然会失去控制铺满整个父属性*/
width: calc(100% - 50px);
/*这里的100%是说这个子盒子本身的宽度是100%铺满父盒子的宽度*/
height: 200px;
background-color: blueviolet;
}
.tr {
width: 500px;
height: 300px;
background-color: darksalmon;
/*transition 的 参数顺序:要控制的变换属性(如果不控制就会瞬间完成)(宽/高/一起),
变换时间(变化开始到变化完成要经历的时间),运动曲线,变换延迟开始(启动与结束都会有等待时间)*/
/*transition: width 5s ease 0s;*/
transition: all 5s ease 0s;
/*all就是全部属性一起控制 5s内完成变化 简易曲线 变换等待0s 颜色也可以控制奥!*/
}
.tr:hover {
width: 1000px;
height: 500px;
background-color: red;
}
.strb {
width: 500px;
height: 20px;
border: 1px solid red;
border-radius: 12px;
margin-top: 50px;
padding: 1px;
}
.innerstrb {
width: 200px;
height: 100%;
border-radius: 12px;
background-color: tomato;
transition: all 2s ease 0s;
}
.innerstrb:hover {
width: 100%;
height: 100%;
border-radius: 12px;
background-color: red;
}
</style>
</head>
<body>
<p>calc函数使用</p>
<div class="outbox">
<div class="innerbox">
</div>
</div>
<p>transition(过渡使用)</p>
<div class="tr">
</div>
<div class="strb">
<div class="innerstrb"></div>
</div>
</body>
</html>