css,html走的坑:(1.2)

!important

!important意为增加它的权重

.content_list .list_number2 {
   
    color: transparent !important;
    background: url("img/wave.gif") no-repeat 0 center;
}

• 在ie6及以下的版本中,!import并不会抹掉在!import后面定义的规则

such as:

div{color:#f00!important;color:#000;}

在上述代码中,IE6及以下浏览器div的文本颜色为#000,!important并

没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00

• ie6及以下版本的浏览器要使用!import并使其覆盖后面的规则,可以使用：

div{color:#f00!important;}
div{color:#000;}

在上述代码中,IE6及以下浏览器中div的文本颜色表现与其它浏览器一致,都为#f00

参考文章

letter-spacing

设置字符之间的间距:

/*针对中文 */
letter-spacing: 0.5em;
/*针对英文 */
 word-spacing: 0.5em;

定义和用法：

letter-spacing 属性可以增加或减少字符间的空白(字符间距).

该属性定义了在文本字符框之间插入多少空间.由于字符字形通常比其字符框要窄,指定长度值时,

会调整字母之间通常的间隔.因此,normal 就相当于值为 0.

注释：允许使用负值,这会让字母之间挤得更紧.

参考文章:忘了,好像还是w3c的

指定网页的icon图标

写在head标签里面,用以指定网页的icon图标,只需更改路径即可

<link rel="shortcut icon" href="https://www.vmall.com/favicon.ico"/>

user-select

意为用户无法选中该内容:

user-select: none;

• 语法

• 取值

说明：

#####设置或检索是否允许用户选中文本.

• IE6-9不支持该属性,但支持使用标签属性 onselectstart=“return false;” 来达到 user-select:none 的效果；
  Safari和Chrome也支持该标签属性；
  
• 直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的标签属性 unselectable=“on” 来达到
  user-select:none 的效果；unselectable 的另一个值是 off；
  
• 除Chrome和Safari外,在其它浏览器中,如果将文本设置为 -ms-user-select:none;,则用户将无法在该文本块
  中开始选择文本.不过,如果用户在页面的其他区域开始选择文本,则用户仍然可以继续选择将文本设置为
  -ms-user-select:none; 的区域文本；
  
• 对应的脚本特性为userSelect.
  

参考文章

placeholder

• 定义和用法:
  
  placeholder 属性提供可描述输入字段预期值的提示信息(hint).
  
  该提示会在输入字段为空时显示,并会在字段获得焦点时消失.

placeholder : 设置input框内的默认内容

<input type="text" placeholder="手机号/邮件地址/华为号">
<input type="text" placeholder="密码">

如图:

white-space

css中使用,取消自动换行:

 /*取消自动换行*/
        white-space: nowrap;

vertical-align

vertical-align:设置元素的垂直对齐方式

博客引用地址
vertical-align是CSS中的一个属性,可以用于设置元素的垂直对齐方式,下面我们就来具体看一下vertical-align属性的用法.

vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值.这会使元素降低而不是升高.在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式.

vertical-align属性的值比较多:

在表格中,这个属性设置单元格内容的对齐方式.vertical-align应用最多的应该是在td内,控制内部对象位置.

vertical-align
垂直对齐一幅图像：

i{
   
    vertical-align:middle;
}

它可选的值([外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WMH5kQtl-1609165364822)(https://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp)]):

object-fit

• 说明:

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度

object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等.

您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式.

• 个人理解:

在video标签中使用,作用于img标签中的background-size一样

  video {
    width: 100%;
    height: 100%;
    background: red;
    object-fit: cover;
  }

参考文章

video

音频格式的 MIME 类型:

video标签内的可选属性:

参考文章

align-items

设置了 flex 容器的对齐方式

css语法:

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

属性值:

例如:

align-items:center;

align-items: flex-start;

参考文章