显示与隐藏、溢出

知识点1.visibility 显示隐藏

设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间。这意味着元素仍占据其本来的空间，不过可以完全不可见。visibility:hidden与display:none的区别visibility:hidden设置不可见的元素也会占据页面上的空间。display:none设置元素的不可见， 不占据页面空间。

 visible 默认值。元素是可见的。hidden   元素是不可见的。collapse  当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。inherit

知识点2.Display显示隐藏与行内块

inline类型

转换为行内元素，行内元素可以在同一行上，没有宽度，只有行高

block类型

转换为块级元素，一个块占据一行，可以设置宽高

inline-block类型

行内块元素，具备行内元素的特点，也具备块级元素的特点。
希望子元素撑开父级元素的宽度可以使用inline-block

none

隐藏，不显示，不占空间

兼容问题

但是这个属性目前不是所有的浏览器都支持，IE6，IE7不支持该属性，可以实现这种效果。
在IE下实现display:inline-block效果的方法：先用display:inline-block属性触发块元素，然后再定义display:inline。

知识点3.overflow溢出显示隐藏

overflow属性

         visible： -可见 对溢出内容不做处理，内容可能会超出容器。（默认）hidden：--隐藏 隐藏溢出容器的内容且不出现滚动条。scroll：--滚动 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。（不论是否内容溢出都会显示）auto：按需出现滚动条  当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。

overflow-x和overflow-y

可以单独设置在水平方向上或垂直方向上如果内容超出盒的容纳范围时的显示方式。

 visible： 对溢出内容不做处理，内容可能会超出容器。hidden： 隐藏溢出容器的内容且不出现滚动条。scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。

我们经常能在网页当中看到一段文字过长出现省略号的效果。
图片上所显示的有2种类型的省略号一种是多行在最后一行出现省略号；可以代码实现这种效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>溢出省略号</title>
<style>
div{border:1px solid #0f0;width:200px;/*设置宽度*//*以下的三条属性就是一般的强制不变规律的*/white-space:nowrap;/*强制不换行*/overflow:hidden;/*如果溢出就隐藏*/text-overflow:ellipsis;/*文本溢出的时候隐藏的方式用的是省略号*/   }
</style>
</head>
<body>
<div>
今天我的心情也非常的不错，因为我的高考成绩出来了，而且考的特别的高；
</div>
</body>
</html>

英文和数字强制不会换行；body标签有默认的overflow属性；没有加空格的英文或者数字不会换行；加了空格之后的字母就变成了单词可以换行。

<style>
div{border:1px solid #0f0;width:200px;/*设置宽度*/height:200px;overflow:auto;word-wrap:break-word;}
</style>
</head>
<body>
<div>
avaeshvoehnvoehovgehvoehvgehroigehohroewhgovewhnvgoehouvgheovgehgoehgoeheo
今天我的心情也非常的不错，因为我的高考成绩出来了，而且考今天我的心情也非常的不错，因为我的高考成绩出来了，而且考的特别的高今天我的心情也非常的不错，因为我的高考成绩出来了，而且考的特别的高今天我的心情也非常的不错，因为我的高考成绩出来了，而且考的特别的高的今天我的心情也非常的不错，因为我的高考成绩出来了，而且考的特别的高特别的高；
</div>

white-space:nowrap; 文本强制不换行一般字母和数字没有空格不会换行 但中文会以文字为单位自动换行 这样在一行内文本是不会溢出text-overflow:ellipsis; 文本溢出时出现省略号的效果扩展 如何让字母和数字没有空格的情况下自动换行word-wrap:break-word; 自动换行属性(单词包装)

知识点4.text-overflow文本溢出

 clip    修剪文本。ellipsis   显示省略符号来代表被修剪的文本。string  使用给定的字符串来代表被修剪的文本。

当文本溢出包含元素时发生的事情。<!DOCTYPE html>
<html>
<head>
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}div.test:hover
{
text-overflow:inherit;
overflow:visible;
}
</style></head><body><p>如果您把光标移动到下面两个 div 上，就能够看到全部文本。</p><p>这个 div 使用 "text-overflow:ellipsis" ：</p><div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div><p>这个 div 使用 "text-overflow:clip"：</p><div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div></body>
</html>

css(显示与隐藏、溢出)相关推荐

CSS显示与隐藏透明背景
显示与隐藏的方法主要有三种,因为透明背景和此对象要在同一个位置,所以这里用的是display属性,和绝对定位,隐藏后不占有原来位置(脱标):需要注意的一点就是,在写光标经过的时候显示隐藏背景时,是显示 ...
控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析
元素的显示与隐藏: 常见控制元素的显示和隐藏的属性有display.visibility.overflow,需要清楚的理解三者之间的区别. display显示: 当值为none时为销毁对象,不保留原位 ...
CSS 如何实现文字溢出隐藏时，隐藏左边或者右边，并显示省略号
CSS 如何实现文字溢出隐藏时,隐藏左边或者右边,并显示省略号指定一个定宽高的盒子,当文字溢出,会换行显示出来. .box {width: 60px;height: 30px;background- ...
css元素的显示与隐藏 display显示隐藏 +visibility显示隐藏 +overflow溢出显示隐藏
css元素的显示与隐藏 display显示隐藏元素 visibility显示隐藏元素 overflow溢出显示隐藏总结 display显示隐藏元素 display 设置或检索对象是否及如何显示. d ...
CSS div内文字溢出部分隐藏显示...省略号
div内文字溢出部分隐藏显示-省略号单行溢出显示省略号: overflow: hidden; white-space: nowrap;//内容超出不换行 text-overflow: ellipsi ...
前端学习日记（八）：css中字体、列表、鼠标形状、显示与隐藏、溢出处理、盒子模型的简单应用
一.字体样式(font) font-style [用于打开和关闭斜体文本] • normal 正常字体,关闭斜体 • italic 斜体 • oblique 模拟斜体 font-weight [为字体 ...
web前端入门学习 css（6）（定位position）（元素的显示与隐藏display、可见性visibility、溢出overflow）（案例：土豆播放页）
文章目录什么是定位? 定位组成(定位模式+边偏移) 定位模式static relative absolute fixed 边偏移定位模式--静态定位static(平时用不到)就是标准流定位模式- ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
CSS基础「六」元素的显示与隐藏
本篇文章为 CSS 基础系列笔记第六篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...

css(显示与隐藏、溢出)

显示与隐藏、溢出

知识点1.visibility 显示隐藏

知识点2.Display显示隐藏与行内块

知识点3.overflow溢出显示隐藏

知识点4.text-overflow文本溢出

css(显示与隐藏、溢出)相关推荐

最新文章

热门文章