【总结】CSS 常用技巧

最新推荐文章于 2022-11-10 18:00:16 发布

置顶

很菜的前端

最新推荐文章于 2022-11-10 18:00:16 发布

阅读量180

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_41030302/article/details/103153750

版权

这篇博客总结了CSS中的一些常用技巧，包括元素导致的相邻内联元素偏移问题、省略号的实现、文本换行控制、两端对齐、竖向排列、禁止用户选择文本、input框样式定制、自适应布局、选择器应用、横向列表、关闭输入框自动补全以及利用伪类进行表单验证等。

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

一、`inline-block` 元素导致相邻的内联元素向下偏移

背景：如果 inline-block 元素设置了 overflow:hidden ，那么将会导致相邻的内联元素向下偏移。

示例：

在页面上有三个元素：

<div>123</div>
<div>456</div>
<span>this is a span</span>

样式：

div{
   
    display: inline-block;
    overflow: hidden;
    border: 1px solid red;
}
span{
   
    border: 1px solid indianred;
}

此时，相邻的内联元素会出现向下偏移的怪异现象：

在这里插入图片描述
解决的办法很简单，只需要在 inline-block 元素上加上一行代码：

div{
   
    display: inline-block;
    overflow: hidden;
    border: 1px solid red;
    vertical-align: bottom;/*加上这行代码*/
}

结果：

在这里插入图片描述

二、省略号

背景：截断溢出文本，显示省略号。

示例：

有一个 200*200 的 div 元素，里面有很长的文本：

<div>
    这是一个很长的文本
    这是一个很长的文本
    这是一个很长的文本
    这是一个很长的文本
    这是一个很长的文本
    这是一个很长的文本
    这是一个很长的文本
    这是一个很长的文本
    这是一个很长的文本
    这是一个很长的文本
    这是一个很长的文本
</div>

样式：

div{
   
    height: 200px;
    width: 200px;
    border: 1px solid red;
}

图示：
在这里插入图片描述

1.单行文本

div{
   
    height: 200px;
    width: 200px;
    border: 1px solid red;
    overflow: hidden;/*溢出部分隐藏*/
    text-overflow: ellipsis;/*显示省略号*/
    white-space: nowrap;/*文本不换行*/
}

2.多行文本

div{
   
    width: 200px;
    border: 1px solid red;
    display: -webkit-box;
    -webkit-box-orient: vertical;/*文本的排列方向*/
    -webkit-line-clamp: 3;/*显示文本的行数*/
    word-break: break-all;/*允许在单词内换行*/
    overflow