flex
父元素如果为 flex 容器，且规定了高度，子元素将不能被孙子元素撑开高度，即 flex 布局撑开的最大高度不会大于父级 flex 元素设置的高度
flex-basis 和 flex-shrink 可以设置固定宽度，flex-shrink 属性默认为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小
谷歌记住密码，默认背景色
// 记住密码默认背景颜色和字体颜色，注意字体颜色不要和框的背景色一致
input:-webkit-autofill,
input:-internal-autofill-previewed,
input:-internal-autofill-selected,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: #fff !important;
box-shadow: 0 0 0px 1000px transparent inset !important;
background-color: transparent;
background-image: none;
color: #fff !important;
transition: background-color 500000s ease-in-out 0s;
}
transform
fixed定位的元素，如果父级有 transform 样式，值不为 none ，那么 fixed 定位就会失效，scale()，rotate() 都会使 fixed 定位失效
transform: scale(0.5) 缩放会占据原来位置大小
transition
height 为 auto 的 transition 无效果，可使用 max-height 来达到动画效果
样式灵活处理
如抽屉式的页脚确定、取消按钮位置，可定义 min-height：85vh 等最小高度来解决问题
calc 计算函数运算符前后都需要保留一个空格
使用 postion: sticky 进行固定，关于 postion: sticky 不生效原因：查看父元素是否存在 overflow: hidden 属性和高度必须小于父元素
/deep/ 中@include无效
把 /deep/ 放到选择器后面写，/deep/ 放到选择器前面，混入的方法 @include 不生效，如 /deep/ .test 修改成 .test /deep/
侧边栏内容布局
element-admin：侧边栏 fixed+bottom 和 top 为0，内容使用 margin-left
ant-design-pro: 侧边栏 flex+min-height 为100vh, 内容使用 flex 为1
如何在页面上实现一个圆形的可点击区域
html标签实现：
CSS实现和js实现：主要是把正方形的border-radius设置为50%，然后绑定click事件或者获取鼠标点击位置坐标，判断其到圆点的距离是否不大于圆的半径，来判断点击位置是否在圆内。
link与@import的区别
强烈建议使用link标签，慎用@import方式。
a、link属于html标签，除了引入css样式外还可以定义RSS等其他事务，@import是css提供的，只能引入css。
b、link在页面加载的时候会同时加载，@import引用的css会等到页面加载结束后再加载。
c、link是html标签，没有兼容性，@import只要ie5以上才能识别。
d、link支持使用js控制DOM改变样式，@import不支持。
使用纯css创建一个三角形
border创建
HTML字符创建
CSS3旋转创建
带缺口的三角形或空心三角形创建：
1.、两个三角形的位置、大小要一致。
2、里面三角形的底边框颜色为黑色（也可以为其它颜色），外面三角形边框颜色为白色的背景。
3、白色三角形要定位覆盖黑色三角形大部分来形成。
box-sizing和position有哪些属性值，默认值是什么
position：static（默认值，遵循基本的定位规定，不能通过z-index进行层次分级和left等位移）
relative（相对定位，对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级）
absolute（绝对定位，脱离文档流，通过top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级）
fixed（固定定位，这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级）、inherit（从父元素继承）
box-sizing：content-box（默认值，W3C盒子模型，不包含padding和border）、border-box（IE盒子模型，包含padding和border）、inherit。
CSS选择器关于性能方面问题
css选择符匹配元素是从右往左判断，首先由最后的css选择器产生一个集合，然后向上匹配，不存在的则从该集合中删除，一直到整个选择器都匹配完，还在集合里面的就是所匹配的选择器，如div>p，先产生p集合，然后向上匹配父元素是否是div。
从右向左的匹配在第一步就筛选掉了大量的不符合条件的元素，而从左向右的匹配规则的性能会浪费许多在失败的查找上面，因为从左到右会遍历查找所有的子节点，而从右到左直接寻找父节点。
a、避免使用通配规则 * ，通配符的计算次数过于庞大，reset.css对页面进行初始化便只对需要用到的元素进行选择，而不是通过通配符设置magin和padding等。
b、尽量少的去对标签进行选择，而是用class，一般标签重复率都比较高。
c、尽量少的去使用后代选择器，可以多使用子代选择器，降低查找开销和避免后代元素无必要的增加属性样式而覆盖原有样式。尽量将选择器的深度降到最低，最高不要超过四层，更多的使用类来关联每一个标签元素，虽然id选择器的渲染速度最快、高效，但是语义极差，权重高，后期比较难维护，所以不提倡给id选择器添加样式。
d、考虑继承，了解哪些属性是可以通过继承而来的（font,text-align,line-heigh,tcolor等），然后避免对这些属性重复添加样式。
CSS选择器的妙用
能用css代替的地方尽量不要用js，使用css有更快的开发速度和更小的维护成本，而使用js会频繁的操作 DOM的CSS样式，浏览器会不停的执行重排和重绘，动画尽量用css3代替js也是因为性能性能上会稍微好一些、代码相对简单和可对动画做加速和优化，不过在动画控制上不够灵活，动画效果没有js实现那么丰富。
a、X + Y: 相邻兄弟选择器，紧接在另一个元素后的元素、并且这两个元素都有同样的父元素，实现导航左边框，可利用li+li来排除第一个li元素，如果相邻之间插入其它标签则无法实现效果，所以使用时布局需要注意相邻，X~Y则是匹配X后面的所有兄弟元素。当然也可以使用X:first-child或X:nth-of-type单独去掉第一个的左边框样式。
相邻兄弟选择器
b、使用:hover::after和attr获得data属性值来实现鼠标悬停而悬浮提示，::before和::after伪元素用于在css渲染中向元素逻辑上的头部或尾部添加内容,这些添加不会出现在DOM中,所以使用它们显示修饰性内容，例如图标，清除浮动十分合适。
伪元素
c、通过:checked选中状态来使紧邻的兄弟元素label（label伪装自定义形状）实现效果切换。
checked选择器
d、根据div个数显示不同样式，有1~3个div显示在同一行，而div的个数不一定，如果1个，那这个div占宽400px，2个时每一个300px，3个时每一个200px，用纯CSS实现。:first-child选择了第一个子元素，:nth-last-child(N)匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。li:first-child:nth-last-child(2)即选择属于倒数第2个li的同时还是第一个元素的情况，即共 2个子元素时的第一个。如果只是1个div时宽为400px,依次增加div则宽全部为200px时，可以使用:only-child选取属于其父元素的唯一子元素。
nth-last-child选择器
only-child选择器
e、:target选择器指向文档内被链接的元素，用于当前活动的target元素的样式，使用:target可以实现tab切换功能。
:target选择器
实现水平居中和垂直居中的方式
a、固定宽高：margin:0 auto，实现水平居中，line-height等于父元素高度为垂直居中，行内元素或文本居中需要给父元素设置text-align:center。
b、固定宽高：给元素position设置relative或absolute（注意子绝父相，使用absolute需要父元素使用relative，不然会一直往上寻找）,left和top为50%，margin-left为负宽的一半和margin-top为负高的一半。
c、可不定宽高水平居中：给父元素设置float:left;position:relative;left:50%;子元素设置position:relative;left:-50%;来实现居中。
d、可不定宽高居中：给父元素设置display:table;子元素设置display:table-cell;来以表格形式居中。
e、可不定宽高居中：给元素position设置relative或absolute,left和top为50%，transform: translate(-50%,-50%)实现居中。
e、可不定宽高居中：flex弹性布局display: flex（设置为弹性盒模型），align-items:center（水平居中），justify-content:center（垂直居中）。
f、可不定宽高居中：grid网格布局display:grid，也可以使用align-items和justify-content的居中方式或者子元素使用margin:auto。
html5对input新增了哪些高级属性
a、autocomplete 属性规定form 或 input 域应该拥有自动完成功能。
b、autofocus 属性规定在页面加载时，域自动地获得焦点。
c、height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
d、min、max 和 step （输入域规定合法的数字间隔）属性用于为包含数字或日期的 input 类型规定限定
e、multiple 属性规定输入域中可选择多个值，适用于以下类型的标签：email 和 file。
f、novalidate 属性规定在提交表单时不应该验证，禁止执行原生的校验，执行你自己JavaScript的校验方法。
g、pattern （正则表达式）属性规定用于验证 input 域的模式。
h、placeholder 属性提供一种提示，描述输入域所期待的值。
i、required 属性规定必须在提交之前填写输入域（不能为空）。
一些html5的表单元素email，url，number，range，color，date。
列举几种常用的清理浮动的css样式
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷，即子元素脱离文档流无法撑开父元素高度）
a、万能清除法after伪类 清浮动.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}.clear{zoom:1;}
b、给父级添加overflow:hidden 清浮动，BFC（块级格式化上下文，可消除margin合并），BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素，计算BFC的高度时，浮动元素也参与计算，所以父元素在计算其高度时，加入了浮动元素的高度达到清除浮动的效果。
c、给浮动元素父级设置高度，高度塌陷是因为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了。
d、clear清除浮动（添加空div法）{clear:both;height:0;overflow:hidden;}
e、给父元素设置display:inline-block属性，也是BFC原理。
BFC的生成:
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
css3 transform, transition, animation区别和使用场景
transform：css3引入了一些可以对网页元素进行变换的属性，比如旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等，这些的基础都是transform属性， 描述的是元素的静态样式，而transition 和 animation 却都能实现动画效果，所以三者之中transform 常常配合后两者使用。
transition：可以实现动态效果，实际上是一定时间之内，一组css属性变换到另一组属性的动画展示过程，用于平滑过渡，在hover或者click的时候，改变各种css属性时，实现平滑过渡，而不是瞬间改变，从而达到动画的效果。
animation：通过控制关键帧来控制动画的每一步，强调流程与控制。
transition（补间动画）和animation（帧动画）不同点：
a、 触发条件不同，transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，可以在页面加载完成的时候自动触发或使用触发器。
b、 循环次数， animation可以设定循环次数。
c、 精确性，animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。
d、与javascript的交互，animation与js的交互不是很紧密，tranistion和js的结合更强大，js设定要变化的样式，transition负责动画效果。
结论：
1. 如果要灵活定制多个帧以及循环，用animation
2. 如果要简单的from to 效果，用 transition
3. 如果要使用js灵活设定动画属性，用transition
