CSS总结（上）

1、选择器（通配符，标签，类，id）

• 文章详情：https://blog.csdn.net/weixin_45065754/article/details/123948215

2、层级选择器（组合、层级、伪元素、伪类）

• 文章详情：https://blog.csdn.net/weixin_45065754/article/details/123948321

3、选择器权重（id，class，element）

• 文章详情：https://blog.csdn.net/weixin_45065754/article/details/123949152

4、引入css方法（内嵌、嵌入、外部）

• 文章详情：https://blog.csdn.net/weixin_45065754/article/details/123949542

5、盒子模型（标准和IE）

• 文章详情：https://blog.csdn.net/weixin_45065754/article/details/123955002

6、清除浮动布局(clear)

• 6.1、Html元素分类：

• 6.2、display属性：

• 6.3、元素浮动布局缺点：

脱离文档流，不占位，导致浮动元素跟后面的元素重叠

• 6.4、解决方法：

清除浮动，在浮动元素的容器中添加clear类,在伪元素样式中添加clear:both清除浮动属性

关键代码：

    /* 2、设置清除浮动样式 */
    .clear::before,
    .clear::after {
      content: '';
      display: block;
      clear: both;
    }

• 文章详情：https://blog.csdn.net/weixin_45065754/article/details/123960094

7、CSS定位（绝对、相对、固定）

• 水平垂直居中：

    .box {
      width: 500px;
      height: 500px;
      position: relative;
      /* 
      //垂直居中
      margin: 0 auto; 
      //水平居中 
      top: 50%;
      transform: translateY(-50%); 
      */
      top: 50%;
      left: 50%;
      /* 往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置 */
      transform: translate(-50%, -50%);

• 回到顶部：

  <button><a href="#" class="to_top">返回顶部</a></button>
<style>
    .to_top {
      position: fixed;
      right: 100px;
      bottom: 100px;
    }
</style>

• 文章详情：https://blog.csdn.net/weixin_45065754/article/details/123961042

8、HTML5新增标签（布局、媒体、画布、矢量）

• 8.1、什么是HTML5

HTML5是超文本标记语言（html）的第五次重大修改，可以简单的理解就是html的第五个版本

• 8.2、HTML5新特性

• 8.3、HTML5布局元素

• 8.4、HTML5媒体元素

• 文章详情：https://blog.csdn.net/weixin_45065754/article/details/123964515

9、CSS3新增样式（边框圆角、阴影、形变）

• 9.1、边框圆角：

• 9.2、边框阴影：

box-shadow值：x轴、y轴、模糊半径、颜色

• 9.3、形变（旋转、缩放、位移）：

• 文章详情：https://blog.csdn.net/weixin_45065754/article/details/123968424