html&css面试题总结

网络中使用最多的图片格式有哪些

• jpg, png, svg,webp,bmp;

请简述css盒子模型

• 盒子模型是指html的每个元素都像一个盒子，可以设置宽高，主要由content box，padding box，border， 和margin组成

视频/音频标签的使用

• 音视频标签是h5新增的标签，主要用来给页面引入音频和视频，支持的音频和视频格式根据浏览器不同支持性也不同，一般音频支持最好的是 mp3， 视频支持最好的是mp4，音频标签的属性有 autoplay，control，loop，muted；视频标签的属性有autoplay，control，loop，muted

HTML5新增的内容有哪些？

• 语义化标签

Html5新增的语义化标签有哪些？

• header footer main section aside audio video nav

css3新增的特性

• 伪类元素 弹性布局

清除浮动的方式有哪些？请说出各自的优点？

• 给父元素使用overflow来清除浮动，
• 给父元素设置高度
• 添加伪类元素，使用clear方法

定位的属性值有何区别

定位的属性值主要有以下几种：

• absolute ：绝对定位，会脱离文档流，以有相对定位的父级元素为参照物移动
• relative：相对定位，不会脱离文档流，以整个页面为参照物移动
• fixed：固定定位，会脱离文档流，以整个页面为参照物
• sticky：粘性定位，会脱离文档流，以整个页面为参照，会设置一个top值，当达到这个top值的时候就会类似固定定位

html水平垂直居中的方式有哪些？

如果是文本元素可以使用text-align：center，与line-height设置为与行内高度一致进行居中显示；
如果是块级元素可以使用margin：水平使用50%-元素自身的一半宽度，高度设置auto

border-box与content-box的区别

border-box的宽高是不包括padding和boder，而content-box的宽高会包含这两

元素垂直居中的方法有哪些？

如果是文本元素的话就使用line-height等于所在盒子的高度。
如果是块级元素的话可以使用margin的auto属性来使元素垂直居中

BFC是什么？

block formetting context;是高度塌陷

如何让chrome浏览器显示小于12px的文字

css选择器有哪些？那些属性可以继承，优先级如何计算？

css选择器权重？

行内样式为100
标签选择器为1
类选择器为10
id选择器为100

网页中大量图片加载很慢 你有什么办法进行优化？

• 可以使用图片懒加载

行内元素/块级元素有哪些？

• 行内元素有： a ，span
• 块元素有：div， p

浏览器的标准模式和怪异模式的区别？

标准模式下盒子的宽高主要由三部分组成：content，padding，和border
怪异模式下盒子的宽高只由content盒子决定

margin和padding在什么场合下使用

• margin主要用于不同的盒子间需要调整间距的情况下使用
• padding主要是在一个盒子内需要挤压内部的元素的时候使用

弹性盒子布局属性有那些请简述？

• 水平布局：just-content：space-between，space-around，start，end
• flex-wrap：wrap/no-warp
• 垂直布局：align-content：space-between，space-around，start，end

怎么实现标签的禁用？

disable

Flex布局原理

px与rem的区别

px是页面像素点个数的单位，一般是固定不变的
rem是根据页面的字体大小调整的单位

网页的三层结构有哪些？

html：结构层
css：样式层
js：行为层

请简述媒体查询

媒体查询是让页面动态响应的方法

rem缺点

常见的兼容性性一阶段内容中记几个

垂直与水平居中的方式

三栏布局方式两边固定中间自适应

Doctype作用

怎么实现一个三角形

设置一个盒子，宽度高度为0，然后设置边框为需要的宽度 6 ，需要三角形的角朝向那个方向就把其余的几个边框颜色设置为透明