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:?内联格式化上下文