web前端学习（二十二） |
您所在的位置：网站首页 › web中的overflow › web前端学习（二十二） |
web前端学习（二十二）
|
web前端学习（二十二）——CSS3元素的显示（display）、可见性（visibility）与溢出（overflow）属性的相关设置
原创
mb5fa91f7dbecc9 2023-05-09 10:14:04 ©著作权 文章标签 html CSS css 文章分类 JavaScript 前端开发 ©著作权归作者所有：来自51CTO博客作者mb5fa91f7dbecc9的原创作品，请联系作者获取转载授权，否则将追究法律责任 1.CSS元素的显示（display）、可见性（visibility）display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。 1.1 隐藏元素：display:none或visibility:hidden隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。 ①visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 ②display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 小实例1： CSS简单学习 h1.hidden { display: none; } 这是一个可见标题 这是一个隐藏标题注意，该实例中的隐藏标题不占用空间。
注意，该实例中的隐藏标题仍然占用空间。
块元素是一个元素，占用了全部宽度，在前后都是换行符。 块元素的例子： 内联元素只需要必要的宽度，不强制换行。 内联元素的例子： 通过display: inline; 可以将块元素的显示更改为内联元素的显示。 通过display: block; 可以将内联元素的显示更改为块元素的显示。 小实例： CSS简单学习 li { /* display属性的值为"inline"的结果,两个元素显示在同一水平线上。*/ display: inline; } span { /* display属性值为"block"的结果,这两个元素之间的换行符。*/ display: block; }列表中链接依次水平显示： 百度 腾讯 阿里巴巴 华为 京东 AD Carry 圣枪游侠、战争女神、探险家 深渊巨口 辅助 熔岩巨兽、牛头酋长、魂锁典狱长 弗雷尔卓德之心
即 visibility: collapse; 小实例： CSS简单学习 table,th,td { border: 1px solid black; } tr.collapse { visibility: collapse; } 英文 中文 Cat 猫 Dog 狗 Pig 猪
CSS overflow 属性用于控制内容溢出元素框时显示的方式。可以控制内容溢出元素框时在对应的元素区间内添加滚动条。 overflow属性有以下值： （注意：overflow 属性只工作于指定高度的块元素上。） 值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 2.1 overflow: visible; CSS简单学习 div { background-color: aqua; width: 200px; height: 50px; border: 1px dotted black; overflow: visible; }这里的文本内容会溢出元素框！！！ 这里的文本内容会溢出元素框！！！ 这里的文本内容会溢出元素框！！！
这里的文本内容是可以滚动的，滚动条方向是垂直方向。 这里的文本内容是可以滚动的，滚动条方向是垂直方向。 这里的文本内容是可以滚动的，滚动条方向是垂直方向。 这里的文本内容是可以滚动的，滚动条方向是垂直方向。 这里的文本内容是可以滚动的，滚动条方向是垂直方向。 这里的文本内容是可以滚动的，滚动条方向是垂直方向。 这里的文本内容是可以滚动的，滚动条方向是垂直方向。 这里的文本内容是可以滚动的，滚动条方向是垂直方向。 这里的文本内容是可以滚动的，滚动条方向是垂直方向。 这里的文本内容是可以滚动的，滚动条方向是垂直方向。
赞 收藏 评论 分享 举报 上一篇：RabbitMQ——消息发送和消息接收机制 下一篇：web前端学习（二十三）——CSS3定位（position）、元素裁剪（clip）及鼠标样式（cursor）属性的相关设置 |
【本文地址】