day0305

overflow:文本溢出设置;

       hidden 超出隐藏

       scroll 超出时,滚动查看(未超出也会有滚动机制)

       auto   超出时,滚动查看(自适应,未超出时不会有滚动机制)

           inherit    继承父级的overflow设置

white-space:文本空白;

              normal 默认值

              pre    保留原格式,且不会被迫换行

              pre-wrap   保留原格式,会被迫换行

              pre-line   保留换行,不保留缩进和多个空格符

                  nowrap     强制不换行,但是干不掉br标签

text-overflow:文本省略号;

              clip   裁剪

              ellipsis   省略号

             

           想要显示省略号四部曲:

                  1: 元素设置宽度,且内容足够

                  2: white-sapce:nowrap;强制不换行

                  3: overflow:hidden;超出隐藏

                  4: text-overflow:ellipsis;变成省略号

                      注意: 只针对单行文本有效

元素类型:

       块状元素:div h1-h6 ul li p ......

       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:inline; 将元素转换为内联元素

              display:block;    将元素转换为块元素(显示)

              display:inline-block;    将元素转换为内联块元素

              display:none; 隐藏

             

           display:list-item; 将元素转换为列表类型