前端面试 html css,web大前端面试——HTML、CSS

1.关于BFC

bfc(block formatting context)，块级格式化上下文，是页面css渲染的一部分，用于决定块盒子的布局以及浮动相互影响的一个区域。可以理解成：创建了bfc的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素。

特性：

(1).内部的box会在垂直方向一个接一个排列；

(2).box垂直方向的距离由margin决定，属于同一个bfc的两个相邻的margin会发生重叠，不同的bfc不会发生折叠

(3).每个元素的左外边距与包含块的左边界相接触(从左向右)，即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界)

(4).BFC的区域不会与float的元素区域重叠

(5).计算BFC的高度时，浮动子元素也参与计算

如何生成bfc：

(1).根元素，即html元素(最大的一个bfc)

(2).float的值不为none

(3).position的值为absolute或fixed

(4).overflow的值不为visible(默认值。内容不会被修剪，会呈现在元素框之外)

(5).display的值为inline-block、table-cell、flex、inline-flex、table-caption

2.HTML5的新特性

(1).语义化标签

优点：

(1). 让HTML结构更清晰

(2). 代码可读性更强，利于维护

(3). 更好理解标签的作用，让页面内容结构化

(4). 利于SEO

常用的语义化标签如下：

：定义了文档的头部区域

：定义页面的主要内容

：定义了文档的尾部区域

：定义文档的导航

：定义文档中的节(section、区段)

：定义页面独立的内容区域

：定义页面的侧边栏内容

：用于描述文档或文档某个部分的细节

：标签包含 details 元素的标题

：定义对话框，比如提示框

复制代码

(2).增强型表单

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。

输入类型 描述

color 主要用于选取颜色

date 从一个日期选择器选择一个日期

datetime 选择一个日期(UTC 时间)

datetime-local 选择一个日期和时间 (无时区)

email 包含 e-mail 地址的输入域

month 选择一个月份

number 数值的输入域

range 一定范围内数字值的输入域

search 用于搜索域

tel 定义输入电话号码字段

time 选择一个时间

url URL 地址的输入域

week 选择周和年

复制代码

HTML5新增的表单属性：

placehoder 属性：简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。

required 属性：是一个 boolean 属性。要求填写的输入域不能为空

pattern 属性：描述了一个正则表达式用于验证 元素的值。

min 和 max 属性：设置元素最小值与最大值。

step 属性：为输入域规定合法的数字间隔。

height 和 width 属性：用于 image 类型的 标签的图像高度和宽度。

autofocus 属性：是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。

multiple 属性：是一个 boolean 属性。规定 元素中可选择多个值。

复制代码

(3).新的多媒体标签

新增了和标签

HTML5 提供了播放音频文件的标准，即使用 元素

您的浏览器不支持Video标签。

复制代码

control 属性供添加播放、暂停和音量控件。

在 与 之间你需要插入浏览器不支持的元素的提示文本

元素允许使用多个元素,元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

目前, 元素支持三种音频格式文件: MP3, Wav, 和 Ogg;

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

您的浏览器不支持Video标签。

复制代码

control 提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停，如 play() 和 pause() 方法。

同时 video 元素也提供了width和height属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式( MP4, WebM, 和 Ogg)

(4).SVG绘图

什么是SVG?

● SVG指可伸缩矢量图形

● SVG用于定义用于网络的基于矢量的图形

● SVG使用XML格式定义图形

● SVG图像在放大或改变尺寸的情况下其图形质量不会有损失

● SVG是万维网联盟的标准

SVG的优势

● SVG图像可通过文本编译器来创建和修改

● SVG图像可被搜索、索引、脚本化或压缩

● SVG是可伸缩的

● SVG图像可在任何的分辨率下被高质量的打印

● SVG可在图像质量不下降的情况下被放大

SVG和Canvas两者的区别

● SVG 是一种使用 XML 描述 2D 图形的语言。

● Canvas 通过 JavaScript 来绘制 2D 图形。

● SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

● 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

● Canvas 是逐像素进行渲染的。在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

(5).Canvas绘图

(6).地理定位

HTML5 Geolocation(地理定位)用于定位用户的位置。

window.navigator.geolocation {

getCurrentPosition: fn 用于获取当前的位置数据

watchPosition: fn 监视用户位置的改变

clearWatch: fn 清除定位监视

}

navigator.geolocation.getCurrentPosition(

function(pos){

console.log('用户定位数据获取成功')

//console.log(arguments);

console.log('定位时间：',pos.timestamp)

console.log('经度：',pos.coords.longitude)

console.log('纬度：',pos.coords.latitude)

console.log('海拔：',pos.coords.altitude)

console.log('速度：',pos.coords.speed)

}, //定位成功的回调

function(err){

console.log('用户定位数据获取失败')

//console.log(arguments);

} //定位失败的回调

)

复制代码

(7).拖放API

拖放是一种常见的特性，即捉取对象以后拖到另一个位置。

在html5中，拖放是标准的一部分，任何元素都能够拖放。

(8).Web Worker

Web Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。

基本使用：

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage、onmessage。

(9).Web Storage

客户端存储数据有两个对象，其用法基本是一致。

localStorage：没有时间限制的数据存储

sessionStorage:在浏览器关闭的时候就会清除。

(10).WebSocket

WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。

特点：

● 握手阶段采用HTTP协议，默认端口是80和443

● 建立在TCP协议基础之上，和http协议同属于应用层

● 可以发送文本，也可以发送二进制数据。

● 没有同源限制，客户端可以与任意服务器通信。

● 协议标识符是ws(如果加密，为wss)，如ws://localhost:8023

关于WebSocket

3.盒模型

盒子模型分为标准盒子模型和IE盒子模型

标准盒模型(W3C)： content(内容)+ padding(内边距)+ border(边框)+ margin(外边距)，宽高是指content的宽高。

IE盒子模型(怪异盒模型)： content(内容)+ padding(内边距)+ border(边框)+ margin(外边距)，宽高是指content + padding + border的宽高。

4.简述CSS3新特性

(1).布局方面增加了flex布局

(2).选择器新增了first-of-type，nth-child等选择器

(3).新增transition过渡和animation动画，2D转换，3D转换

(4).新增了box-sizing属性来改变盒模型

(5).在颜色方面添加透明，rgba等；字体方面允许嵌入字体和设置字体阴影，同时当然也有盒子的阴影

(6).媒体查询

5.px、em、rem的区别？

px：是固定的像素，一旦设置了就无法改变；

em：相对于父元素的font-size为基准，一般是以

元素作为基准；

rem：相对于根元素为基准；

6.sass、scss、less、stylus之间的区别

相同处：

都是css预处理器，可以让我们在css中使用变量、简单的程序逻辑、函数，让css更加简洁，代码更加直观。

不同处：

sass: 使用了缩排语法，不直观，声明变量时使用$开头；不存在全局变量的概念；需要安装Ruby环境，在服务器端处理

scss: sass的升级，改良了缩排语法，用｛｝来代替

less: 使用@来定义变量，逐级向上查找变量

stylus: 直接使用=来定义变量

(未完待续，有空再写)