css 居中消除浮动动画

晨梦天旭

于 2019-03-06 21:39:05 发布

阅读量482

点赞数

分类专栏： css 文章标签：居中去除浮动动画

本文链接：https://blog.csdn.net/qq_40826764/article/details/88258093

版权

本文详细介绍了CSS中的居中布局方法，包括水平居中、垂直居中以及水平垂直居中，同时讲解了如何消除浮动影响防止父级高度塌陷的三种方法。此外，还深入探讨了CSS动画，包括transition和animation的关键属性，以及性能优化建议。

摘要由CSDN通过智能技术生成

前言

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