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.如何让超出宽度的文字显示为省略号

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