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; }