省略号、溢出隐藏、元素类型、类型转换display、

设置显示省略号：

        text-overflow:;

            clip：不显示省略号（...），而是简单的裁切;

            ellipsis：当对象内文本溢出时，显示省略标记；

            说明：text-overflow这个属性只有显示或者不显示省略号的作用，没有裁切的功能；

            所以如果想实现单行文本溢出显示省略号，还需要一下几个属性：

                width    定义显示的范围

                white-space:nowrap  强制在一行显示

                overflow:hidden;    溢出隐藏

                text-overflow:ellipsis;  溢出显示省略号

            扩展：（了解即可）

                设置多行文本溢出显示省略号：

                    display: -webkit-box;

                    -webkit-box-orient: vertical;

                    -webkit-line-clamp: 3;   设置显示的行数

                    overflow: hidden;

 

空余空间属性：

            white-space:;

                normal：默认值，多余空白会被浏览器忽略只保留一个；

                pre：空白会被浏览器保留；

                pre-wrap：保留一部分空白符序列，但是正常的进行换行；

                pre-line:合并空白符序列，但是保留换行符；

                nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止;

 

溢出隐藏属性：

            复合式属性：

                overflow:;

                    visible:默认值，内容不会被修剪，会呈现在元素框之外；

                    hidden：内容会被修剪，并且其余内容是不可见的；

                    scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;

                    auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;

                    所有属性都可以添加的属性值：

                        inherit：规定应该从父元素继承overflow属性的值。

                        initial: 规定该属性的属性值以默认值。

            单一设置：

                overflow-x:;

                overflow-y:;

元素类型：

            根据css的显示，把html里面的标签分为了三大类：

                第一种分类：

                    块状元素

                    行内元素

                    可变元素  根据上下文的元素类型来决定自己的显示类型

行内块元素和行内元素放在一行时，基线对齐

行内元素设置padding和margin左右起作用，上下不起作用

            子元素或者父元素有浮动时，上下可以起作用

                第二种分类：

                    块状元素:

                        1、独占一行

                        2、可以直接定义宽高

                        3、严格遵循盒模型的显示规则显示的，可以正确显示padding\margin\border等属性；

                        4、块状元素一般作为容器使用，可以容纳其他的块状元素和其他的行内元素等,p和h1 - h6标签除外，这几个标签不能容纳其他块元素；

                        5、常见的块元素都有谁：div p h1-h6 ul li dl ol dt dd hr fieldset form table tr ...

                    行内元素:

                        1、自左向右一次排列显示，直到遇到br或者浏览器边缘时，才会折行；

                        2、不可以直接定义宽高，是根据内容的大小显示的；

                        3、遵循盒模型的现实规则，但是部分显示不正确，padding-top/bottom,margin-top/bottom ,border-top/bottom显示不正确；

                        4、行内元素不能嵌套自己；

                        5、常见的行内元素：span strong a b i em u ins s del sup sub br img ...

注：img 是行内元素，但是可以定义宽高，可以正确使用padding、margin 等属性；我们它称之为置换元素；

        置换元素：元素自带默认的宽高比；可以设置宽高，是通过属性添加内容的；

        目前除了img 还有 input也属于置换元素；

                    行内块元素:

                        1、自左向右一次排列显示，直到遇到br或者浏览器边缘时，才会折行；

                        2、可以直接定义宽高

                        3、遵循盒模型的显示规则，可以正确显示padding 、margin、border等属性；

                        4、常见的行内块元素有：input 、td 、select 、textarea 、button ...

 

元素类型转换：(定义元素显示的元素类型)

        默认情况下，每个元素都有自己的默认的元素类型：

            大部分的块状元素的默认类型：display:block;

            大部分的行内元素的默认类型: display:inline;

            大部分的行内块元素的默认类型：display:inline-block;

            display:;

                none  元素不被显示，隐藏；

                inline  元素类型显示为行内元素（内联元素）；

                inline-block 元素类型显示为行内块元素；

                block   元素类型显示为快状元素