css笔记

一、常用易忘

　　1.文本换行　　

 word-wrap: break-word;

• normal:默认属性值，表示文本不受限制，可以超出边界；
• break-word:表示当文本超出边界时，自动将单词截断换行，但如果单词本身就很长，仍然会超出边界；
• anywhere:表示文本可以在任何地方换行；
• overflow-wrap:表示文本可以在“单词”周围换行，如果遇到长单词，则截断换行。

 

　　　　word-wrap并不总是理想的解决方案，因为有时候要避免截断一个单词，而是希望它在任何地方换行。在这种情况下，我们可以使用word-break属性。

　　　word-break: break-all;

 

• normal: 默认属性值，表示文本受限，不允许在单词中间截断。
• break-all:表示任意位置换行，甚至可以在单词中间断开。但是会破坏单词完整性，不建议使用。
• keep-all:表示文本只在空格或连字符处断开，适用于亚洲语言等不使用空格的语言。

 

　　　white-space: pre;

　　　　white-space是CSS中用来控制文本中空格和换行的属性。它有以下几种取值：

• normal:默认属性值，表示文本中多个空格和换行都会被合并为一个空格；
• pre:表示文本中多个空格和换行都会被保留，不会被合并；
• nowrap:表示文本不会被自动换行。
• pre-wrap:表示文本中多个空格和换行会被保留，但是会自动换行，不会出现水平滚动条。
• pre-line:表示文本中多个空格会被合并成一个空格，但是换行会被保留，会自动换行，不会出现水平滚动条。

• white-space:break-spaces  （chatgpt就是使用的这个）

  break-spaces 与 pre-wrap的行为相同，也就是说连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充时才会换行（软换行）。除了：

  • 任何保留的空白序列总是占用空间，包括在行尾。如果行尾的空白符够多就会看到空白符占用了一行，pre-wrap 是没有这种现象的。
  • 每个保留的空格字符后都存在换行机会，包括空格字符之间。
  • 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

 　　2.背景图片

　　如果要拉伸到全背景

background-size:100% 100%;

background-size: length|percentage|cover|contain;

• length:

  设置背景图像的高度和宽度。

  第一个值设置宽度，第二个值设置高度。

  如果只设置一个值，则第二个值会被设置为 "auto"。

  ；
• percentage:

  以父元素的百分比来设置背景图像的宽度和高度。

  第一个值设置宽度，第二个值设置高度。

  如果只设置一个值，则第二个值会被设置为 "auto"。

  ；
• cover:

  把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

  背景图像的某些部分也许无法显示在背景定位区域中。

  。
• contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

二、特殊操作

　　1. 渐变色边框

　　相当好用，引用至：这里

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}

 　　2.修改input placehold 样式

　　input 可以改成类  .xxxxx

input::-webkit-input-placeholder{   /* 使用webkit内核的浏览器 */
    color: #E0484B;
}
input:-moz-placeholder{    /* Firefox版本4-18 */
    color: #E0484B;
}              
input::-moz-placeholder{    /* Firefox版本19+ */
    color: #E0484B;
}              
input:-ms-input-placeholder{   /* IE浏览器 */
    color: #E0484B;
}