`

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 显示元素(默认值)。
分享到:
评论

相关推荐

    鼠标移动到div上显示制定信息或者div(自适应显示位置)

    现在,我们需要使用JavaScript(这里我们可以使用jQuery库,因为它简洁易懂)来监听"hover-div"的`mouseover`和`mouseout`事件,以便在鼠标进入和离开时显示和隐藏"info-div"。同时,我们还需要计算"info-div"的显示...

    javascript实现显示和隐藏div方法汇总

    在JavaScript中,显示和隐藏`div`元素是前端开发中常见的需求。本篇文章将汇总15种不同的方法来实现这一功能。以下是对这些方法的详细解释: 1. **`display: block/none`**: - `display: block`使元素呈现在页面...

    javascript DIV隐藏、显示 弹出式窗口样式

    我们可以定义背景颜色、边框、阴影、字体等属性,以达到所需的效果。例如: ```css #popup { background-color: white; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); padding: 20px; ...

    表格,div等,多余部分隐藏,或者省略显示

    在网页设计和开发中,"表格,div等,多余部分隐藏,或者省略显示"是一个常见的需求,主要是为了优化页面布局,提高用户体验。这个主题主要涉及到CSS中的`overflow`属性和相关的技巧,让我们来深入探讨一下。 首先,...

    div两侧浮动广告 可隐藏 附加非div两侧浮动

    当一个 div 设置为浮动后,它会尽可能地向页面的左或右侧移动,直到它的外边缘碰到包含它的边框或者其他浮动元素的外边缘。这样,我们可以创建一个在页面两侧显示的广告栏。 例如,如果我们想要在左侧创建一个浮动...

    JqueryUI控制可拖动隐藏DIV

    在描述中提到的“样式可调”,意味着我们可以自定义 DIV 的外观,包括边框、背景色、字体样式等。jQuery UI 提供了一套完整的主题系统,开发者可以使用预设的主题,也可以通过 ThemeRoller 工具创建自定义主题,确保...

    div 的边框显示不同效果示例代码

    - hidden:隐藏边框。 - border-color:用于设置边框的颜色,可以是预定义的颜色值(如red、green、blue等)、RGB、RGBA、HEX或HSL等。 下面的示例代码展示了如何使用border属性为div元素的不同边设置不同颜色的...

    打开DIV

    - `#fd` 定义了要显示或隐藏的 `div` 的基本样式,包括宽度、高度、背景色等,并且设置了 `overflow: hidden` 和 `position: absolute` 以实现动画效果。 - `.content` 类则为内部实际内容定义了一些基本样式。 ###...

    当鼠标悬停在文本上面的时候显示相对位置的div

    3. **JavaScript交互**:接着,我们用JavaScript监听`mouseover`和`mouseout`事件,以在鼠标悬停时显示div,并在鼠标离开时隐藏它: ```javascript document.getElementById('hover-text').addEventListener('...

    Div显示小窗口源码

    如果是JavaScript,它可能包含定义Div显示和隐藏的函数,以及与AJAX交互的部分;如果是CSS,它将定义窗口的样式和动画效果;如果是ASP.NET的代码文件,如.aspx或.cs,那么它可能包含了服务器端处理逻辑和与客户端...

    div模式窗口-div模式窗口

    - `display`: 控制`div`的显示方式,如设置为`block`使其作为块级元素独占一行,`inline-block`使其按行内元素排列,或`none`隐藏`div`。 - `position`: 设置`div`的位置,如`static`(默认),`relative`,`...

    DIV_CSS图片缩略显示

    ### DIV_CSS图片缩略显示详解 #### 一、概述 在网页设计中,为了提高用户体验,经常需要将图片以缩略图的形式展示出来,并在用户点击时显示全尺寸的图片。这种方式不仅能够节省加载时间,还能使页面布局更加美观、...

    鼠标悬停在按钮上弹出DIV层页面,鼠标离开后层消失jquery实例

    `会显示隐藏的DIV层。当鼠标离开按钮,`$("#popupLayer").hide();`则会隐藏它。此外,我们还为弹出层添加了一个`mouseleave`事件监听器,确保当鼠标离开弹出层时,即使没有离开按钮,也会隐藏弹出层。 4. **CSS样式...

    仿CSDN鼠标移上去的显示DIV浮动层

    这种效果常见于文章列表、菜单栏或者按钮等元素,当用户将鼠标悬停在某个元素上时,会有一个浮动的DIV层显现,显示更详细的内容或操作选项。 首先,我们需要理解`DIV`元素在HTML中的角色。`&lt;div&gt;`是“Division”的...

    DIV模态窗口实现

    【DIV模态窗口实现】是一种常见的前端网页设计技术,它允许在不离开当前页面的情况下,弹出一个窗口显示额外的信息或功能。模态窗口通常用于登录、注册、提示信息、表单提交等场景,能够提供良好的用户体验,因为它...

    NET弹出层弹出div

    开发者可以使用CSS(层叠样式表)来控制`div`的样式,包括位置、大小、颜色、边框等,使其成为构建网页布局的重要工具。 弹出层通常通过JavaScript或jQuery库实现,例如使用`show()`和`hide()`方法来控制`div`的...

    div+css登陆页面

    这包括设置它们的宽高、边距、填充、背景色、边框等。同时,为了实现登录按钮的交互效果,还可以应用CSS3的伪类如`:hover`和`:active`来改变鼠标悬停或点击时的样式。此外,登录表单通常需要居中显示,这可以通过...

    div 选项卡 tap

    以及一系列的子div:一部分表示选项卡(可能使用`&lt;a&gt;`标签或`&lt;button&gt;`标签),另一部分表示与选项卡关联的内容区域(通常使用`&lt;div&gt;`标签并设置为隐藏)。每个选项卡都有唯一的标识,以便JavaScript可以识别和操作...

    js弹出div效果

    5. **样式设计**:通过CSS对弹出的div进行美化,包括位置、大小、背景色、边框、阴影等,以达到美观大气的效果。例如: ```css #popup { position: fixed; /* 固定位置 */ top: 50%; left: 50%; /* 居中 */ ...

    图片提示框(js+div图片提示框)

    2. CSS样式:通过CSS为div设置背景、边框、透明度等样式,使其看起来像一个提示框。同时,可以设定图片的样式,使其在div内居中展示。 3. JavaScript处理:添加事件监听器来响应用户的操作,例如点击按钮或者鼠标...

Global site tag (gtag.js) - Google Analytics