Html 使用技巧 -- 设置display属性可以使div隐藏后释放占用的页面空间

    

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白:

　　style="visibility: none;"

　　document.getElementById("typediv1").style.visibility="hidden";//隐藏

　　document.getElementById("typediv1").style.visibility="visible";//显示

通过设置display属性可以使div隐藏后释放占用的页面空间，如下

　　style="display: none;"

　　document.getElementById("typediv1").style.display="none";//隐藏

　　document.getElementById("typediv1").style.display="";//显示

时间： 2024-08-07 08:40:08

Html 使用技巧 -- 设置display属性可以使div隐藏后释放占用的页面空间的相关文章

css的display属性小实验

div与span是常用的盒子模型; 区别: div默认是垂直分布(独占一行)   span默认是水平分布(一行可以有多个) 通过float属性可以改变div容器的分布方式达到span容器的效果; 下面介绍下display这个属性; display的可选参数项: 默认值为 inline (内联即水平分布), 其它可能的值如下表所示: 下面是通过inline和block这两个属性来使div与span两个容器的默认方式互相转换 (即 不使用float属性 让div水平分布 并且 使span垂直分布);

JS设置html元素的显示和隐藏

利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位.  方法一: document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐藏后,页

CSS基础学习十四：盒子模型补充之display属性设置

我在CSS基础学习十三:盒子模型的i博文只是阐释了CSS盒子模型,并没有过多的使用实例来演示.这篇博文 就来做一些盒子模型知识的补充.这一部分对于网页总体布局还是蛮重要的,过去大多数使用HTML中的table元素和 框架标签来进行网页的整体布局,现在我们使用最多的是DIV+CSS网页布局.所以一定要掌握好盒子模型,记住 content,border,padding和margin各自在盒子中的作用和使用方式. 先来看一个完整元素的盒子模型实例: <!DOCTYPE html PUBLIC "

不设置宽高，使元素居中的方法

在某些特定的场合,在没有知道宽度的情况下却要求水平居中,今找到些解决方法,现转过来一起学习学习 方案一.利用浮动的包裹性和相对定位百分比数据值特性,传说称之为“相对浮动” .unknow_width_center1 {position:relative; left:50%; float:left;}.unknow_width_center1 li {position:relative; right:50%; z-index:2; float:left}<</span>ul class=&

深入理解display属性

目录 [1]block [2]inline [3]inline-block[4]none [5]list-item [6]run-in [7]table [8]inline-table [9]table-cell [10]table-caption 前面的话 display属性在网页布局中非常常见,但经常用到的仅仅是block.inline-block.inline和none等寥寥几个属性值,本文将详细介绍display属性的各个方面 定义 display属性用于规定元素生成的框类型,影响显示方

web开发设计--JS的innerHTML/display属性

1.innerHTML 属性 innerHTML 属性用于获取或替换 HTML 元素的内容. 语法: Object.innerHTML 注意: 1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素. 2.注意书写,innerHTML区分大小写. 我们通过id="con"获取<p> 元素,并将元素的内容输出和改变元素内容,代码如下: <!DOCTYPE HTML> <html>

css display属性值

一.css中display可以取的值 值 描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-block 行内块元素.(CSS2.1 新增的值) list-item 此元素会作为列表显示. run-in 此元素会根据上下文作为块级元素或内联元素显示. compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除. marker CS

如何理解CSS的display属性

在布局中, display 属性是最重要的CSS属性之一.其最常见的属性值有 block , inline , none , table 以及 inline-block .最近的新宠为 flex ,因为它是专门为布局创建的 display 属性.新出现的 grid (最近仍比较活跃)是另外一个指定的布局属性,其很快就会广泛被使用. 这篇文章比我预期的要长很多,你可以选择性进行阅读,但是我更希望你可以静下心来阅读整篇文章. 表内容 通过创建各种响应式设计,对于 display 以及 positio

display属性（重点）

行内元素和块级元素的区别:(非常重要) 行内元素: 与其他行内元素并排: 不能设置宽.高.默认的宽度,就是文字的宽度. 块级元素: 霸占一行,不能与其他任何元素并列: 能接受宽.高.如果不设置宽度,那么宽度将默认变为父亲的100%. 块级元素和行内元素的分类: 在以前的HTML知识中,我们已经将标签分过类,当时分为了:文本级.容器级. 从HTML的角度来讲,标签分为: 文本级标签:p.span.a.b.i.u.em. 容器级标签:div.h系列.li.dt.dd. PS:为甚么说p是文本级标签呢