“知识点1 .可见性、隐藏和溢出”用于显示隐藏设置或获取是否显示对象。 与display属性不同，该属性保留隐藏对象占用的物理空间。 这意味着要素还占据着本来的空间，但是完全看不见也可以。 visibility :隐藏项与display:none的区别visibility 3360隐藏项占用页面上的空间，即使设置了隐藏元素也是如此。 display:none设置元素不可见，不占用页面空间。 可视默认值。 可以看到要素。 看不到隐藏元素。 如果collapse与表元素一起使用，则可以使用此值删除行或列，但不影响表的布局。 行或列占用的空间用于其他内容。 如果此值被其他元素使用，则显示“隐藏”。 inherit知识点2.Display指示隐藏和内联块的内联类型
转换为内联元素。 内联元素可以放置在同一行中，没有宽度，并且只有行高为block类型
转换为块级元素，一个块占一行，可以设置宽高inline-block类型
内联元素具有内联元素的特征和块级元素的特征。 若要增加子元素的父元素宽度，请使用inline-block none
不存在隐藏、隐藏、空间兼容性问题
但是，当前并不是所有浏览器都支持此属性，IE6、IE7不支持此属性。 可以实现这个效果。 要在IE下实现display:inline-block效果，请首先使用display3360inline-block属性触发块元素，然后定义display3360inline。 知识点3 .溢出显示隐藏溢出属性
visible: -发现不会处理溢出的内容，并且内容可能超过容器。 (默认)隐藏：--隐藏溢出容器的内容，不显示滚动条。 scroll:--滚动以隐藏容器的内容。 溢出的内容在滚动条上滚动显示。 (无论内容是否溢出都显示) auto )根据需要显示滚动条，如果内容未溢出容器，则不显示滚动条，如果内容溢出容器，则显示滚动条，如果需要，则显示滚动条溢出- x和溢出- y
可以分别设置内容在水平方向或垂直方向超出框的容纳范围时的显示方式。 visible :如果不处理溢出的内容，内容可能超过容器。 隐藏：隐藏溢出容器的内容，不显示滚动条。 scroll :隐藏溢出容器的内容。 溢出的内容在滚动条上滚动显示。 自动：如果内容未充满容器，则不显示滚动条；如果内容充满容器，则显示滚动条；如果需要，则显示滚动条。 在网站上，字符太长，经常可以看到省略号的效果。 照片中显示的两种类型的省略号之一是多行在最后一行显示省略号。 代码可以实现这个效果！ doctypehtmlhtmlheadmetacharset=' utf-8 ' title溢出省略号/titlestylediv { border 33601 px solid # 0f 0； width:200px； /*设置宽度*//*以下三个属性是一般强制不变规则的*/white-space:nowrap； /*无强制换行*/overflow :隐藏； /*溢出时隐藏*/text-overflow:ellipsis； /*文本溢出时的隐藏方法使用了省略号*/}/style/headbodydiv。 今天我的心情也很好。 因为我的高考成绩出来了，而且考试很高。 /div/body/html中的英文和数字不强制换行的body标记具有默认的overflow属性； 没有空格的英语和数字不换行； 加空格后的字母可以换成单词。
syle div { border :1 px solid # 0f 0； width:200px； /*设置宽度*/height:200px； Overflow :自动； 魔兽世界： break-word； //style/headbodydivavaeshvoehnvoehovgehvoehvoehvoehvgehroigehroewhgovewhnvgoehouvgheovgehgoehgoeheo今天我的心情也很好。 因为我的高考成绩出来了。 而且今天我的心情也很好，而且考试特别高今天我的心情也很好。 我的高考成绩出来了，而且考试特别高今天我的心情也很好。 我的高考成绩出来了，而且考试特别高今天我的心情也很好。 我的高考成绩出来了，而且考试的特别高度另当别论； /div white-space:nowrap； 不强制文本换行的常用字母和数字没有空格，不换行，但在中文中以字符为单位自动换行。 这样，文本不会在一行中溢出。当文本溢出： ellipsis文本时出现省略号的效果扩展在字母和数字中没有空格的情况下自动进行word-wrap:break-word ellipsis显示表示已修剪文本的省略号。 string使用表示已修剪文本的字符串。 文本溢出包含元素时发生。 doctypehtmlhtmlheadstylediv.test { white-space : nowrap； width:12em； Overflow :隐藏； border:1px solid #000000； } div.test : hover { text-overflow : inherit； 板载：可视； 将光标悬停在}/style/headbodyp下的两个div上，可以看到所有文本。 名为/pp的div是' text-overflow : ellipsis ':/PDI vclass=' test ' style=' text-overflow 3360 ellipsis；' 使用的名为thisissomelongtextthatwillnotfitinthebox/divp的div是' text-overflow : clip ':/PDI vclass=' test ' style=' tte