一、元素的显示和隐藏
1.display 显示
display 设置或检索对象是否及如何显示。
display: none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思
特点: 隐藏之后，不再保留位置。
2.visibility 可见性
设置或检索是否显示对象。
visible: 对象可视
hidden: 对象隐藏
特点: 隐藏之后，继续保留原有位置。
二、元素的显示和隐藏案例
本来son1元素隐藏时，当鼠标悬停到father元素上时，使son元素显示display：block；隐藏display：none；
<style>
.father {
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid red;
}
.son1 {
width: 100px;
height: 100px;
background-color: red;
display: none;
}
/* 当鼠标悬停到father元素上时，使son元素显示 */
.father:hover .son1 {
display: block;
}
</style>
<body>
<div class="father">
<div class="son1">son1</div>
</div>
</body>
鼠标未放上去时：
鼠标悬停时：
三、结构性伪类选择器
1:nth-child(n)对指定序号的子元素设置样式(从前往后数)。参数可以使数字(1、2、3)、
li:nth-child(3) {
color: red;
}
2.odd奇数 even偶数
.nav li:nth-child(odd) {
color: green;
}
.nav li:nth-child(even) {
color: yellow;
}
3. 2n+1 2n 4n 4n+1 n : 从0开始
.nav li:nth-child(2n+1) {
color: blue;
}
4.:nth-of-type(n) 指定序号的同一种类型的子元素(从前往后数)。参数同上
.main p:nth-of-type(3){
color: pink;
}
<div class="main">
<span>你好啊</span>
<p>p元素1</p>
<p>p元素2</p>
<!-- 目标元素 <p>p元素3</p> 变成粉色-->
<p>p元素3</p>
<p>p元素4</p>
<p>p元素5</p>
</div>
四、过渡
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化，还是用逗号隔开。
如果想要所有的属性都变化过渡， 写一个all 就可以
transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒
运动曲线 默认是 ease
何时开始 默认是 0s 立马开始
transition: width 1s linear 3s;
五、2D变形
1.移动
translate(50px,50px);
使用translate方法来将文字或图像在水平方向和垂直方向上分别移动。
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
2.缩放
transform:scale(0.8,1);
/*可以对元素进行水平和垂直方向的缩放。*/
缩小的取值范围：[0-1) 1不变大也不缩小 扩大：大于1
transform: scale(0.5, 2);
如果书写一个值，x y 方向都是这个值
3.旋转
可以对元素进行旋转，正值为顺时针，负值为逆时针；
transform:rotate(45deg);
注意单位是 deg 度数
六、动画
1.定义动画
@keyframes 动画名称 {
from{ 开始位置 }
to{ 结束 }
}@keyframes 动画名称 {
0%
55%
....
100%
}
/* 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意*/
2.调用动画
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
animation-fill-mode: forwards(动画完成后,保持最后状态);
/* infinite 无限次 */
animation: move 3s linear infinite;
七、弹性布局
使wrap元素父元素成为弹性盒子 display: flex;
如果父元素宽度不够，子元素将自动进行缩小
如果父元素宽度剩余，子元素将按照自身大小进行显示
.wrap {
width: 600px;
height: 200px;
border: 1px solid red;
margin: 100px auto;
display: flex;
}
1.弹性盒子的方向
/*主轴的方问 */
row:水平 flex-direction: row;
column:垂直 flex-direction: column;
2.弹性盒子-换行
换行 flex-wrap: wrap;
3.弹性盒子-主轴上的对齐方式
justify-content属性
/* 默认：左对齐 */ justify-content: flex-start;
/* 右对齐 */ justify-content: flex-end;
/* 主轴上的对齐：居中 */justify-content: center;
/* 两端对齐 */ justify-content: space-between;
/* 两端相等对齐 */ justify-content: space-around;
4.弹性盒子-交叉轴上的对齐方式
align-items属性
.box {
align-items: flex-start | flex-end | center ;
}
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
扫一扫
2220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
