前言
大家好，我是前端程序员凌云，旨在为大家分享一些有用的知识！
本期分享内容是关于前端面试题中的HTML、CSS、浏览器系列
面试题大纲
- 网络中使用最多的图片格式有哪些？
- 请简述css盒子模型
- 视频/音频标签的使用
- HTML中新增的特性有哪些
- HTML5中新增的寓意话标签有哪些
- CSS3新增的特性有哪些
- 清除浮动的方式有哪些？请说出各自的优点
- 定位的属性值有什么区别
- 子元素如何在父元素中剧中
- border-box与content-box的区别
- 如何让元素垂直居中
- 如何让chorme浏览器现实小于12px的文字
- css选择器有哪些？哪些可以继承，优先级如何计算？css3新增的伪类有哪些
- 网页中有大量图片加载很慢， 你有什么方法进行优化
- 行内元素/块元素分别有哪些
- 浏览器的标准模式和怪异模式的区别
- margin和padding在什么场景下使用
- 请简述弹性盒子布局属性有哪些
- 怎么实现标签的禁用
- flex布局原理
- px、rem、em之间的区别
- 网页的三层结构有哪些
- 水平、垂直居中的方式
- 三栏固定方式、两边固定，中间子使用
- DocType的作用
- 说一下HTML5 Drag API
- 说一说你对HTML语义化的理解
- web性能优化方式有哪些
- 说一说浏览器的缓存机制
- 说一说用户从输入网址到也看渲染的全过程
- 怎么画一条0.5px的线
- 说一说js动画和css动画的差异性
- 双编剧重叠问题（外边句折叠）
- 浮动清除
- css3的选择器有哪些？优先级怎么排列
- 如何实现一个css动画
- css3中对溢出的处理
- overflow的原理
面试题ITEM
1.网络中使用最多的图片格式有哪些
JPEG、PNG、GIF,其中JPGEG是最流行的，可以把文件压缩到最
2.请简述css盒子模型
一个css盒子从外到内可以分为四个部分：margin(外边距)、padding(内边距)、border(边框)、content(内容)，默认情况下，盒子的width和height是根据content(内容)来设置宽度和高度的。
- 盒子真正的宽度应该是：内容宽度+左右边填充+左右边距+左右边框
- 盒子真正的高度应该是：内容高度+上下填上下编剧+上下边框
3.视频/音频标签的使用
视频
<video src=""></video>
- 属性
- src 需要播放的视频地址
- width/height 视频内容的宽度/高度
- autoplay 是否自动播放
- controls 是否显示控制条
- poster 未播放之前显示的占位图片
- loop 是否循环播放
- perload 预加载视频(缓存)。该属性与autoplay有冲突，设置了autoplay属性perload会失效
- muted 静音模式
音频
<audio src=""></audio>
- 属性(音频属性和视频差不多，只不过width、height、poster属性不能用)
4.HTML5中新增的属性有哪些
- 新增语义化标
- 新增表单类型
- 新增表单元素
- 新增表单属性
- 新增表单事件
- 新增多媒体标签
5.HTML5中新增的寓意话标签有哪些
语义化标签的有点
- 提升页面的可访问性
- 利于seo
- 结构清晰，利于维护
标签
- nav
- main
- section
- aside
- article
- header
- footer
6.css3新增特性
-
边框
- border-image
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
- border-image-source
- border-radius
- box-shadow
-
背景
- background-size
- background-origin
- background-clip
-
渐变
- linear-gradient
- radial-gradient
-
文本效果
- work-break
- word-wrap
- text-overflow
- text-shadow
-
转换
- transform
- transform-origin
- transform-style
-
2D转换方法
- rotate
- translate
- scale
-
3D转换方法
- perspective
- translate
- rotate
- scale
-
过度
-
transition-property
-
transition-duration
-
transition-timing-function
-
transition-delay
-
7.清除浮动的方式有哪些？请说出各自的优点
-
方式1：给父元素单独设置高度
- 优点：快读简单，代码量少
- 缺点：无法进行相应是布局
-
方式2: 在浮动元素后面添加一个空div标签，设置clear: both;height: 0;overflow:hidden;
- 优点：快速简单，大妈量少，兼容性比较高
- 缺点：页面增加了不必要的空标签，不利于优化
-
方式3:给父级元素设置overflow: auto
- 优点：简单、代码量少，兼容性好
- 缺点：内部宽度超过父元素时，会出现滚动条
-
方式4:给父元素设置overflow： hidden； zoom：1
- 优点：快速简单，代码少，兼容性高
- 缺点：超出部分会被隐藏，布局的时候需要注意
-
方式5:万能清除法(给塌陷元素添加伪对象)
- 优点：写法固定，兼容性好
- 缺点：代码多
具体代码
.vox-view:after {
content: '',
display: block;
clear: both;
height: 0;
visible: hidden;
overflow: hidden;
8.css定位的属性值之间有什么区别
- position
- relative：相对定位，不脱离文档流，给予自身定位
- absolute：绝对定位，脱离文档流，相对于父级元素定位
- fixed：固定定位，脱离文档流，相对于浏览器窗口定位
- static：默认值，元素出现在正常的流中
9.子元素如何在父元素剧中
- 水平居中
- 父元素宽度固定，可以设置margin：0 auto
- 、子元素宽度固定，父元素设置text-align: center
- 水平垂直居中
- 子元素基于父元素绝对定位，子元素的left设置50%，margin-left和margin-top取各自宽高的一半
- 子元素基于父元素绝对定位，子元素left、right、top、bottom全部设置为0，然后设置margin: auto
- 父元素display: table-cell;verticle-align: middle,子元素设置margin: auto
- 子元素相对定位，子元素top、left设置50%;transform: translate(-50%,50%)
- 子元素相对父元素绝对定位，子元素top、left设置50%;transform: translate(-50%,-50%)
- 父元素设置弹性盒子，display: flex;justfy-content: center; align-item: center;
10.border-box与content-box的区别
- content-box：标准盒子模型，width不包括padding和border
- border-box：怪异盒子模型，width包括padding和border
11.元素垂直居中
- 设置子元素的line-height属性与父元素的高度一致
- 子元素设置：display:inline-block;verticle-align:middle;
- 已知父元素高度的情况下，子元素基于父元素绝对定位，设置: top: 50%;transform: translate(-50$)
- 不知道父元素高度的情况下，子元素绝对定位父元素相对定位，设置:top: 50%; transform: translate(-50%)
- 创建一个隐藏节点，设置隐藏节点的height为生于高度的一半
- 父元素display: table; 子元素display: table-cell;verticle-align: middle;
- 给父元素添加伪元素
- 利用弹性盒子的align-item: center垂直居中
12.如何让chorme浏览器显示小雨12px的文字
原来是通过属性-webkit-text-size-adjusy: none; 现在是通过-webkit-transform: scale()
13.css中有哪些选择器？哪些选择器可以继承？优先级如何计算？css3中新增的伪蕾有哪些？
待完善
...持续输出中
