web前端入门到实战：11种常用css样式之滚动条与显示隐藏

最新推荐文章于 2024-03-27 10:30:00 发布

白T恤架构师

最新推荐文章于 2024-03-27 10:30:00 发布

阅读量254

点赞数

本文链接：https://blog.csdn.net/ITHHH111/article/details/105432912

版权

本文介绍了CSS中控制滚动条显示的属性，如overflow-x、overflow-y和overflow，以及如何使用display和visibility来实现元素的隐藏与显示。display:none;将元素不占位地隐藏，而visibility:hidden;则保持元素占位但不可见。

摘要由CSDN通过智能技术生成

滚动条展示 overflow-x: hidden;/是否对内容的左/右边缘进行裁剪/overflow-y: hidden;/是否对内容的上/下边缘进行裁剪/overflow:scroll;/左右滚动/overflow: hidden;/截取/overflow: auto;/自动/
显示与隐藏可以用display/* display: none; // display: block; // display: inline-block; */visibility显示与隐藏visibility:hidden;/隐藏/visibility: visible;/显示/需要注意的是display是不占位隐藏,visibility是占位隐藏；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>11种常用css样式学习大结局滚动条与显示隐藏</title>
 7     <style type="text/css">
 8     *{
 9         margin: 0;
10         padding: 0;
11         font: 14px/1.5em "Microsoft YaHei";
12     }
13     /*滚动条常见样式展示*/
14     div.box{
15         width: 300px;
16         height: 2