`

div设置显示与隐藏、边框等

阅读更多
1.div 设置隐藏后页面占位/不占位

可直接在页面上做,如下
<div id="hid1" style="visibility:hidden; display:none">
<div id="hid1" style="display:none">隐藏不占位
<div id="hid1" style="visibility:hidden">隐藏占位
visibility:hidden/visible 设置为隐藏/显示(始终占位)
display:none/block 设置为隐藏(不占位)/显示(不占位)


也可以写到css里
用javascript (网上找来的方法)
document.all("idname").style.display="none";


------------------------------------------
CSS/div
1.margin外边距外间距 即div与div间距
2.padding是比较常用CSS样式,可以利用padding内边距设置上、下、左、右对象内容与四个边距距离间隔。
divcss
float浮动用法(left right)    Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
-------------------------------------------
div 显示与隐藏
visibility隐藏的对象还保留对象显示时所占的物理空间,display则不保留。可以保存下面的代码看看效果:
具体步骤:
代码示例:

<div style="border:1px solid #000;background:#eee">
<span style="width:200;height:200;visibility:hidden"></span>
←SS属性为visibility:hidden的对象
</div><br>
<div style="border:1px solid #000;background:#666">
<span style="width:200;height:200;display:none"></span>
←SS属性为display:none的对象
</div>

特别提示
       用visibility属性控制隐藏的对象还占据着它显示时的位置,而display则没有。

特别说明

display属性设置元素的显示方式,对应脚本特性为display,可选值为none、block和inline,各值的说明如下:
none 隐藏元素,不保留元素显示时的空间。
block块方式显示元素。
inline 以内嵌方式显示元素。
inline-block对象显示为内嵌元素,但所有子对象都显示为块元素,相邻的内嵌元素将显示在同一行,允许空格。
list-item 将块元素显示为列表对象,并可以添加项目标点。(需要IE6.0+支持)
table-header-group 将元素作为表格标题组显示,相当于tHead元素。
table-footer-group 将元素作为表格脚注组显示,相当于tFoot元素。
visibility属性设置是否显示元素,对应的脚本特性为visibility,可选值为inherit、hidden和visible,各值的说明如下:
inherit 继承父元素的visibility属性设置。
hidden 隐藏元素,但保留其所占空间。
visible 显示元素(默认值)。
分享到:
评论

相关推荐

    100多个JQuery效果示例(实例)div+css+javascrpit

    5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9....

    css3实现六边形边框的实例代码

    而第3层div是放图片的,需要显示出来,因此设置 visibility: visible; 经过旋转肯定有超出的部分,因此对3个div都设置 overflow:hidden; 经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。 注意: 1. ...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    1.jquery+div随屏幕滚动特效(支持设置参数滚动) 2.jQuery字符插件之适合留言板的jquery文本框输入字符限制插件下载 3.jquery实现Tooltip提示(文字、链接、地图锚点),自带5种不同样式 4.jQuery实现支付宝隐藏...

    css笔记课程笔记2019,5,22

    * 把div和p标签设置成相同的样式,把不同的标签设置成相同的样式 * div,p { background-color: orange; } (3)伪元素选择器(了解,浏览器的兼容性比较差) * css里面提供了一些定义好的样式,可以拿过来使用...

    从入门到精通HTML5——PDF——网盘链接

     3.4.2 设置水平线的宽度与高度  ——width、height 57  3.4.3 设置水平线的颜色——color 58  3.4.4 设置水平线的对齐方式——align 59  3.4.5 去掉水平线阴影——noshade 60  3.5 其他文字标记 60  3.5.1 ...

    46种常见的浏览器兼容性问题大汇总

    22. 链接(a标签)的边框与背景 3 23. 超链接访问过后hover样式就不出现的问题 3 24. FORM标签 3 25. 属性选择器(这个不能算是兼容,是隐藏css的一个bug) 3 26. 为什么FF下文本无法撑开容器的高度 3

    JavaScript网页特效范例宝典源码

    实例202 隐藏及显示单元格 316 实例203 编辑单元格中的文本信息 318 实例204 合并单元格 320 实例205 在表格中添加行及单元格 322 实例206 删除表中的单元格 324 7.5 表格的特殊效果 325 实例207 透明表格 326 实例...

    jQuery详细教程

    speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", "normal" 或毫秒。 callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。 ...

    HTML开发王

    9.2.2 设置表格边框线条宽度(border属性) 9.2.3 设置表格宽度(width属性) 9.2.4 表格在页面中的对齐(align属性) 9.2.5 表格的描述(summary属性) 9.2.6 表格的背景色(bgcolor属性) 9.2.7 表格中单元格的间距和衬距...

    CSS伪元素before、after设置特殊效果:制作时尚焦点图相框

    在css选择器中有这样子的写法div:before、div:after,对于before、after来说有部分人是相当陌生的,那么这两个标签是什么呢?有什么用处?本文将详细介绍,需要的朋友可以参考下

    vxe-table vue table 表格组件功能

    一个功能更加强大的 Vue 表格组件 ...•显示/隐藏列 •加载中 •格式化内容 •自定义模板 •快捷菜单 •滚动渲染 •展开行 •树形表格 •可编辑表格 •数据校验 •全键盘操作 •Excel 表格 例子 &lt;div&gt; &lt;vxe-ta

    JavaScript Table行定位效果

    table的border属性用来指定边框宽度,table特有的frame属性是用来设置或获取表格周围的边框显示的方式。 w3c的tabel的frame部分说明frame可以是以下值: void: No sides. This is the default value. above: The ...

    《程序天下:JavaScript实例自学手册》光盘源码

    9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...

    程序天下:JavaScript实例自学手册

    9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的...

    超经典的Web前端与移动开发基础视频 Web前端基础开发视频教程 移动开发基础视频教程

    70前端开发基础视频-CSS设置标签模式display设置none隐藏标签.avi 71前端开发基础视频-CSS设置标签模式display行内块元素及块级行内的区别总结.avi 72前端开发基础视频-CSS颜色表示方法.avi 73前端开发基础视频-...

Global site tag (gtag.js) - Google Analytics