当前位置: 首页>移动开发>正文

前端面试八股文-CSS篇

HTML+CSS

1.讲一下盒模型,普通盒模型和怪异盒模型有什么区别?

答:盒模型本质就是一个盒子,包括边距,边框和实际内容

普通盒模型:

盒子总宽度计算公式: content width + padding + border + margin

怪异盒模型:

盒子总宽度计算公式: width(content+padding+border) + margin

2.块元素和行内元素区别是什么?常见块元素和行内元素有哪些?

答:块元素独占一行,行内元素可以与其他行内元素一行排列,直到排不下才另起一行

常见块元素: p, div,h1,h2,h3,ul,ol,li

常见行内元素: img,a,span

3.HTML语义化标签有哪些?

答:nav,aside,header,main,footer,article,strong,section

4.伪类和伪元素的区别是什么?

答: 伪类:没有伪造元素

伪元素:伪造了一个元素

5.CSS如何实现垂直居中
答: 可以应用flex布局,align-items

给目标元素设置固定高度,然后设置样式line-height 等于此高度

6.CSS常见选择器有哪些

答: 类选择器、标签选择器、ID选择器,全局选择器

7.CSS的优先级如何计算

答: 样式上写!important优先级最高,

行内样式>ID优先级>类选择器>标签选择器

8.长度单位px、em和rem的区别是什么?

答:px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em相对长度单位,对于当前对象内文本的字体尺寸,会继承父级元素的字体大小

rem仍然是相对大小,但相对的只是HTML根元素

9.讲一下flex弹性盒布局?

答:用来为盒子模型提供最大的灵活性,容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(侧轴)(cross axis

10.浮动塌陷问题解决方法是什么?

答:1.开启BFC块级上下文

? ? ? ? 2.使用clear样式清除浮动

? ? ? ? 3.给父元素添加一个伪类 after

11.position属性的值有哪些?各个值是什么含义?

答: relative:相对于其正常位置进行定位;根据top,bottom,right,left属性的值进行位置的调整

? ? ? absolute: 对于最近的定位祖先元素进行定位;如果绝对定位的元素没有祖先,那么将使用文档主体(body)并随页面一起滚动

? ? ? static:?根据页面的正常流进行定位

? ? ? fixed:?相对于视口进行定位,这意味着即使滚动页面,它也始终处于同一位置

12.BFC、IFC是什么

答: BFC:?块级格式化上下文

? ? ? ?IFC:?内联格式化上下文


https://www.xamrdz.com/mobile/43f1997326.html

相关文章: