常见布局

不影响页面布局

transform: scale(0,0)

占据位置不响应绑定事件

不会触发浏览器重排

页面中不存在存在存在重排会不会不会重绘会会不一定自身绑定事件不触发不触发可触发transition不支持支持支持子元素可复原不能能不能被遮挡的元素可触发事件能能不能opacity和rgba区别

opacity 取值在0到1之间，0表示完全透明，1表示完全不透明。

.aa{opacity: 0.5;}

rgba中的R表示红色，G表示绿色，B表示蓝色，三种颜色的值都可以是正整数或百分数。A表示Alpha透明度。取值0~1之间，类似opacity。

.aa{background: rgba(255,0,0,0.5);}

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。

总结：opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。

常见布局

两栏布局

左边宽度固定，右边宽度自适应。

利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1

利用浮动。左边元素宽度设置为200px，且设置向左浮动。右边元素的margin-left设置为200px，宽度设置为 auto（默认为auto，撑满整个父元素）。margin-left/padding-left/calc

利用浮动。左边元素宽度固定，设置向左浮动。右侧元素设置 overflow: hidden; 这样右边就触发了 BFC， BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。 float + overflow:hidden

左列左浮动,将自身高度塌陷,使得其它块级元素可以和它占据同一行位置右列利用自身流特性占满整行

右列设置overflow,触发BFC特性,使自身和左列浮动元素隔开,不沾满整行绝对定位父级相对定位左边absolute定位，宽度固定。设置右边margin-left为左边元素的宽度值。

绝对定位，父级元素相对定位。左边元素宽度固定，右边元素absolute定位，left为宽度大小，其余方向为 0。(有歧义,谨慎使用!)

使用 calc 计算