2022最新Web前端经典面试试题及答案——CSS篇 VIP免费

2022最新Web前端经典⾯试试题及答案——CSS篇起点低怕什么，⼤不了加倍努⼒。⼈⽣就像⼀场马拉松⽐赛，拼的不是起点，⽽是坚持的耐⼒和成长的速度。只要努⼒不⽌，进步也会不⽌。⼀、谈谈你对BFC的理解及作⽤。BFC是BlockFormattingContext格式化上下⽂的缩写，就是页⾯上⼀个隔离的独⽴容器，容器内的⼦元素不会影响到外⾯的元素。有⼀个独⽴的块级渲染区域，该区域有⼀套渲染规则来约束盒⼦的布局，与外部的区域没有关系。1.1、如何创建BFCfloat的值不为noneposition的值为absolute或fixedoverflow的值不为visibledisplay的值不为inline-block、flex、inline-flex1.2、BFC的特性内部的box会在垂直⽅向，⼀个接⼀个的放置。box垂直⽅向的距离由margin决定，属于同⼀个BFC的两个相邻box的margin会发⽣重叠BFC的区域不会与浮动区域的box重叠BFC在页⾯上是⼀个独⽴的容器，外⾯的元素不会影响BFC内的元素，⾥⾯的⼦元素也不会影响外边元素。计算BFC的⾼度时，浮动元素也会参与计算1.3、BFC的作⽤取消盒⼦的margin塌陷清除内部浮动，不会影响外⾯元素，可以阻⽌元素被浮动元素覆盖。⼆、两栏布局，有⼏种实现⽅式？常见的有5种⽅式，分别为：flex布局grid布局圣杯布局双飞翼布局系统的浮动布局2.1、使⽤flex布局使⽤flex布局，是⽬前主流的⽅式。实现⽅式：⽗容器设置display:flex，定宽元素设置width，⾃适应的⼦元素设置flex:1或flex-grow:1。2.2、使⽤grid布局实现⽅式：⽗级元素设置display:grid，使⽤grid-template-columns和grid-template-rows设置格⼦，⼦项设置grid-column和grid-row设置在格⼦中的位置。IE不⽀持这种，如果项⽬需要兼容IE浏览器，就不能选它了。2.3、圣杯布局实现⽅式：定宽元素和⾃适应元素都设置左浮，⾃适应元素设置宽度100%,定宽元素设置固定宽度，定宽元素因为DOM位置靠后被挤下去，给定宽元素设置margin-left:-100%此时定宽元素和⾃适应元素左侧重叠，给容器设置padding-left的值为定宽元素宽度，给定宽元素设置定位和固定宽度。圣杯布局本质上利⽤了浮动和负margin的特性，同时也有⼀个要求，⾃适应元素的宽度最⼩不能⼩于固定宽度侧边栏的宽度，否则会出现错乱。2.4、双飞翼布局解决了圣杯布局⾃适应元素宽度⼩于固定宽度侧边栏时出现错乱的问题。实现⽅式：给⾃适应元素内再多加⼀层div，定宽元素和⾃适应元素都设置左浮，⾃适应元素宽度100%,定宽元素设置宽度，margin-left:-100%，此时定宽元素和⾃适应元素左侧重叠，给⾃适应元素内的div加margin来规避重叠。2.5、系统的浮动布局实现⽅式：定宽元素左浮或右浮，⾃适应的元素设置margin预留空间，为避免⽗元素⾼度塌陷，需要给⽗级元素加清除浮动。该⽅式对DOM的结构顺序有⼀定的要求，布局⽅式较⽼，现在基本都不⽤了。三、什么是cssreset？它的全称就是reset.css，是⼀个css⽂件，⽤来重置浏览器默认的css样式。reset被⼤⼚基本都给抛弃了，什么原因呢？性能差，使⽤resst.css⽂件，会把使⽤到和使⽤不到的样式⽂件都加载进来，出现代码冗余，所以被⼀起企业已经抛弃了。normalize与reset.css⼀样，是⼀个样式的重置库。主要是为了增强跨浏览器渲染的⼀致性。四、⽹页中应该使⽤奇数还是偶数的字体？为什么呢？答案是：偶数。原因：偶数让⽂字在浏览器上更好看。ui给前端的设计图⼀般都是偶数，这样不管布局也好，转换px也好，会⽅便⼀些。感兴趣了，⼤家找⼀个左右对称的⽂字，⽐如"中"、“⼗”设置⼀个偶数⼀个奇数，观察下。五、css优先级算法，如何计算？总结性地回答：选中且设置!important的>权重⾼的>权重相同位置靠后的>来⾃继承的。如果两组选择器都定位到同⼀元素，且对同⼀属性设置不同的样式，则需要分别计算两组选择器的权重来确定优先级。⼀个选择器的优先级可以由四部分计算得分：千位：如果声明在style的属性⾥，则该部分得⼀分。百位：选择器包含id选择器，则该位得⼀分。⼗位：选择器包含类、属性选择器和伪类，则该位得⼀分。个位：选择器包含标签、伪元素选择器，则该位得⼀分。⾯试题：