Python-css高级

1. 伪类和伪元素
    1. 伪类
        1. :link
        2. :visited
        3. :hover (重要)
        4. :active
        5. :focus(input标签获取光标焦点)
    2. 伪元素
        1. :first-letter
        2. :before(重要 在内部前面添加)
        3. :after(重要 在内部后面添加)

2 CSS属性
    0. 高度和宽度
        1. 标签的分类(标签默认是否独占一行)
            1. 块级标签
                div p h1~h6 hr ul>li table>tr
            2. 行内标签
                span a input img i...
        2. 块级标签才能设置宽和高
        3. max-width: 100%
            - max-width  --> 最大的宽度
            - 100%       --> 所有涉及到%都是指占父标签的百分比

    1. 字体相关
        1. 字体        --> font-family： “”
        2. 字体大小    --> font-size
        3. 字体粗细    --> font-weight
        4. 字体颜色    --> color
                                - red 直接写英文名字
                                - #FFFFFF
                                - rgb(255,255,255)
                                - rgba(255,255,255,0.6)

    2. 文本属性
        1. text-align:center 对齐方式
        2. text-indent: 28px 首行缩进
        3. line-height：父标签的高度   （实现单行文本的垂直居中）
        4. text-decoration 装饰 (去除a标签的下划线(text-decoration: none))
    3. 背景
        1. ">背景图片(九宫格涮葫芦娃)  url() no-repeat 50% 50%
        3. background: url() no-repeat center
        4. background-attachment: fixed  背景不动的实例
    4. 边框
        1. border-width (边框宽度)
        2. border-style (边框样式)
        3. border-color (边框颜色)
        简写:border: 1px solid red;
        border-radius: 50%;    --> 画圆
    5. CSS盒子
        内容(content)-->内填充(padding)-->边框(border)-->外边距(margin)
        1. content (内容)
        2. padding (内填充) 调整内容和边框之间距离时使用这个属性
                想让标签撑起来（内容和边框之间的距离变大）设置padding
        3. border  (边框)
        4. margin  (外边距) 多用于调整调整标签之间的距离 (注意两个挨着的标签margin取最大值)
                想让两个标签之间的距离变大，设置margin

        注意:
            当两个标签之间的外边距有重叠的话，会按照最大的外边距来显示
            要习惯看浏览器console窗口那个盒子模型

    6. 显示效果
        display:
                - none   不显示(不让标签显示,不占位)
                - block  按照块级标签来显示
                - inline 按照行内标签来显示
                - inline-block 既有块级又有行内的效果

    7. float(浮动)
        1. 多用于实现布局效果
            1. 顶部的导航条
            2. 页面左右分栏 (博客页面:左边20%,右边80%)
        2. float取值:
            1. left
            2. right
            3. none
        3. 浮动的特点
            1. 任何标签都可以浮动
            2. 一个标签浮动之后都变成块级标签（可以设置宽和高）
                a标签float之后就可以设置高和宽
            3. 浮动的标签脱离文档流（它的位置会被下面的标签挤占）

    8. clear 清除浮动--> 清除浮动的副作用(内容飞出,父标签撑不起来)
        1. 定义一个用于清除浮动的工具样式类,结合伪元素来实现
            .clearfix:after {
                content: "",
                display: "block",
                clear: both;
            }

        2. clear取值:
            1. left
            2. right
            3. both

    9. 溢出
        1. 标签的内容放不下(溢出)
        2. 取值:
            1. hidden  --> 溢出的部分隐藏起来
            2. scroll  --> 出现滚动条
            3. auto        根据内容自行调整
            4. scroll-x
            5. scroll-y
        例子:
            圆形头像的例子
                1. overflow: hidden
                2. border-radius: 50%  (圆角)

    10. 定位postion
        0. static(默认)
        1. 相对定位---相对自己本来应该在的位置
            postion: relative;
            left: 100px;
        2. 绝对定位---相对已经定位过的父标签
            position：absolute;
            left: 100px;
        3. 固定定位---相对浏览器窗口
                postion: fixed;
                right: 50px;
                bottom: 50px;

        补充:
        脱离文档流的3种方式
            float
            absolute
            fixed

    11. opacity (不透明度)
        1. 取值0~1
        2. 和rgba()的区别:
            1. opacity改变元素\子元素的透明度效果
            2. rgba()只改变背景颜色的透明度效果

    12. z-index
        1. 数值越大,越靠近你
        2. 只能作用于定位过的元素

        3. 自定义的模态框示例

# 定位布局课堂笔记

## 一.浮动布局的总结
    1.同一结构下, 如果采用浮动布局,所有的同级别兄弟标签都要采用浮动布局
    2.浮动布局的盒子宽度在没有设定时会自适应内容宽度

## 二.盒子的显隐
display: none;
在页面中不占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 不需要用动画处理时

opacity: 0;
在页面中占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 需要采用动画处理时
```

## 三.定位布局
什么是定位布局: 可以通过上下左右四个方位完成自身布局的布局方式

- 相对定位
    参考系: 自身原有位置
    position: relative;  => 打开了四个定位方位
    1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
    2.left = -right | top = -bottom
    3.布局后不影响自身原有位置
    4.不脱离文档流

- 绝对定位
    参考系: 最近的定位父级
    position: absolute;  => 打开了四个定位方位
    1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
    2.父级必须自己设置宽高
    3.完全脱离文档流

- 固定定位
    参考系: 页面窗口
    position: fixed;  => 打开了四个定位方位
    1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左
    2.相对于页面窗口是静止的
    3.完全脱离文档流

- z-index
修改显示层级(在发生重叠时使用), 值取正整数, 值不需要排序随意规定, 值大的显示层级高

## 四.流式布局思想
1. 百分比
2. vw | vh => max-width(height) | min-width(height)
3. em | rem