网站的种类,职业教育网站建设方案,爱站网工具,网站空间模板目录
一、介绍
1.Display:
1.1.概念:
1.2.特点:
1.3.用法:
1.4.应用:
1.5.功能:
2.Visibility:
2.1.概念:
2.2.特点:
2.3.用法:
2.4.应用:
2.5.功能:
总结#xff1a;
二、使用
1.隐藏元素- display:none或visibility:hidden
2.Display - 块和内联元素 3.如何…目录
一、介绍
1.Display:
1.1.概念:
1.2.特点:
1.3.用法:
1.4.应用:
1.5.功能:
2.Visibility:
2.1.概念:
2.2.特点:
2.3.用法:
2.4.应用:
2.5.功能:
总结
二、使用
1.隐藏元素- display:none或visibility:hidden
2.Display - 块和内联元素 3.如何改变一个元素显示
4.display和visility属性
4.1Display:
4.2Visibility:
三、应用实例
1.使用display和visibility实现响应式菜单
2.使用visibility实现模态框
3.使用display和flex实现响应式网格布局
4.使用visibility和transition实现平滑的元素过渡效果
四、总结 一、介绍
1.Display:
1.1.概念:
display属性用于定义元素的布局模式即元素如何在页面中呈现。
1.2.特点:
它有多种取值每种取值对应不同的布局方式如block、inline、inline-block、flex、grid等。
1.3.用法:
display: block;使元素以块级元素显示占据一行。
display: inline;使元素以行内元素显示与其他行内元素在同一行内。
display: inline-block;结合了块级元素和行内元素的特性即可以设置宽高同时又可以在同一行内显示。
display: flex;创建一个弹性盒子使元素可以灵活布局。
display: grid;创建一个网格容器使元素可以以网格形式布局。
1.4.应用:
用于控制元素的布局方式根据设计需求选择不同的display值。
1.5.功能:
控制元素的显示方式影响元素的盒模型、位置和大小等。
2.Visibility:
2.1.概念:
visibility属性用于控制元素的可见性即元素是否可见。
2.2.特点:
它有两种取值visible和hidden分别表示元素可见和不可见。
2.3.用法:
visibility: visible;使元素可见。
visibility: hidden;使元素不可见但仍占据页面布局空间。
2.4.应用:
用于控制元素在页面中的可见性常用于实现动态显示和隐藏效果。
2.5.功能:
控制元素的可见性但不影响元素的布局。
总结
Display主要用于控制元素的布局方式包括块级、行内、弹性布局和网格布局等。Visibility主要用于控制元素的可见性即元素是否在页面中可见但不影响布局。
二、使用
1.隐藏元素- display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为none或把visibility属性设置为hidden。但是请注意这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说该元素虽然被隐藏了但仍然会影响布局。
h1.hidden {visibility:hidden;}
display:none可以隐藏某个元素且隐藏的元素不会占用任何空间。也就是说该元素不但被隐藏了而且该元素原本占用的空间也会从页面布局中消失。
h1.hidden {display:none;}
2.Display - 块和内联元素
块元素是一个元素占用了全部宽度在前后都是换行符。
块元素的例子
h1pdiv
内联元素只需要必要的宽度不强制换行。
内联元素的例子
spana 3.如何改变一个元素显示
可以更改内联元素和块元素反之亦然可以使页面看起来是以一种特定的方式组合并仍然遵循web标准。
下面的示例把列表项显示为内联元素
li {display:inline;}
下面的示例把span元素作为块元素
span {display:block;}
注意变更元素的显示类型看该元素是如何显示它是什么样的元素。例如一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
4.display和visility属性
4.1Display:
selector {display: value;
}selector: 要应用样式的HTML元素选择器。value: 布局方式的取值如block、inline、inline-block、flex、grid等。
4.2Visibility:
selector {visibility: value;
}selector: 要应用样式的HTML元素选择器。value: 可见性的取值可以是visible可见或hidden不可见。
三、应用实例
1.使用display和visibility实现响应式菜单
HTML:
nav idmenuullia href#Home/a/lilia href#About/a/lilia href#Services/a/lilia href#Contact/a/li/ul
/navbutton idtoggleMenuToggle Menu/buttonCSS:
#menu {display: none; /* 初始时菜单隐藏 */
}#menu.visible {display: block; /* 显示菜单 */
}/* 其他样式 */JavaScript:
document.getElementById(toggleMenu).addEventListener(click, function() {var menu document.getElementById(menu);menu.classList.toggle(visible);
});演示了如何通过JavaScript来控制菜单的显示和隐藏使用display: none;和display: block;来实现。当按钮被点击时菜单的可见性会切换。
2.使用visibility实现模态框
HTML:
div idmodal stylevisibility: hidden;div idmodal-contenth2Modal Title/h2pModal content goes here./pbutton idcloseModalClose/button/div
/divbutton idopenModalOpen Modal/buttonCSS:
#modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;
}/* 其他样式 */JavaScript:
document.getElementById(openModal).addEventListener(click, function() {var modal document.getElementById(modal);modal.style.visibility visible;
});document.getElementById(closeModal).addEventListener(click, function() {var modal document.getElementById(modal);modal.style.visibility hidden;
});实例演示了如何使用visibility属性创建一个简单的模态框。点击按钮打开模态框点击模态框内的关闭按钮关闭模态框。
3.使用display和flex实现响应式网格布局
HTML:
div classgrid-containerdiv classgrid-itemItem 1/divdiv classgrid-itemItem 2/divdiv classgrid-itemItem 3/divdiv classgrid-itemItem 4/divdiv classgrid-itemItem 5/div
/divCSS:
.grid-container {display: flex;flex-wrap: wrap;
}.grid-item {flex: 1 0 200px; /* 每个网格项最小宽度200px */background-color: lightblue;margin: 10px;
}这个实例演示了如何使用display: flex;和flex-wrap: wrap;创建一个响应式的网格布局。网格项会根据容器宽度自动换行。
4.使用visibility和transition实现平滑的元素过渡效果
HTML:
div idelement classhiddenHover Me/divCSS:
#element {width: 200px;height: 200px;background-color: lightblue;transition: visibility 0.3s ease; /* 平滑过渡效果 */
}.hidden {visibility: hidden;
}.visible {visibility: visible;
}JavaScript:
document.getElementById(element).addEventListener(mouseenter, function() {this.classList.remove(hidden);this.classList.add(visible);
});document.getElementById(element).addEventListener(mouseleave, function() {this.classList.remove(visible);this.classList.add(hidden);
});这个实例演示了如何使用visibility属性和CSS过渡来创建一个平滑的元素过渡效果。当鼠标悬停在元素上时它会平滑地显示出来鼠标离开时它会平滑地隐藏起来。
四、总结
display属性
display属性用于定义元素应该生成的框的类型。常见的display属性值包括 none: 元素不会被渲染在页面上且不占据空间。block: 元素被渲染为块级元素占据一整行。inline: 元素被渲染为内联元素不会独占一行与其他内联元素在一行内显示。inline-block: 元素被渲染为内联块级元素同时具有块级元素和内联元素的特性。flex: 元素被渲染为弹性盒子容器。grid: 元素被渲染为网格容器。通过组合不同的display属性值可以创建各种各样的布局。
visibility属性
visibility属性用于控制元素的可见性。常见的visibility属性值包括 visible: 元素可见。hidden: 元素不可见但仍占据空间。与display: none;相比visibility: hidden;隐藏的元素仍会占据文档流中的位置只是不可见。visibility属性可以与过渡效果一起使用以创建平滑的元素过渡效果。
