css 居中消除浮动动画

前言

继续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

css 居中 消除浮动 动画

前言

正文

猜你喜欢

css 居中消除浮动动画