css学习笔记

No丶regret
77 阅读5分钟

1. css

placeholder 初始内容

input::-webkit-input-placeholder {
    color: #ffffff;
}

滚动

  • 当用户手动导航或者触发滚动操作时，为一个滚动框指定滚动行为，
  • 用户通过鼠标滑轮滚动或者手机触屏滚动，不受这个属性的影响
  • 在根元素中指定这个属性时，它反而适用于视窗。
scroll-behavior: auto; // 默认
auto    默认值，表示滚动框立即滚动到指定位置。
smooth  表示允许滚动时采用平滑过渡，而不是直接滚动到相应位置，最常见的比如回到顶部按钮和锚点。

文本

letter-spacing: 10px;  		/*字间距*/
text-indent: 2em;  			/*首行缩进*/
word-break: break-all;      /*自动折行*/
text-decoration: none;
/*
    none          无
    underline     下划线
    overline      上划线
    line-through  删除线
    blink         闪烁的文本
*/
word-spacing: 10px;         /*词间距*/
white-space: nowrap;		/* *文本* 换行 如何处理元素内的空白*/
/*
    normal    默认，保留空白
    pre       保留空白<pre>
    nowrap    不换行
    pre-wrap  保留空白符，换行
    pre-line  合并空白符，保留换行符
*/

user-select 禁止选择文本

-moz-user-select:none;
-webkit-user-select:none;
user-select:none;

::selection 选择文本的样式

div::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

:not not选择器

/* div中不是最后一个元素的设置下边框(样式) */
div:not(:last-child){
  border-bottom: 1px solid #ebedf0;
}

caret-color 光标颜色

input {
    caret-color: #ffd476;
}

type="number" 尾部箭头

<input type="number" />

input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

IOS 滚动条卡顿

body,html{   
  -webkit-overflow-scrolling: touch;
}

隐藏滚动条

div::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

单行文本溢出 隐藏显示省略号

p {
  white-space: nowrap;		/* 不换行 */
  overflow: hidden;			/* 内容溢出隐藏 */
  text-overflow: ellipsis;	/* 文本溢出显示省略号 */
}

多行文本溢出 隐藏显示省略号

.more-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 设置n行，也包括1 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

filter: grayscale(1); 灰色网页

body{
  filter: grayscale(1);		/* 滤镜，灰度（选中元素整体变成灰色） */
}

2. css3

columns 多列

columns: 100px 3;	/* 列宽、列的数量 */
-webkit-columns: 100px 3; /* Safari and Chrome */
-moz-columns: 100px 3; /* Firefox */

column-count: 3;		/* 列的数量 */
column-width:100px;		/* 列的宽度 */
column-fill: auto;		/* 列填充，避免列元素被截断（子元素加overflow） */
			balance		/* 列长短平衡。浏览器应尽量减少改变列的长度 */
			auto		/* 列顺序填充，他们将有不同的长度 */
column-gap: 40px;		/* 列间隙 */
column-rule: 3px outset #ff00ff;	/* 列 宽度、样式、颜色 */

direction 文字方向

unicode-bidi: bidi-override;
direction:rtl;	/* 文字方向 */
		  ltr	/* left to right */
		  rtl	/* right to left */

empty-cells 表格中空白单元格边框

empty-cells:hide;	/* 表格中空白单元格边框显示 */
			hide	/* 不显示空白单元格的边框 */
			show	/* 显示空白单元格的边框 */

filter 滤镜

filter: none;	/* 滤镜属性，一般用于img */
		none		/* 无效果 */
		blur(px)	/* 高斯模糊 */
		grayscale(%)	/* 灰度 */
		brightness(%)	/* 如果值是0%，图像会全黑。值是100%，则图像无变化 */
		contrast(%)	/* 图像的对比度 */
		hue-rotate(deg)	/* 色相旋转，超过360deg的值相当于又绕一圈 */
		opacity(%)	/* 透明度 */
		saturate(%)	/* 色相饱和度 */
		sepia(%)	/* 图像转成深褐色 */

@font-face 设置字体

@font-face
{
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf');
}

object-fit 裁剪图片

object-fit: fill;	/* 默认，内容拉伸填充整个内容容器 */
			contain	/* 保持原有尺寸比例。内容被缩放 */
			cover	/* 保持原有尺寸比例。但部分内容可能被剪切 */
			none	/* 保留原有元素内容的长度和宽度，也就是说内容不会被重置 */
			scale-down	/* 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。 */

object-position 图片位置

object-position: 5px 10%;	/* 根据容器大小重置图片的大小，并设置图片的位置 */
			   /* x   y */

writing-mode 文本书写方向

writing-mode: horizontal-tb;	/* 文本在垂直和水平方向上的排布 */
			  horizontal-tb		/* 水平: 自上而下 */
			  vertical-rl		/* 垂直: 自右而左 */
			  vertical-lr		/* 垂直: 内内容从上到下   水平: 从左到右 */
			  sideways-rl		/* 垂直: 从上到下 */
			  sideways-lr		/* 垂直: 从下到上 */

grid 网格布局

display: grid;			/* 网格布局 */

grid: 160px / auto auto;/* 2列，第1行高160 */
grid-template: 150px / auto auto auto;	/* 3列，第1行高150 */
grid-template-columns: auto auto auto auto;	/* 做成4列 */
grid-template-rows: 100px 300px;		/* 行的高度，从第1行开始 */

grid-row-gap: 50px;		/* 网格 行间隔 */
grid-column-gap: 50px;	/* 网格 列间隔 */
grid-gap: 10px;			/* 网格 行和列的间隔 */

row-gap: 1px;			/* 网格 行间隔 */
gap: 10px 20px;			/* 网格 行和列的间隔 */

grid-row: 2 / span 2;	/* 子元素：第2行的第1列开始，跨2行 */
grid-row-end: span 3;	/* 子元素：竖跨几行 */
grid-row-start: 3;		/* 子元素：在哪一行的第1列开始 */
grid-area: 2 / 1 / span 2 / span 3;		/* 子元素: 从第2行，第1列开始，横跨2行，3列 */
		/* 行  列   几行      几列 */

grid-auto-rows: 40px;		/* 行高 */
grid-auto-columns: 10px;	/* 列宽 */
grid-column: 1 / 5;			/* 子元素：在网格中的占位，从第1个开始，到第5个结束（不包括第5个） */
grid-column-start: 2;		/* 子元素：元素在网格的开始位置，第2个 */
grid-column-end: span 3;	/* 子元素：元素在网格的结束位置 */
		/* 初始位置开始，第3个位置结束，小于开始位置时无效 */
avatar
文章
阅读
粉丝