CSS偏僻属性的用法（一）

Tang_jibin

已于 2023-05-29 23:40:29 修改

阅读量77

点赞数

分类专栏： Css专栏文章标签：前端 css 学习

于 2023-02-19 16:14:17 首次发布

本文链接：https://blog.csdn.net/Tang_jibin/article/details/129109095

版权

Css专栏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.text-align：justify 文本属性两端对齐

用法：首先给标签设置为inline-block/block(依情况而定)，其次给标签一个指定宽度，然后加上text-align:justify（文本对齐方式：两端对齐，仅限多行文本才能生效，且最后一行文本不生效），最后加上text-align-last:justify（最后一行对齐方式：两端对齐）就行了。

<body>
        <div>
            <span>姓名</span><input type="text">
            <br>
            <span>用户名</span><input type="text">
            <br>
            <span>用户密码</span><input type="password">
        </div>
</body>

<style>
            *{
                margin: 0 auto;
                padding: 0 ;
            }
            div{
                width: 500px;
            }
            span{
                display: inline-block;
                width: 100px;
                height: 50px;
                line-height: 50px;
                text-align: justify;
                text-align-last: justify;
            }
            input{
                height: 30px;
                width: 200px;
                margin-left: 20px;
                outline: none;
            }
</style>

效果图如下：

2.scroll-behavior:锚点跳转平缓滑动

<body>
        <div class="bigbox">
            <div class="cebianlan">
                <a href="#box1">为你推荐</a>
                <a href="#box2">猜你喜欢</a>
                <a href="#box3">值得推荐</a>
            </div>
            <h3>网站</h3>
            <div class="box1" id="box1">
                <p><a href="#">为你推荐</a></p>    
            </div>
            <div class="box2">
                <p><a href="#" id="box2">猜你喜欢</a></p>    
            </div>
            <div class="box3">
                <p><a href="#" id="box3">值得推荐</a></p>        
            </div>
        </div>
</body>

<style>
            *{margin: 0 auto; padding:0;}
            a{
                text-decoration: none;
                color: red;
            }
            html{
                scroll-behavior: smooth;
            }
            .bigbox{
                width: 1200px;
                text-align: center;
                background-color: beige;
                position: relative;
            }
            .box1,.box2,.box3{
                height: 1000px;
                background-color: aqua;
                margin-bottom:20px ;
            }
            .cebianlan{
                width: 50px;
                height: 150px;
                position: fixed;
                z-index: 99;
                top:50%;
                margin-top: -75px; 
                right: 0;
                background-color: wheat;
            }

            .cebianlan>a{
                display: block;
            }
</style>

3.text-overflow:文本溢出

text-overflow具有三个值。

1.clip，修剪文本。

2.今天的主角ellipsis，显示省略符号来代表被修剪的文本。

3.string，使用给定的字符串来代表被修剪的文本，不过一般都不使用这个值。

属性值ellipsis

1.单行文本显示省略号

<body>
        <p>培养培养培养培养培养培养</p>
</body>

<style>
            p{
                width: 100px;
                white-space: nowrap;        /* 控制文本显示不换行 */
                overflow: hidden;            /* 控制当内容溢出元素框时隐藏超出部分 */
                text-overflow: ellipsis;    /* 控制当内容溢出元素框时溢出显示为省略号 */    
            }
</style>

效果图如下：

2. 多行文本显示省略号

<body>
        <p>培养培养培养培养培养培养培养培养培养培养培养培养培养培养培养</p>
</body>

<style>
            p{
                width: 200px;
                overflow : hidden;                /* 控制当内容溢出元素框时隐藏超出部分 */
                text-overflow: ellipsis;        /* 控制当内容溢出元素框时溢出显示为省略号 */
                display: -webkit-box;            /* 将元素类型变更为弹性伸缩盒子类型显示 */
                -webkit-line-clamp: 2;            /* 用来限制在一个块元素显示的文本的行数 */
                -webkit-box-orient: vertical;    /* 设置或检索伸缩盒对象的子元素的排列方式 */
            }
</style>

效果图如下：

4.滚动条样式修改

以下就是滚动条的几个属性，主要有下面的七个属性

你可以使用以下伪元素选择器去修改基于 webkit 的浏览器的滚动条样式：

::-webkit-scrollbar 定义滚动条整体部分样式，比如宽度
::-webkit-scrollbar-track 滚动条轨道
::-webkit-scrollbar-thumb 滚动条上的用来滚动的滑块部分
::-webkit-scrollbar-track-piece 滚动条没有滑块的剩余轨道部分
::-webkit-scrollbar-button 滚动条上的上下箭头
::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
::-webkit-resizer 定义出现在元素右下角可以拖动用来调整大小的滑块的样式

注意：这些属性仅在基于 Blink 或 WebKit的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及其它基于 WebKit 的浏览器）上可用。滚动条样式的标准方法可用 scrollbar-color和scrollbar-width。

.hangye-explore-box1-bottom::-webkit-scrollbar {
   /*高宽分别对应横竖滚动条的尺寸*/
    width: 5px;  
  }

  /*滚动条里面小方块*/
.hangye-explore-box1-bottom::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d1d4db;
  }
  /*滚动条里面轨道*/
.hangye-explore-box1-bottom::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #EDEDED;
  }

效果图如下：

正常滚动条

调整后的滚动条

5.清除图片自带的间距

尽管在设置了全局清除间距之后，但是图片还是都会自带一点点的间距，而这时候我们就可以利用vertical-align：middle解决这个问题。

<div>
            <img src="day14/img/pic1.jpg" alt="">
</div>

 <style>
            *{
                margin: 0 auto;                /* 清除全局属性的默认间距  */
                padding: 0 ;
            }
            div{
                background-color: aqua;
            }
</style>

如图

图片自带的间距

<div>
            <img src="day14/img/pic1.jpg" alt="">
</div>

<style>
            *{
                margin: 0 auto;
                padding: 0 ;
            }
            div{
                background-color: aqua;
            }
            img{
                vertical-align: middle;
            }
</style>

解决间距后的图片