HTML+CSS高频面试题

面试题目录

前言
1.讲一下盒模型，普通盒模型和怪异盒模型有什么区别
2.CSS如何实现居中
3.讲一下flex弹性盒布局
4.CSS常见的选择器有哪些？优先级
[5.长度单位px 、em、rem的区别](#5.长度单位px 、em、rem的区别)
6.position属性的值有哪些
7.display属性的值有哪些，分别有什么作用
8.HTML语义化标签
9.三栏布局的实现方式
10.让页面里的字体变清晰，变细用CSS如何实现
[11. 清浮动的方法](#11. 清浮动的方法)
12.如何让超出宽度的文字显示为省略号

前言

技术面通常第一个问题都是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.如何让超出宽度的文字显示为省略号

javascript 复制代码

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