overflow、white-space、text-overflow以及元素类型和类型转换

span元素需要设置float，才能用margin，padding移动
overflow 文本溢出设置
hidden 超出隐藏
scroll 超出时，滚动查看（未超出也会有滚动机制）
auto 超出时，滚动查看（自适应，超出时才有滚动机制）
inherit 继承父级的overflow设置

    white-space 文本空白
    normal 默认值
    pre 保留原格式，不会强制换行
    pre-line 保留换行，不保留缩进和多个空格符
    nowrap 强制不换行，但干不掉br换行

    text-overflow 文本省略号
        clip 裁剪
        ellipsis 省略号

        想要显示省略号四部曲：
            1：元素设置宽度，且内容足够
            2：white-space：nowrap；强制不换行
            3：overflow：hidden 溢出隐藏
            4：text-overflow：ellipsis 变成省略号
            注：只针对单行文本有效

    元素类型
        块状元素：div、h1-h6、p、ul、li...
            1：单独占据一行
            2：可以设置宽度和高度
            3：能够正常设置内外边距
            4：一般用于搭建页面结构，类似盒子来装载东西
            5：在页面中矩形显示
        内联元素：span、a、i、em、b、strong...
            1：只占据自己内容的大小位置，在一行显示
            2：不能设置宽高，大小由内容撑起来
            3：不能够正常设置上下（垂直方向）内外边距(对布局无效，对自身有效)
            4：一般结合css样式展示对应视觉效果
            5：在页面中可以不是矩形显示

        内联块元素：img、input
            1：只占据自己内容大小的位置
            2：能设置宽高
            3：能正常设置内外边距

        块状元素：block
        内联元素：inline
        内联块状元素：inline-block（集合了块元素和内联元素的性质）
        
        元素类型转换：display：；
            display：block；（显示，且是以块状元素类型展示）
            display：inline；（内联元素）
            display：inline-block；（内联块元素）
            display：none；（隐藏元素）