一些用意思的css属性

明日月初

已于 2024-06-28 12:27:07 修改

阅读量456

点赞数 8

文章标签： css 前端 javascript

于 2024-03-24 11:21:31 首次发布

本文链接：https://blog.csdn.net/qweasl_/article/details/136980367

版权

`flex-shrink`

是一个用于Flexbox布局的属性。它用于指定一个flex容器中的flex项（flex item）在空间不足时是否收缩以适应容器。

当一个flex容器的空间不足以容纳所有的flex项时，flex-shrink属性决定了各个项的收缩比例。默认情况下，所有的flex项都有一个默认的flex-shrink值为1，表示它们可以收缩以适应容器。

当某个flex项具有flex-shrink: 0;时，它将不会收缩，即使容器的空间不足。这意味着这个特定的项将保持其原始尺寸，而其他具有默认flex-shrink值的项可能会收缩以适应容器。

 <div class="content">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

   .content{
            display: flex;
        }
        .item{
            width: 20rem;
            height: 20rem;
            background-color: yellow;
            flex-shrink: 0;
            margin-left: 3rem;
        }

visibility

visibility CSS 属性显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 <table> 中的行或列。

visibility: hidden;
display : none;
/*可以对比一下二者的区别*/

nextElementSibling

nextElementSibling 返回当前元素在其父元素的子元素节点中的后一个元素节点，如果该元素已经是最后一个元素节点，则返回 null, 该属性是只读的。简单来说就是获取某元素后面的一个元素

privousElementSibling

简单来说就是获取某元素前的一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="top"></div>
    <div class="center"></div>
    <div class="button"></div>
    <script>
        let center = document.querySelector(".center")
        let button = center.nextElementSibling;
        let elTop = center.previousElementSibling
        console.log(button.className) //button
        console.log(elTop.className) //top
    </script>
</body>
</html>

隐藏滚动条

我知道的几个方法：

1.这个方法有个缺点，他会把超出的内容也给隐藏

  overflow-x: hidden;
  overflow-y: hidden;

2.将滚动框和滚动条的颜色与整个页面的背景一样，

/* 隐藏滚动条 */
.element-class::-webkit-scrollbar {
  width: 0.5em;
  background-color: #F5F5F5;
}

/* 隐藏滚动条上的滑块 */
.element-class::-webkit-scrollbar-thumb {
  background-color: #000000;
}

3.scrollbar-width:none;

超出盒子的文本用省略号替代

下代码缺一不可，

注意：text-overflow 属性只对那些在块级元素溢出的内容有效，若你给其添加了display:flex；可能不生效

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

滚动条

scrollbar-color 设置滚动条轨道条和滑块的颜色

scrollbar-color: rebeccapurple green; /* 两个有效的颜色。
第一个应用于滚动条的滑块，第二个应用于轨道。 */

scrollbar-width 设置显示时的滚动条的最大宽度

/* 关键字值 */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

明日月初

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一些用意思的css属性

是一个用于Flexbox布局的属性。它用于指定一个flex容器中的flex项（flex item）在空间不足时是否收缩以适应容器。时，它将不会收缩，即使容器的空间不足。这意味着这个特定的项将保持其原始尺寸，而其他具有默认。属性决定了各个项的收缩比例。默认情况下，所有的flex项都有一个默认的。当一个flex容器的空间不足以容纳所有的flex项时，值为1，表示它们可以收缩以适应容器。值的项可能会收缩以适应容器。当某个flex项具有。
复制链接

扫一扫