Clover ‘s Blog

菜单悬停。

全屏的。

流光button。

旋转菜单。

他是一个弹性的Tab标签。

css选择器有哪些？优先级？哪些属性可以继承？

响应式和自适应的区别

BFC理解

浮动的五种方法

固定定位以及绝对定位区别

元素水平垂直居中的方法有哪些？元素不定宽高呢？

盒模型理解

当overflow的取值不是默认值的时候，就会创建BFC（块级格式化上下文，让元素成为隔离独立的容器，且容器内的子元素不会影响到外面的布局），从而起到一些独特的作用。浮动布局：将侧边栏浮动到左侧或右侧，使主要内容区域占据剩余空间。绝对定位布局：将侧边栏使用绝对定位来固定在左侧或右侧，再将主要内容区域使用 margin 或 padding 来避免与侧边栏重叠。弹性盒模型布局：将容器设置为 flex 布局，通过设置侧边栏宽度和主要内容区域宽度的比例，来实现两栏布局。【方法四】：网格布局。【方法一】：浮动布局。

计算并设置根元素的 font-size 值。通常情况下，我们将根元素默认的 font-size 设置为 16px，然后通过 JS 计算出当前设备宽度下的根元素 font-size 值，再设置给根元素。在需要使用 rem 单位的地方，根据计算得到的根元素 font-size 值，将需要设置的数值除以根元素 font-size 值，得到对应的 rem 数值。函数计算并设置根元素的 font-size 值，最后监听窗口大小变化事件，当窗口大小发生变化时，重新计算并设置根元素的 font-size 值。

脱离文档流的三种方法

不同点是：background的rgba可以单独控制元素的背景颜色或图像的透明度，而不影响元素内容和边框的透明度，并且rgba还可以和box-shadow、text-shadow一起使用。background的rgba是css中设置元素背景色的一种方式，也可以来设置背景图的透明度，他的透明度的范围是rgba(r,g,b,a),a表示透明度，取值范围是0到1。【它的取值是0到1，表示从完全透明到完全不透明的变化，使用opacity设置元素的透明度时候，元素和他的内容都会具有相同的透明度】

双飞翼布局是一种常见的网页布局方式，具有两个侧边栏和一个中间内容区域。与圣杯布局不同的是，双飞翼布局将三个部分放在同一层级的div中，而且左右两个侧边栏的宽度可以不固定，适应更加灵活。

css

方式：【具体代码1】

vue

CSS动画02--卡片旋转3D

当鼠标不同方向的划过时展示不同效果的登录，以上是一个简单的图片展示。

justify-content：指定弹性盒子在主轴上的对齐方式，属性值可以是 flex-start（默认值，从起点对齐）、flex-end（从终点对齐）、center（居中对齐）、space-between（两端对齐，项目之间间距相等）或 space-around（每个项目两侧的间距相等）。属性值可以是 flex-start、flex-end、center、space-between、space-around 或 stretch（默认值，每条轴线占满整个交叉轴）。flex：指定项目的伸缩比例，默认为 0。

css

css

显示省略号（ellipsis）：当单行文本溢出时，显示省略号表示被截断了。具体实现方式是设置 text-overflow:ellipsis，并且必须还要设置 white-space 和 overflow 属性。显示字符串（string）：当单行文本溢出时，显示指定的字符串。具体实现方式是设置 text-overflow: string，并且同时设置 content 属性。不换行（clip）：当单行文本溢出时，直接将超出部分剪切。

css

此动画是当点击input框内部外部不同的动画，以上是鄙人录制得一个小视频，供大家参考，🤭。

当点击错号和菜单双横线是不同的动画展示，以上是鄙人自己录制的一个小视频，希望大家做一个参考。

CSS动画05--闪亮的玻璃图标悬浮效果

怎么理解回流跟重绘?什么场景下会触发?

css

css

css

css

css