41.什么是FOUC？如何避免？
FOUC： 即无样式内容闪烁，也可以称为文档样式短暂失效，主要就是指HTML已加载而样式表并未加载，此后样式表再加载而产生的闪烁现象。
如何避免：
样式表前置 ： 根据浏览器渲染的顺序，将CSS在中引入或者嵌入
尽量使用link避免使用@import、
42.清除浮动的方式，各自优缺点？
额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签
优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差。
父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。
优点： 简单、代码少、浏览器支持好
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。
使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。
优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点： 由于IE6-7不支持
43.在网页中的应该使用奇数还是偶数的字体？为什么呢？
偶数字号相对更容易和 web 设计的其他部分构成比例关系
44.如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms
45.base64的原理及优缺点？
优点可以加密，减少了HTTTP请求
缺点是需要消耗CPU进行编解码
46.流体布局，圣杯布局，双飞翼布局？
圣杯布局和双飞翼布局的区别：
相同点
两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，并且中间部分在HTML代码中要写在前边，这样它就会被优先加载渲染。
不同点
主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样。圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼布局则是在中间这个div的外层又套了一个div来放置内容，在给这个中间的div设置margin-left和margin-right 。
47.postcss的作用
PostCSS是一个使用JS插件转换CSS的工具。这些插件可以支持变量和混合、transpile未来CSS语法、内联图像等。
作用：
支持未来的css: 使用cssnext书写未来的css(postcss-cssnext plugin)
编译速度大大提升。PostCSS 声称比预处理器快 3-30 倍。
丰富的插件系统，解放你的双手。
css模块化，将作用域限制于组件内，避免了全局作用域的问题，再也不用担心样式名重复了
Postcss属于css后处理器，动态编译css，也就是说，在运行的时候进行编译。
48.css有个content属性吗？有什么作用？有什么应用？
css的content属性专门应用在 before/after伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。
49.水平居中方法
元素为行内元素，设置父元素text-align:center
如果元素宽度固定，可以设置左右margin为auto;
绝对定位和移动: absolute + transform
使用flex-box布局，指定justify-content属性为center
display设置为tabel-ceil
50.详细说一说css3的animation，transition
animation
css3的animation是css3新增的动画属性，这个css3动画的每一帧是通过@keyframes来声明的，keyframes声明了动画的名称，通过from、to或者是百分比来定义动画过程
每一帧动画元素的状态，通过animation-name来引用这个动画，同时css3动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式，
这些相关的动画子属性有：
animation-name定义动画名
animation-duration定义动画播放的时长
animation-delay定义动画延迟播放的时间
animation-direction定义 动画的播放方向
animation-iteration-count定义播放次数
animation-fill-mode定义动画播放之后的状态
animation-play-state定义播放状态，如暂停运行等
animation-timing-function定义播放的方式，如恒速播放、减速播放等。
transition
transition-property ：规定设置过渡效果的css属性名称
transition-duration ：规定完成过渡效果需要多少秒或毫秒
transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
transition-delay ：指定开始出现的延迟时间
51.什么是css Hack？常见Hack
描述：是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。
常见hack：
属性级Hack：比如IE6能识别下划线“”和星号“*”，IE7能识别星号“*”，但不能识别下划线””，而firefox两个都不能认识。
选择符级Hack：比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。
52.浏览器是怎样解析CSS选择器的？
浏览器解析 CSS 选择器的方式是从右到左
53.抽离样式模块怎么写，说出思路
CSS可以拆分成2部分：公共CSS 和 业务CSS：
网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务
对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS
54.元素竖向的百分比设定是相对于容器的高度吗？
不是
无论是竖向还是横向的百分比设定都是相对于容器的宽度。我们可以通过margin和padding来进行验证
55.全屏滚动的原理是什么？ 用到了CSS的那些属性？
原理类似图片轮播原理，超出隐藏部分，滚动时显示
可能用到的CSS属性：overflow:hidden; transform:translate(100%, 100%); display:none;
56.设置元素浮动后，该元素的 display 值会如何变化
设置元素浮动后，该元素的 display 值自动变成 block
57.display:inline-block 什么时候会显示间隙？
相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
非 inline-block 水平元素设置为 inline-block 也会有水平间距
可以借助 vertical-align:top; 消除垂直间隙
可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
把 li 标签写到同一行可以消除垂直间隙，但代码可读性差
58.pageX，clientX，screenX，offsetX区别？
pageX/Y： 对于整个页面来说，包括了被卷去的body部分的长度
clientX/Y： 点击位置距离当前body可视区域的x，y坐标
screenX/Y： 点击位置距离当前电脑屏幕的x，y坐标
offsetX/Y： 相对于带有定位的父盒子的x，y坐标
59.如何对不同IE版本浏览器做兼容测试？
使用工具切换IE版本，然后在IE浏览器运行测试
60.border- radius详解
在开发中我们经常通过正方形设置border- radius：50%来实现圆
border-radius参数选择：
border-radius：10px；将创建四个大小一样的圆角
border-radius:10px 15px 10px 15px; 四个值分别表示左上角、右上角、右下角、左下角
border-radius:10px 15px; 第一个值表示左上角、右下角；第二个值表示右上角、左下角
border-radius:10px 15px 5px; 第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角。
61.让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing: antialiased;
63.CSS3渐变？
CSS3 定义了两种类型的渐变（gradients）：
线性渐变 - 向下/向上/向左/向右/对角方向
径向渐变 -（Radial Gradients）- 由它们的中心定义
线性渐变：
语法：background-image:linear-gradientdirection,color-stop1,color-stop2,……);
direction：渐变方向/角度，可选（45deg，to bottom，to top,to right,to left,to left top…）
color-stop：选择颜色rgba可以设置透明度，也可以设置色标点区域 例：rgba(255,255,255,0.3) 20%
径向渐变：
语法：background-image: radial-gradient(shape size at position, start-color, …, last-color);
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
size：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”
at position起点：中心点的位置，可以是关键字（水平方向–left,center,right, 垂直方向–top,center,bottom），具体数值或百分比。
64.响应式布局和自适应布局的区别 ?
响应式布局是指通过CSS媒体查询，根据不同设备或视口宽度设置不同的样式来适应不同屏幕大小，实现页面的自动调整和优化。响应式布局可以使网站在桌面、平板电脑和手机等多种设备上都能够以最佳的显示效果呈现。
自适应布局是指根据屏幕尺寸选择合适的布局方式，使页面在不同设备上看起来更加美观和可读性更好。自适应布局相对来说更加固定一些，它的页面布局通常是由几个固定的布局组成，在不同的屏幕尺寸下选择不同的布局组合来进行展示，而不是像响应式布局那样直接改变样式。
65.z-index失效的几种情况
position属性未设置或值为static：如果要使用z-index属性，您需要首先将元素的position属性设置为relative、absolute或fixed。否则，即使设置了z-index，也无法使其生效。
父元素的z-index值高于子元素：当一个父元素和它的子元素都设置了z-index时，子元素的z-index可能会失效。
浮动元素的z-index失效：当使用浮动元素时，z-index属性可能不起作用。这是因为浮动本身就具有一定的层叠性质，并且浮动元素之间的堆叠顺序由它们在文档流中的先后顺序决定。
66.float之后display值改为？
block
67.css中的锚点
<a name="go">来我这里</a> ...... <a href="#go">我来了</a>
可以使用id属性来替代name属性 ， 使用id来定义锚点，可以定位针对任何标签来定位。name属性只能针对a标签来定位。
68.移动端1px问题解决方案
利用 css 的 伪元素::after + transfrom 进行缩放
优点：全机型兼容，实现了真正的1px，而且可以圆角。适用于老项目。
缺点：暂用了after 伪元素，可能影响清除浮动。
设置viewport的scale值
优点：全机型兼容，直接写1px不能再方便。
缺点：适用于新的项目，老项目可能改动大。
使用组件库vant/ant-design-mobile
69.阻止移动端H5开发浏览器默认左右滑动行为
html{ touch-action:none; } //此时上下左右都不可滑动 --------改动 html{ touch-action:none; touch-action:pan-y; }
70.CSS中 定位position 和 transform 移动元素的比较
性能方面：transform性能远高于position
通过translate移动，元素依然会占据其原始空间。如果通过position移动则会改变位置触发重绘
71.margin-left：auto，margin-right：auto，margin：auto区别
margin-left:auto 右对齐
margin-right：auto 左对齐
margin：auto 居中
72.css全屏滚动
overflow-y；overflow-x；scroll-snap-type;scroll-snap-align;必要属性
<style> html, body { height: 100%; margin: 0; } ul { margin: 0; /* scroll-behavior: smooth 让页面在滚动时拥有平滑的过渡效果，而不是瞬间跳转 */ scroll-behavior: smooth; font-size: 40px; width: 100%; height: 100%; /* overflow-y: auto 表示当内容超出元素的高度时，元素会显示垂直方向的滚动条以便用户浏览。如果内容不超出元素的高度，则不会显示滚动条。 overflow-x: hidden 则表示当内容超出元素的宽度时，元素不会显示水平方向的滚动条，同时超出部分的内容也将被隐藏。 */ overflow-y: auto; overflow-x: hidden; border: 1px solid #000; /* scroll-snap-type: y mandatory; 表示在垂直方向上开启滚动对齐功能，并强制要求元素对齐到滚动容器的边缘。这样可以确保每个子元素都在独立的、整数倍的位置停留，从而实现更加规整的页面布局。 */ scroll-snap-type: y mandatory; /*设置父级*/ padding: 0; } li { height: 100%; width: 100%; flex-shrink: 0; /* scroll-snap-align: center; 则表示对齐方式为中心对齐，当子元素的中心点（水平轴和垂直轴的中心点）与滚动容器的中心点重合时，就会触发对齐效果。 */ scroll-snap-align: center; /*子级设置*/ text-align: center; } li:nth-child(1) { background-color: teal; } li:nth-child(2) { background-color: gold; } li:nth-child(3) { background-color: green; } </style>
<ul> <li>1</li> <li>2</li> <li>3</li> </ul>
