CSS 笔记

还是有点混淆我需要一个更好的区分记忆 scaleX沿纵向伸缩 scaleY验横向伸缩

单行溢出变小点 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; // flex的shink: true时默认支持单行溢出 // 如果是flex: auto; 则需要新建layer

多行溢出 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; // 如果需要文本居中的话,则(注意, 有时候这一行会被没输出到css里去...因为autoprefixer) /* autoprefixer: ignore next */ -webkit-box-orient: block-axis/vertical;

层级调控

阴影

滚动穿透的防御

动画: animation: name duration timing-function delay iteration-count direction fill-mode;

禁止选择: -moz-user-select: none; -khtml-user-select: none; user-select: none;

无滚动条: .no-scrollbar::-webkit-scrollbar { width: 0px; }

无法撑开position: absolute;的容器, 使用white-space:nowrap;

hover + after &:hover&::after { transform: scaleX(0.95); }

cursor: pointer; 移动端背景色去除 *{ -webkit-tap-highlight-color: transparent; }

IOS 8 不支持嵌套calc, 所以less变量的时候不要呆calc部分 IOS top必须有值 IOS 伪类after content需要写在第一位 IOS 8-9 getBoundingClientRect有bug... IOS 8 display: flex;之后子需要有flex: 0 0 auto; 默认是flex: auto, 会挤压

MAC 时间格式化兼容

font-family 先写英文后写中文,这样先渲染英文的英文,后渲染中文的中文。如果先写中文,则会渲染中文的英文和中文的中文。

三角形: border-width: 0 6px 7px; border-style: solid; border-color: transparent transparent #4e5153;

点击穿透: pointer-events: none;

hover延迟移入,无延迟移出 :hover { transition-delay: 0.3s; }

{ transition-delay: 0s; }

flex默认值: 0 1 auto(grow, shrink, basis) 两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

第一个子元素margin-top失效解决办法: // TODO:

flex-auto + ellipsis-line-1 会撑开容器解决办法 可以通过position: absolute;新建一层layer,宽高将会继承原有容器的宽高,并且不会被内容撑开 样例:

// 使用flex实现左固定, 右边自适应两栏布局, 但是右边自适应的布局会被white-space: nowrap;强行撑开 // 并且width: 100%也无法继承与自适应之后的width, 而是把内容层的计算之后的width
// 这里新建一层layer

padding: 23px 16px 0; 上 左右 下

scss: min-resolution: 2dppx -> -webkit-min-device-pixel-ratio

zoom是通过改变属性值实现的缩放

可以轻松包裹内容 width: fit-content;

文字特效 https://www.zhangxinxu.com/wordpress/2015/05/css3-mix-blend-mode-background-blend-mode/

选择器权重

/*by 司徒正美 All rights reserve*/
*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
/* 通配符选择器权重为0,在IE中,它无法区分元素节点与注释节点 */
li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
/* 标签选择器为1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
/* 标签选择器与伪元素为1 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
/*这里存在后代选择器的概念,但计算权重时像它这样的关系选择器会被进一步肢解,当成两个标签选择器了。*/
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
/* 无视后代选择器与相邻选择器,只看它里面的选择器的成分 */
h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
/* 这个相邻选择器由标签选择器与属性选择器组成,属性选择器为10 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
/*无视后代选择器,3个标签与1个类选择器,类(className)在DOM中的位置比较显赫,
拥有专门的getElementByClassName,等级为c,合计得分13 */
li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
/*两个类选择器与一个标签选择器,合计得分21 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
/*getElementById,在页面上获得元素最快的方式,权重为b,得分100 */
style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
/*行内样式,得分1000,会覆盖内部样式或外部样式的设置*/
选择器	       表达式或示例	        说明	 权重
通配符选择器	 *	                      	 0
标签选择器     h1	元素的tagName	           1
类选择器    	 .aaa		                     10
属性选择器	   [title]	          	       10
ID选择器	     #aaa	            	         100
相邻选择器  	 selecter + selecter	拆分为两个选择器再计算	
兄长选择器  	 selecter ~ selecter	拆分为两个选择器再计算	
亲子选择器  	 selecter > selecter	拆分为两个选择器再计算	
后代选择器     selecter selecter	  拆分为两个选择器再计算	
各种伪类选择器 如:link, :visited, :hover, :active, :target, :root, :not等	10
各种伪元素	   如::first-letter,::first-line,::after,::before,::selection	1

background-clip很有用, 有时候div应用了padding来做间距, 但是背景不应该包含padding则可以使用background-clip: content-box;

文字特效会用到: -webkit-background-clip: text; -webkit-text-fill-color: transparent; https://css-tricks.com/fun-line-height/

border-image顺序不能换: border-image: linear-gradient( 90deg, #ffffff 0%, #cbcbcb 5%, #cbcbcb 95%, #ffffff 100% ); border-image-width: 100%;

Houdini 是美国的伟大魔术师,擅长逃脱术,很适合想将 CSS 从浏览器中解放的概念