CSS总结（超简洁）

一.定义：

        层叠样式表  网页修饰 后缀.css 文件 注释：/* */

二.引入方式：

1.外部链接
         使用link标签href=“”指向目标css文件
2.内部式
    在html文件的style标签内编写css代码
3.行内式
    直接在标签style属性中编写css代码
优先级：就近原则，行内式离标签最近 优先级最高

三.标签基本属性：

        name Id style class

四.四种选择器

1.* 通配符选择器
        适用所有标签
2.tag 标签选择器
        适用于指定类型的标签
3.class 类选择器
        .类名{}
        标签中的class属性引入
4.id  id选择器
        #id{}

五.其他选择器

1.，(逗号)选择器  p1,p2{}
2.空格后代选择器 div p
3.子选择器  eg: div>p
4.+ 相邻下一个元素
5.-  下面多个

六.属性选择器

1.空格 选中所有后代
2.> 子集
3.nth-of-type  优先级较高
        even偶数
        odd奇数
        数字：具体行数

七.伪类选择器  a超链接

1.a:link
    未访问前
2.a:visited
    访问后
3.a:hover
    鼠标悬停
4.a:active
    鼠标点击时

八.常用属性

1.文字属性：

            font-
                    family 类型 多个类型之间用逗号隔开 从前往后依次查找
                    font-style： italic斜体
                    size 字体大小
                    weight 粗细
                     color文字颜色

2.文本属性：

        text-lign  文本位置
                left
                center
                right
        text-decoration 文本装饰
                none
                underline 下划线
                line-through 删除线
                overline 上划线
        text-transform
                  capitalize
        text-indent
                    开头缩进
        text-overflow
                    滚动条

3.边框属性：

border：

        border-top
        border-bottom
        boder-left
        boder-right

九.盒子模型

width
height
border 边框
margin 外边距
        top
        bottom
        left
        right
padding 内边距
        top
        bottom
        left
        right

十.display：

        none 隐藏标签
        inline 行内模式 不可设置宽高
        block 块级
        inline-block 行内块
        display：把标签行内和块之间转换

十一.定位：

1.静态定位  static
    浏览器的默认定位方式
    top left不会产生偏移
2.相对定位 relative
    相对于静态标签的定位
    left
        向左偏移
    top
        从上向下偏移
    占用文档流
3.绝对定位  absolute
    不占用文档流
    相对于外层第一个非静态定位
    使用top left right bottom产生偏移
4.固定定位 fixed
    相对于窗口
    使用top left right bottom产生偏移
5.粘性定位
    当标签元素产生滚动的时候，满足条件就定位
    属性值：sticky
优先级
    z-index: 数字; 几层

十二.浮动

1.float
    left
        左浮动
    right
        右浮动
2.clear 清除浮动
    left
    right
    both

十三.弹性盒子(布局)

1.display:flex

2.常用属性：

        <1.flex-direction:

                row(默认) 行 从左往右
                column 列 交叉轴(纵向)从上到下
                row-reverse 行反向排序 从右向左
                column-reverse 从下向上

        <2.justify-content:

                主轴横向对齐(默认)
                center 居中对齐
                baseline 居左
                end 居右
                space-between 两边对齐 中间留白
                space-around 两边和中间都留白 中间留白是两边的二倍

        <3.align-items:

                默认纵向交叉轴对齐
                center
                flex-start 左边开始
                flex-end 右边开始
                end

十四.动画效果

1.transform:

        <1.>translate 移动效果
                translateX
                    横向移动
                translateY
                    纵向移动
                数值 移动的距离
        <2.>rotate 旋转效果
                rotateX
                rotateY
                角度单位deg
        <3.>scale 缩放效果
                scaleX
                scaleY
                缩放倍数 数值
        <4.>skew 扭曲
                skewX
                skewY
                skewZ
                单位：角度deg

2.transition:

        过渡属性
            动作的时间 单位：秒