Html、CssHTML、CSS、浏览器 ****相关 ****1 1. 网络中使用最多的图片格式有哪些 1 2.

一个 css 盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）。默认情况下，盒子的 width 和height 属性只是设置content（内容）的宽和高。盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框

3. 视频/音频标签的使用

/*
视频：<video src=””></video>
视频标签属性：
  src 需要播放的视频地址
  width/height 设置播放视频的宽高，和img 标签的宽高属性一样
  autoplay 是否自动播放
  controls 是否显示控制条
  poster 没有播放之前显示的展位图片
  loop 是否循环播放
  perload 预加载视频（缓存）与autoplay 相冲突，设置了autoplay 属性，perload 属性会失效。
  muted 静音模式

音频: 音频属性和视频属性差不多，不过宽高和poster 属性不能用
<audio>
  <source src=””  type=””>
</audio>
*/

4. HTML5 新增的内容有哪些

新增语义化标签
新增表单类型、表单元素、表单属性、表单事件
多媒体标签

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

语义化标签优点： 1.提升可访问性 2.seo 3.结构清晰，利于维护
新增：
Header 页面头部
main 页面主要内容
footer 页面底部
Nav 导航栏
aside 侧边栏
article 加载页面一块独立内容 Section 相当于 div
figure 加载独立内容（上图下字）
figcaption figure 的标题
Hgroup 标题组合标签
mark 高亮显示
dialog 加载对话框标签（必须配合open 属性）
Embed 加载插件的标签
video 加载视频
audio 加载音频（支持格式ogg，mp3，wav）

6. Css3 新增的特性

边框： border-radios 添加圆角边框 border-shadow：给框添加阴影（水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insetr（内/外部阴影）） border-image：设置边框图像 border-image-source 边框图片的路径 border-image-slice 图片边框向内偏移border-image-width 图片边框的宽度 border-image-outset 边框图像区域超出边框的量 border-image-repeat 图像边框是否平铺（repeat 平铺 round 铺满 stretch 拉伸）
背景： Background-size 背景图片尺寸 Background-origin 规定background-position 属性相对于什么位置定位 Background-clip 规定背景的绘制区域（padding-box，border-box， content-box）
渐变： Linear-gradient（）线性渐变 Radial-gradient（）径向渐变
文本效果： Word-break：定义如何换行 Word-wrap：允许长的内容可以自动换行 Text-overflow：指定当文本溢出包含它的元素，应该干啥 Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
转换： Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜 Transform-origin 可以更改元素转换的位置，（改变 xyz 轴） Transform-style 指定嵌套元素怎么样在三位空间中呈现 2D 转换方法： rotate 旋转 translate（x，y）指定元素在二维空间的位移 scale（n）定义缩放转换 3D 转换方法： Perspective（n）为 3D 转换 translate rotate scale
过渡： Transition-proprety 过渡属性名 Transition-duration 完成过渡效果需要花费的时间 Transition-timing-function 指定切换效果的速度 Transition-delay 指定什么时候开始切换效果
动画：animation Animation-name 为@keyframes 动画名称 animation-duration 动画需要花费的时间 animation-timing-function 动画如何完成一个周期 animation-delay 动画启动前的延迟间隔 animation-iteration-count 动画播放次数 animation-direction 是否轮流反向播放动画

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

给父级设置高度；
开启BFC-块级格式化上下文

BFC布局规则： 1.内部的Box会在垂直方向，一个接一个地放置； 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠； 3.每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此； 4.BFC的区域不会与float box重叠；（开BFC可以清浮动的原因） 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此； 6.计算BFC的高度时，浮动元素也参与计算；

    哪些元素会生成BFC：
        1.根元素【html】；2.float属性不为none；3.position为absolute或fixed
        4.display：inline-block, table-cell, table-caption, flex, inline-flex、
        5.overflow:hidden

3. br标签清浮动(br中书写clear属性，值为both)； 4. 空div标签的clear:both属性清浮动；（缺点，增加无意义的标签） 5. 伪类选择器：(IE8以上和非IE浏览器才支持) :after{ content:""; display:block; clear:both; } 或：.clearFix{ *zoom:1; }

8. 定位的属性值有何区别

是否会脱离文档流，定位参照谁

9. 子元素如何在父元素中居中

子为行内块，父子同行高父行高，子为行内块，vertical-align: middle flex relative absolute table-cell

10. Border-box 与 content-box 的区别

怪异盒模型（width：content+padding+border）与标准盒模型（width：content）

11. 元素垂直居中 8

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

1、transform: scale(.8); 2、carvans

13. Css 选择器有哪些，那些属性可以继承，优先级如何计算？Css3 新增的伪类有哪些

继承(Css 继承特性主要是文本方面)：

所有元素可继承：visibility 和cursor
块级元素可继承：text-indent(首行缩进) 和text-align
列表元素可继承： list-style ， list-style-type ， list-style-position ， list-style-image
内联元素可继承：letter-spacing，word-spacing，line-height，color， font，font-family，font-size
Font-style ， font-variant ， font-weight ， text-decoration ， text-transform，direction
字母间距  段落间距  行高  字体颜色  字体种类  字体大小  字体样式 字体粗细 小型大写字母文本 文本修饰 转换不同元素中的文本 文本方向

伪元素：（W3C试图用双双冒号区分伪元素与伪类）

::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection 选择用户选择的元素部分。
::-webkit-scrollbar 滚动条相关的等等

优先级：

元素选择器 1
伪元素选择器 1
class 选择器 10
伪类选择器 10
属性选择器 10
Id 选择器 100
内联样式的权重 1000
包含选择器权重为权重之和继承样式权重为 0

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

1.图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏览器顶端和页面的距离，如果前者小鱼后者，优先加载

2.使用图片预加载技术，将当前展示图片的前一张和后一张优先下载

3.使用csssprite 或者svgsprite

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

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

标准模式：浏览器按照 W3C 标准解析执行代码
怪异模式：浏览器根据自己的方式解析执行代码，因为不同浏览器解析执行方式不一样，所以叫怪异模式
区别：

在怪异模式下，盒模型为怪异盒模型而在标准模式下为标准盒子模型
图片元素的垂直对齐方式：对于行内元素和 table-cell 元素，标准模式下 vertical-align 属性默认值是 baseline，而在怪异模式下，table 单元格中的图片的 vertical-align 属性默认值是 bottom，因此在图片底部会有几像素的空间
元素中的字体：css中font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素不能从其他封装元素继承中得到，特别是 font-size 属性
内联元素的尺寸：标准模式下，non-replaced inline 元素无法自定义大写，怪异模式下，定义元素的宽高会影响元素的尺寸
元素的百分比高度：当一个元素使用百分比高度时，在标准模式下，高度取决于内容变化，在怪异模式下，百分比被准确应用
元素溢出的处理：标准模式下，overflow 取值默认值为 visible，在怪异模式下，这个溢出会被当做扩展 box 对待，就是元素的大小由内容决定，溢出不会裁剪，元素框自动调整，包含溢出内容

17. Margin 和 padding 在什么场合下使用

18. 弹性盒子布局属性有那些请简述?

19. 怎么实现标签的禁用

20. Flex 布局原理

21. Px，rem，em 的区别

22. 网页的三层结构有哪些

25. 常见的兼容性

26. 垂直与水平居中的方式

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

第一种:flex
<div id =”wrap” style=”display:flex”>
 <div id=”left” style="width:Xpx flex-shrink:0">
 <div id=”content” style=”flex:1”>
 <div id=”right” style="width:Xpx flex-shrink:0">
</div>
第二种:浮动（注意:此处的标签结构有所不同
<div id =”wrap” style=”display:flex”>
 <div id=”left” style="width:Xpx float:left">
 <div id=”right” style="width:Xpx float:right">
 <div id=”content” style="margin:0 Xpx">
</div>
第三种:定位
<div id =”wrap” style=”position:relative”>
 <div id=”left” style=”position:absolute;width:100px;top:0;left:0”>
 <div id=”content” style="margin:0 100px">
 <div id=”right” style="position:absolute; width:100px; top:0; right:0">
</div>
第四种:Table

28. Doctype 作用

29. 说一下 HTML5 drag api

30. 对 HTML 语义化标签的理解

31. web 性能优化

32. 浏览器缓存机制

33. 浏览器输入网址到页面渲染全过程

DNS解析(域名系统（服务）协议Domain Name System) 负责将域名地址解析成ip地址（4个缓存一个递归查询）
浏览器缓存
计算机缓存
路由器缓存
网络运营商缓存
递归查询域名服务器 a.b.c.com .com c.com b.c.com a.b.c.com
建立连接：TCP三次握手指的是客户端和服务端建立TCP连接，要进行三次通信。 Connection: keep-alive 保持长连接，复用TCP连接
发送请求按照HTTP协议规定，生成HTTP请求报文，发送给服务器
返回响应按照HTTP协议规定，生成HTTP响应报文，发送给客户端
渲染页面浏览器由很多模块组成：HTML解析模块、CSS解析模块、JS引擎...
遇到HTML代码，浏览器调用HTML解析器，将HTML解析成DOM树
遇到CSS代码，浏览器调用CSS解析器，将CSS解析成CSSOM树
遇到JS代码，浏览器调用JS引擎解析JS代码， JS代码可能会进行DOM操作，修改DOM树 JS代码可能会进行CSS操作，修改CSSOM树
将DOM树 + CSSOM树 = render树
布局（layout）：计算所有元素大小和位置
绘制（paint）：渲染颜色（给每一个像素加上颜色）
重绘、重排（回流）：一般JS代码修改了DOM或CSS，会导致重新布局，重新绘制重绘：页面重新绘制，（页面发生变化）：color 重排：页面重新布局，一般元素大小或位置发生变化 top left width height 重排一定会导致重绘，但重绘不一定导致重排
断开连接：TCP四次挥手指的是请求/响应分别需要断开两次，才能终止。所以一共有四次挥手

Html、Css

HTML、CSS、浏 览 器

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

2. 请简述 css 盒子模型

3. 视频/音频标签的使用

4. HTML5 新增的内容有哪些

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

6. Css3 新增的特性

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

8. 定位的属性值有何区别

9. 子元素如何在父元素中居中

10. Border-box 与 content-box 的区别

11. 元素垂直居中 8

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

13. Css 选择器有哪些，那些属性可以继承，优先级如何计算？Css3 新增的伪类有哪些

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

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

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

17. Margin 和 padding 在什么场合下使用

18. 弹性盒子布局属性有那些请简述?

19. 怎么实现标签的禁用

20. Flex 布局原理

21. Px，rem，em 的区别

22. 网页的三层结构有哪些

25. 常见的兼容性

26. 垂直与水平居中的方式

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

28. Doctype 作用

29. 说一下 HTML5 drag api

30. 对 HTML 语义化标签的理解

31. web 性能优化

32. 浏览器缓存机制

33. 浏览器输入网址到页面渲染全过程

34. 画一条 0.5px 的线

35. 关于 JS 动画和 css3 动画的差异性

36. 双边距重叠问题（外边距折叠）

37. 浮动清除

38. CSS 选择器有哪些，优先级呢

39. css 动画如何实现

40. 如何实现元素的垂直居中

41. CSS3 中对溢出的处理

42. 对 CSS 的新属性有了解过的吗？

43. overflow 的 原理

44. css 定位

HTML、CSS、浏览器

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

43. overflow 的原理