web前端技术总结——CSS(包括css3)

web前端技术总结——CSS(包括css3)

目录

  • web前端技术总结——CSS(包括css3)
    • 一:外部css引入
    • 二:CSS选择器
      • 1:选择器的优先级
      • 2:css重要选择器
      • 3:css伪类选择器
    • 三:CSS框模型
      • 1:css框模型概述
      • 2:border相关属性
    • 四:与浮动有关(重点)
      • 1:元素在文档流中的特点
      • 2:overflow
      • 3:清除浮动影响的最优解
    • 五:定位(重点)
      • 1:属性
      • 2:相对定位
      • 3:绝对定位
      • 5:定位层级
    • 六:布局相关总结(重点)
    • 七:背景
      • 1:属性
      • 2:背景在css3中新增属性
    • 八:设置透明
    • 九:css hack
    • 十:文本省略显示
    • 十一:阴影
      • 1:文字阴影
      • 2:盒模型阴影
    • 十二:BFC
    • 十三:渐变
      • 1:线性渐变
      • 2:径向渐变
    • 十四:实现垂直水平居中(重点)
      • 1:实现一张照片垂直水平居中
      • 2:一个元素垂直水平居中(元素自身未知宽高)
      • 3:一个元素垂直水平居中(元素自身已知宽高)Position: absolute;
    • 十五:过渡
      • 1:transition-timing-function
      • 2:过渡相关的属性
      • 3:当时间属性值与列表长度不同时
      • 4:过渡相关时间的坑(==时间后面一定要带单位==)
    • 十六:动画
      • 1:transform各个属性
      • 2:3D动画
      • 3:css3动画基础
    • 十七:flex
      • 1:老版本
      • 2:新版本
    • 十八:css媒体查询
    • 十九:less
    • 二十:bootstrap

一:外部css引入

web前端技术总结——CSS(包括css3)_第1张图片

二:CSS选择器

1:选择器的优先级

web前端技术总结——CSS(包括css3)_第2张图片

2:css重要选择器

web前端技术总结——CSS(包括css3)_第3张图片web前端技术总结——CSS(包括css3)_第4张图片web前端技术总结——CSS(包括css3)_第5张图片

3:css伪类选择器

关于a标签的4个伪类选择器( link visited hover active )优先级相同
使用时遵循 l v h a 的顺序

三:CSS框模型

1:css框模型概述

web前端技术总结——CSS(包括css3)_第6张图片

2:border相关属性

web前端技术总结——CSS(包括css3)_第7张图片web前端技术总结——CSS(包括css3)_第8张图片

四:与浮动有关(重点)

1:元素在文档流中的特点

web前端技术总结——CSS(包括css3)_第9张图片

2:overflow

web前端技术总结——CSS(包括css3)_第10张图片

3:清除浮动影响的最优解

web前端技术总结——CSS(包括css3)_第11张图片web前端技术总结——CSS(包括css3)_第12张图片

五:定位(重点)

1:属性

web前端技术总结——CSS(包括css3)_第13张图片

2:相对定位

web前端技术总结——CSS(包括css3)_第14张图片

3:绝对定位

web前端技术总结——CSS(包括css3)_第15张图片### 4:固定定位
web前端技术总结——CSS(包括css3)_第16张图片

5:定位层级

web前端技术总结——CSS(包括css3)_第17张图片

六:布局相关总结(重点)

web前端技术总结——CSS(包括css3)_第18张图片web前端技术总结——CSS(包括css3)_第19张图片web前端技术总结——CSS(包括css3)_第20张图片

七:背景

1:属性

web前端技术总结——CSS(包括css3)_第21张图片web前端技术总结——CSS(包括css3)_第22张图片

2:背景在css3中新增属性

web前端技术总结——CSS(包括css3)_第23张图片

八:设置透明

web前端技术总结——CSS(包括css3)_第24张图片

九:css hack

web前端技术总结——CSS(包括css3)_第25张图片

十:文本省略显示

web前端技术总结——CSS(包括css3)_第26张图片

十一:阴影

1:文字阴影

web前端技术总结——CSS(包括css3)_第27张图片

2:盒模型阴影

web前端技术总结——CSS(包括css3)_第28张图片
web前端技术总结——CSS(包括css3)_第29张图片

十二:BFC

web前端技术总结——CSS(包括css3)_第30张图片

十三:渐变

1:线性渐变

web前端技术总结——CSS(包括css3)_第31张图片

2:径向渐变

web前端技术总结——CSS(包括css3)_第32张图片

十四:实现垂直水平居中(重点)

1:实现一张照片垂直水平居中

web前端技术总结——CSS(包括css3)_第33张图片

2:一个元素垂直水平居中(元素自身未知宽高)

web前端技术总结——CSS(包括css3)_第34张图片

3:一个元素垂直水平居中(元素自身已知宽高)Position: absolute;

Left: %50;
Top: %50;
Margin-left: - 自身的width一半;
Margin-top: - 自身的height一半

十五:过渡

1:transition-timing-function

web前端技术总结——CSS(包括css3)_第35张图片

2:过渡相关的属性

web前端技术总结——CSS(包括css3)_第36张图片

3:当时间属性值与列表长度不同时

web前端技术总结——CSS(包括css3)_第37张图片

4:过渡相关时间的坑(时间后面一定要带单位

在这里插入图片描述

十六:动画

1:transform各个属性

web前端技术总结——CSS(包括css3)_第38张图片

2:3D动画

web前端技术总结——CSS(包括css3)_第39张图片

3:css3动画基础

web前端技术总结——CSS(包括css3)_第40张图片

十七:flex

1:老版本

web前端技术总结——CSS(包括css3)_第41张图片web前端技术总结——CSS(包括css3)_第42张图片

2:新版本

web前端技术总结——CSS(包括css3)_第43张图片web前端技术总结——CSS(包括css3)_第44张图片

十八:css媒体查询

web前端技术总结——CSS(包括css3)_第45张图片

十九:less

web前端技术总结——CSS(包括css3)_第46张图片

二十:bootstrap

web前端技术总结——CSS(包括css3)_第47张图片

你可能感兴趣的:(web前端技术总结——CSS(包括css3))