0.css
- 1 display: none/block visibility: hidden/visible
display: none;隐藏元素 不保留位置
visibility: hidden; 隐藏元素 保留位置
- 2.overflow: hidden;
hidden | scroll | auto (默认)
hidden 超出盒子大小的部分 隐藏起来
scroll 出现滚动条
auto 和scroll 类似
0.1 盒模型
- box-sizing:border-box (width=content+padding+border) 常用
我们设置的width、heigh是总宽度（实际占用的大小）；如果padding或者border增加；那么content就会缩小
- box-sizing:content-box （width=content） 默认
我们设置的width、heigh是content（内容占用的大小）；如果padding或者border增加；那么盒子模型也会变大
0.2 原生
1.获取元素
document.getElementById();//id名，在实际开发中较少使用，（单个元素）
document.getElementsByTagName();//标签名 （arr）
document.getElementsByClassName();//类名 （arr）
例子：获取包含 "example" 和 "color" 类名的所有元素:多个类名使用空格分隔
let x = document.getElementsByClassName("example color");
2.获取元素宽高
el.style.width
window.getComputedStyle(ele).width
1. 水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aniaml</title>
<!-- <script src="./js/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 20px;
}
/* 方法1 父盒子设置 flex 不管子盒子 */
.div1 {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
background-color: gray;
}
/* 方法2 方法3 子盒子定位 position: absolute */
.div2 {
width: 300px;
height: 300px;
background-color: pink;
position: relative;
}
.div2Son {
width: 150px;
height: 20px;
position: absolute;
background-color: red;
text-align: center;
/* 方法2 */
/* top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto; */
/* 方法3 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="div1">
<div>我需要水平垂直居中</div>
</div>
<div class="div2">
<div class="div2Son">我是第二种方式</div>
</div>
</body>
</html>
2.transform 转型 包括 (移动 translate 旋转 缩放)
2.1 Vue中动画 主要是类之间的切换 (遵守你一个原则 谁动画 就把transition加到谁身上 )
transition 过渡方式 transition: all 1s ease;
<template>
<div class="home">
<div>
<input type="button" value="切换位置" @click="starAnimal">
</div>
<div class="div1" :class="[show ? 'donghuaClass' :'donghuaClass2' ]">1</div>
</div>
</template>
<script>
export default {
data(){
return{
show:false
}
},
methods:{
starAnimal(){
this.show = !this.show
console.log('star animals')
}
}
}
</script>
<style lang="stylus" scoped>
.div1
width 200px
height 200px
background pink
// div1 自身的过渡方式 下面是transform的种类
transition: all 1s ease;
.donghuaClass
transform translate(100px,100px)
.donghuaClass2
transform translate(0px,0px)
</style>
案例2 行内绑定样式 旋转
// html
<div>
<input type="button" value="旋转" @click="xuanZhuan">
</div>
<div class="div2" :style="{transform:'rotateZ('+jiaodu+'deg)'}">2</div>
// js
xuanZhuan(){
this.jiaodu += 90
}
// css
.div2
width 200px
height 200px
background red
transition: all 1s ease;
3.箭头
伪类 或者 子div
<div class="fuDiv" />
<div class="fuDiv">
<div class="son" />
</div>
.fuDiv
width 100px
height 50px
border 1px solid pink
position relative
margin-left 20px
position relative
// &:hover::after
// transform rotate(225deg)
// // 谁动 给谁加 transition
// &::after
// content ''
// width 20px
// height 20px
// position absolute
// top 8px
// right 10px
// border-right 1px solid blue
// border-bottom 1px solid blue
// transform rotate(45deg)
// transition all 0.6s
&:hover .son
transform rotate(225deg)
.son
width 20px
height 20px
position absolute
top 8px
right 10px
border-right 1px solid blue
border-bottom 1px solid blue
transform rotate(45deg)
transition all 0.6s
