个人简介
- 作者简介:大家好,我是阿牛
- 个人主页:馆主阿牛
- 支持我:点赞+收藏??+留言
- 系列专栏:web开发
- 格言:迄今所有人生都大写着失败,但不妨碍我继续向前!
文章图片
目录
-
- 个人简介
- 元素的显示与隐藏
-
- display 属性
- visibility 可见性
- overflow 溢出
- 上期传送门
元素的显示与隐藏 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!
本质:让一个元素在页面中隐藏或者显示出来。
- display 显示隐藏
- visibility 显示隐藏
- overflow 溢出显示隐藏
display : none ;隐藏对象display 隐藏元素后不再占有原来的位置。
display : block ;除了转换为块级元素之外,同时还有显示元素的意思
后面应用极其广泛,搭配 JS 可以做很多的网页特效。
Document - 锐客网
>
.demo1{
display: none;
/*隐藏demo1,此时demo1不占位置*/
width: 100px;
height:100px;
background-color: pink;
}
.demo2{
width: 100px;
height: 100px;
background-color: skyblue;
}
文章图片
visibility 可见性 visibility 属性用于指定一个元素应可见还是隐藏。
visibility : visible ; 元素可视visibility 隐藏元素后,继续占有原来的位置。
visibility : hidden ; 元素隐藏
如果隐藏元素想要原来位置,就用 visibility : hidden
如果隐藏元素不想要原来位置,就用 display : none (用处更多(重点))
Document - 锐客网
>
.demo1{
visibility: hidden;
/*隐藏demo1,此时demo1占位置*/
width: 100px;
height:100px;
background-color: pink;
}
.demo2{
width: 100px;
height: 100px;
background-color: skyblue;
}
文章图片
overflow 溢出 overflow 属性指定了如果内容溢出一个元素的框(超其指定高度及宽度)时,会发生什么。
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
但是如果有定位的盒子,请慎用 overflow : hidden, 因为它会隐藏多余的部分。
Document - 锐客网
>
.demo1{
overflow: scroll;
width: 100px;
height:100px;
background-color: pink;
}
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
文章图片
上期传送门 【css|css中元素的显示与隐藏】上期看这里:
css中的选择器
css盒子模型及其实战案例(上)
css盒子模型及其实战案例(下)
css网页布局之浮动及其实战案例(超详细)
css中的定位详解
推荐阅读
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 网络|一文彻底搞懂前端监控
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等