Python input是否可以隐藏输入 input如何隐藏输入内容

1、input输入框不显示输入记录

**autocomplete = "off"**

2、设置字体间距

**letter-spacing: 2px;**
文本上下居中
**vertical-align: middle;**

3、隐藏input的number右侧增减小按钮

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}

4、设置超出省略号隐藏(…)

// 一行
{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
// 多行
{
	height: 70px;
	overflow: hidden;
	display:-webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

5、width: fit-content：宽度向内自适应

在实践中也许会遇到这么一种情况，我们给一个固定宽度的div里面输入一厂串连续的英文字母，如果输入的足够多，文字会溢出来，就像这样：

只有当输入的是英文的时候才会出现这种情况，因为一长串的英文字母会被默认为是一个单词，而汉字则不会有这个问题。

一般情况下解决这类问题我会添加换行断点的属性，比如：word-wrap或者word-break。

而fit-content属性可以把内容包裹起来

设置：width:-moz-fit-content;(我用的火狐浏览器)

实例： 设置了超出隐藏

鼠标移动上显示全部内容：

代码：

a{ // 内容标签
	display: block;
    margin-right: 40px;
    overflow: hidden;
    padding-left: 4px;
    text-overflow: ellipsis;
    -webkit-transition: color .3s;
    transition: color .3s;
    white-space: nowrap;
}
li:hover{ // 父元素块级标签
	width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 10;
}

fit-content还可以配合margin：auto；用来设置元素居中：

<style>
	.fit{
		margin： 0 auto;
		width: -moz-fit-content;
	}
</style>
<div class='fit'>
	<img src="img/pic01.jpg">
</div>

但fit-content也有一个小问题：如果一个元素的width已经设置过，再设置width：fit-content；会冲突。最终div的宽度以div内子元素的宽为准，换句话说也就是“向内自适应”。比如咱们创建一个div，在这个div里面放一个100*100的图片，给div的宽度设置为width：200px; 然后再写width：fit-content；虽然还是会居中，但实际这个div的宽还是100。

还有一个问题就是目前这个属性的兼容性不是特别的好，用的时候要加上前缀。

6、滚动条组成

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
设置滚动周隐藏

::-webkit-scrollbar {
   display: none;
 }

7、页面隐藏的三种方式区别

从空间角度：
diplay: none; 不占用页面空间
visibility: hidden; 占用空间；
opacity: 0; 占用空间；

触发事件角度：
display: none; 不在页面结构上，不会绑定触发事件
visibility: hidden; 在页面，但是也不会触发绑定事件
opacity: 0; 可以触发绑定的事件

从动画角度(transition)：
display: none; 是无效的
visibility：hidden；是无效的
opacity: 0; 是有效的

8、背景设置

background: url(https://oss.casiostore.com.cn/pagesetting/5e1827edda8ec.jpg) fixed top center no-repeat;

fixed： 当页面的其余部分滚动时，背景图片不会移动。（要设置元素高度）
scroll： 默认值。背景图像会随着页面其余部分的滚动而移动。
inherit： 规定应该从父元素继承 background-attachment 属性的设置。

HTMLDOM ：document.body.style.backgroundAttachment="fixed";

.bg {
	background-attachment: fixed;
}

9、滚动条设置

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101F1C, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(#101F1C, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(#101F1C, 1);
}

10. 动画 animation 维持结束状态

animation-fill-mode: forwards;

.tip-box {
  animation: transfromLeft 500ms 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes transfromLeft {
  0% {
    right: 0;
    opacity: 0;
  }
  100% {
    right: 70%;
    opacity: 1;
  }
}

11. pointer-events 指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件目标

除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
设置一个背景覆盖所有元素，但是又不能影响其他元素的hover/click事件，就可以设置z-index: 99999; pointer-events: none;