HTML+CSS高频面试题

前言

技术面通常第一个问题都是CSS中相关知识，这是基础问题，答错很影响面试分。这里记录面试高频的题目。

---

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

• 盒模型分为两类，一是标准盒模型，二是怪异盒模型。一般我们的盒子默认是标准盒模型。

两者区别是:

• 标准盒模型的实际宽高会把padding和border计算在内，而怪异盒模型不会。
• 形成怪异盒模型的条件是box-sizing:border-box；形成标准盒模型的条件box-sizing:content-box。

2.CSS如何实现居中

• flex布局：display:flex; justify-content:center; align-items:center;
• position+ margin: auto：父容器相对定位，子容器绝对定位
• text-align:center ：父级加，文本或行级元素，水平居中
• line-height：元素高度，文本内容垂直居中
• position + transform ：子绝父相，top、left 设置50%，transform：translate（-50%，-50%）

3.讲一下flex弹性盒布局

4.CSS常见的选择器有哪些？优先级

常见的选择器

• id 选择器 #header
• 类选择器 .header
• 标签选择器 div
• 伪类选择器 :hover、:focus、：active
• 伪元素选择器 ::after 、::before
• 属性选择器：a[target]
• 后代选择器（组合选择器）：div p
• 通配符选择器：* 选取所有标签元素

优先级

• !important>style>id>class、伪类>标签>继承、（*）

5.长度单位px 、em、rem的区别

CSS尺寸设置单位 px rem em vw vh

• px :绝对长度，表示固定的像素，设置无法自适应页面
• em :相当于当前元素，em 是根据font-size大小计算的，改变font-size大小，实现弹性变化（自适应）
• rem：相当于根元素，（html）
• vh、vw：相对长度，相对于页面视口来计算，100vh = >视口高度100%

6.position属性的值有哪些

• static：默认，无定位

• relative：相对定位，相对自身所在位置定位

• absolute：绝对定位，相对于最近父级定位

• fixed：固定定位，相对于浏览器窗口定位

• sticky：黏性定位，根据用户滚动位置进行定位

• flex:弹性盒

• • display:none 与 visiblity: hidden 的区别
• • • visibility:hidden 隐藏元素，但仍占据布局中的空间。
• • • display:none 从文档中删除元素。它不会占据任何空间

7.display属性的值有哪些，分别有什么作用

display:控制布局重要css属性

• inline：默认，内联元素不从新行开始，仅占用所需的宽度。
• block：块级元素，默认独占一行
• none：隐藏元素

8.HTML语义化标签

• 使用HTML构建页面，尽可能使用具有语义的标签。利于页面内容结构化、利于无CSS页面可读、利于SEO、利于代码可读。

• header：定义文档或节的页眉
• main：定义文档的主体内容
• footer：定义文档或节的页尾
• aside、acticle、section
  

9.三栏布局的实现方式

10.让页面里的字体变清晰，变细用CSS如何实现

11. 清浮动的方法

解决浮动元素后面有非浮动元素，非浮动元素会被遮挡。

• 为父元素设置固定高度
• 为父元素设置overflow:hidden 清除浮动
• 为最后一个子元素设置：clear:both 清除浮动

12.如何让超出宽度的文字显示为省略号

p{
	display:inline-block; //设置为行内块元素
	width:100%; //固定宽度
	white-space:nowrap; //设置为不换行
	overflow:hidden; //超出隐藏
	text-overflow:ellipsis;//省略显示...
}