前言
继续css小知识点
正文
1. 居中布局
-
水平居中
1.行内元素: text-align: center
2。块级元素: margin: 0 auto
3.absolute + transform
4.flex + justify-content: center -
垂直居中
1.line-height: height
2.absolute + transform
3…flex + align-items: center
4.table -
水平垂直居中
1.absolute + transform
2.flex + justify-content + align-items
2.选择器优先级
!important > 行内样式 > #id > .class > tag > * > 继承 > 默认
选择器 从右往左 解析
3.去除浮动影响,防止父级高度塌陷
1.通过增加尾元素清除浮动
:after
: clear: both
2.创建父级 BFC
3.父级设置高度
例子
.container{
border: 1px solid #ccc
}
.box1{
width: 200px;
height: 200px;
background: blue;
}
.box2{
width: 300px;
height: 300px;
background: red;
}
.f1{
float: left;
}
.f2{
float: right;
}
<div class="container">
<div class="box1 f1">
</div>
<div class="box2 f2">
</div>
</div>
可以看到此时父级容器高度已经坍塌,只剩边框高度
1.添加新的元素 、应用 clear:both;
.clear{
clear:both;
}
<div class="container">
<div class="box1 f1">
</div>
<div class="box2 f2">
</div>
<div class="clear">
</div>
</div>
优缺点:代码少,容易理解,浏览器几乎都支持,出现的问题比较少,但缺点就是如果页面浮动浮动布局多的话,就要添加很多空div去清除浮动,不便优化。虽然这是常用的清除浮动方式,但不建议使用。
2.父容器使用overflow: auto;
.over-flow{
overflow: auto; zoom: 1;
}
<div class="container over-flow">
<div class="box1 f1">
</div>
<div class="box2 f2">
</div>
<!-- <div class="clear">
</div> -->
</div>
图略
优缺点:使用这种方法,必须定义width或者zoom,而且不能设置高度height,优点是代码少,缺点是不能使用position,否则超出的元素将会被隐藏。
3.父容器使用伪类:after跟zoom
.cleatfix {zoom:1;}
.cleatfix:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
<div class="container cleatfix ">
<div class="box1 f1">
</div>
<div class="box2 f2">
</div>
<!-- <div class="clear">
</div> -->
</div>
图略
优缺点:目前大多数大型网站都是使用这种方式清除浮动,浏览器兼容好,不会出现什么奇怪的问题。代码比较多,需要伪类:after跟zoom一起使用才能兼容所有主流浏览器。
4.css动画
-
transition: 过渡动画
1.transition-property: 属性
2.transition-duration: 间隔
3.transition-timing-function: 曲线
4.transition-delay: 延迟
4.常用钩子: transitionend -
animation / keyframes
1.animation-name: 动画名称,对应@keyframes
2.animation-duration: 间隔
3.animation-timing-function: 曲线
4.animation-delay: 延迟
5.animation-iteration-count: 次数
6.infinite: 循环动画
7.animation-direction: 方向
8.alternate: 反向播放
9.animation-fill-mode: 静止模式
10.forwards: 停止时,保留最后一帧
11.backwards: 停止时,回到第一帧
12.both: 同时运用 forwards / backwards
13.常用钩子: animationend
14.动画属性: 尽量使用动画属性进行动画,能拥有较好的性能表现 -
translate
1.scale
2.rotate
3.skew
4.opacity
5.color