overflow、display、visibility的区别

Overflow:hidden

对行内元素无效，必须是块级元素，并且设置宽度高度。

隐藏之后元素依然占据着位置。

Display:none

使用此属性之后元素不存在了，元素占据的位置也不存在。

Visibility:hidden

使用此属性之后元素不存在了，元素占据的位置依然存在。

时间： 2024-10-19 13:28:38

overflow、display、visibility的区别的相关文章

块元素和行内元素之间的转换，overflow与visibility

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>块元素和行内元素之间的转换,overflow与visibility</title> <style> a{ width:100px; height:100px; border:1px solid #000000; background:red; di

display:inline 和display:inline-block和display:block的区别

之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display:block的区别 首先先说一个名词 :inline element:行内元素也叫作内联元素,内嵌元素,直进式元素 block element:块级元素 1.display:inline 转化成内联元素,不换行: 内联元素的前面和后面都不会有换行符,你不可以给内联元素定宽和高,也就是说你如果同时给一

display &amp; visibility区别

http://www.cnblogs.com/zhangran/archive/2012/08/29/2662459.html 说明:在学习css的过程中由于其中包含太多的元素.属性等等,总有许多是自己拿不准甚至经常出错的地方,通过这 个博客把易错点记录下来,自己用:也顺便跟大家分享. 易混属性:    1.display属性的none可以隐藏标签,visibility的none也可以隐藏标签.    区别:前者隐藏且不占原来位置上的空间,后者隐藏但是还占据着原来位置上的空间.

JS中style.display和style.visibility的区别

在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时候,元素被显示,在style.display=none和style.visibility=hidden的时候,元素被隐藏.它们之间最大的区别是通过style.display=none隐藏的时候,元素不占据原来的位置,从文档流中脱离,后续的元素填补其位置.通过style.visibility=hidd

CSS样式“display:none”与“visibility:hidden”区别

CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏,但是具体的效果是有差别的!下面通过两个小实验来说明这种差异. 实验代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>none</title> 5 <meta charset="utf-8"> 6 <style type="text/css"

visibility:hidden和display:none的区别

大家知道,如果想让某一段代码在前台不显示,最简单的方法是用css的display:none即可,这样下边的内容就自动上移或右侧的左移来填补这个空隙. 但特殊情况下我们只需要隐藏这个元素,但它的位置不能被占了,那该怎么实现呢. 突然发现css还有一个visibility属性,用 visibility:hidden;可以很方便实现隐藏元素在前台的显示,但它的位置不会被后边的元素抢占. visibility:hidden | visible display:none | block | inline

CSS——dispaly、overflow、visibility、opacity

隐藏盒子: 1.overflow:hidden;             隐藏盒子超出的部分. 2.display: none;                    隐藏盒子,而且不占位置.(用的最多) 3.visibility: hidden;                隐藏盒子,而且占位置. 4.opacity: 0;                          隐藏盒子,而且占位置.(用的多) 5.Position/top/left/...-999px   隐藏盒子,而且占位置

block；dispiay:block和display:inline-block的区别

display:block就是将元素显示为块级元素. block元素的特点是: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 display:inline就是将元素显示为行内元素. inline元素的特点是: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片的宽度,不可改变. inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下: inline-block的元素特点:            将对象呈递为内联对象,但是对象的内容作为

css中display:inline-block display:-moz-inline-box display:-moz-inline-stack 的区别

很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素 浮动和边距.今天看到这篇文章不错 就COPY 过来 希望大家做个参考: display:inline-block简单来说就是将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格.但是这个属性目前不是所有的浏览器都支持,只有Opera和Safari支持,Fi