【整理】前端中使用频率比较高的一些知识点。

前端学习交流QQ群：338374556，欢迎初学和进阶中的小伙伴

1、常见的块级元素  内联元素

      div -最常用的块级元素

     dl - 和dt-dd 搭配使用的块级元素

     form - 交互表单

     h1 -h6- 大标题

     hr - 水平分隔线

     ol – 有序列表

     p - 段落

     ul - 无序列表

     fieldset - 表单字段集

     colgroup-col - 表单列分组元素

     table-tr-td  表格及行-单元格

     pre - 格式化文本

     a –超链接（锚点）

     br - 换行

     i - 斜体

     em - 强调

     img - 图片

     input - 输入框

     label - 表单标签

     span - 常用内联容器，定义文本内区块

     strong - 粗体强调

     sub - 下标

     sup - 上标

     textarea - 多行文本输入框

     u - 下划线

     select - 项目选择

 

  2、实现文本三个点的几个条件

  text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：

 1、容器宽度：width：value；（px、%，都可以）

 2、强制文本在一行内显示:white-space：nowrap;

 3、溢出内容为隐藏：overflow：hidden；

 4、溢出文本显示省略号：text-overflow：ellipsis;

 注：必须是单行文本才能设置本文溢出！！！

  IE6+；chrome1.0+；safari3.1+（firefox,opera暂不支持）

 

3、垂直居中的几个条件

设置一个元素在一个容器中垂直居中，必须更改默认的display属性值为inline-block;

并加上同级元素（标尺）（同级元素[标尺]样式设置为vertical-align:middle;width:0;height:100%;display:inline-block;） 。

 

三个条件：

1：必须给容器（父元素）加上text-align:center;

2:必须给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle;

3：在当前元素的后面（没有回车）加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block

 

4、置换元素与非置换元素

  置换元素与非置换元素

 

a) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入框，还是单选按钮等。 (x)html中的<img>、<input>、<textarea>、<select>都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

 

置换元素在其显示中生成了框，这也就是有的内联元素（img,input）能够设置宽高的原因。

 

b) 不可替换元素（非置换元素）：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。

 

5、什么是精灵图？优势是什么？

  图片整合，将小的单张背景图整合到一张大的背景图上。

 

图片整合的优势： 1）通过图片整合来减少对服务器的请求次数，从而提高 页面的加载速度。 2）通过整合图片来减小图片的体积。

 

6、什么是css层叠样式表？优先级算法如何计算？

  a.重要性和来源的优先级排序从低到高是：

1）浏览器默认样式

2）class/id.....选择器的权重

3）行间样式

4）内联或者外联 （书写顺序）

5）!important 最高的

 

 

7、display:none与visibility:hidden的区别

  前者：隐藏不占位  后者：隐藏但是占位置

 

8、清除浮动的几种方式

  hack1：给父元素添加声明overflow:hidden;

  hack2:   给父元素加height

  hack3:   在浮动元素下方添加空div,并给该元素添加         声明：div{clear:both; height:0; overflow:hidden;}

  hack4:万能清除浮动法 p:after{content:“.”;clear:both;display:block;height:0;overflow:hidden;  visibility:hidden;}

 

9、哪些属性可以继承？

1）文字相关：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing

2）列表相关：list-style-image、list-style-position、list-style-type、list-style

3）颜色相关：color

4）透明度（子元素会继承祖元素的opacity，但是无法更改）

注：font-size继承的是父元素的大小，而不是比例。line-height当父元素是百分比或px值得时候，子元素跟父元素相同，当父元素是normal或数字的时候，子元素的line-height是子元素的字体大小乘以数字。

 

10、定位的方式

position属性值：static，relative，absolute，fixed

1）static

static是默认值，元素位于文档流中，正常显示，忽略元素的top，bottom，left，right属性。z-index属性始终为0.

2）relative

相对定位，保留元素在文档流中占用的位置和尺寸，由left/right/top/bottom几个属性确定相对移动的距离，原来的位置保留

3）absolute

绝对定位，将对象从文档流中脱离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果没有，则依据body对象

4）fixed

fixed和absolute差不多，但是他相对的是窗口的左上角，不会跟随文档滚动。但是如果在多frame页面里面，他相对的是所在frame的左上角，而不是浏览器左上角。

 

11、link和@import区别？

1、老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。

2、link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了

3、加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）

4、兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题

5、使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的

 

 

12、定位的属性值都有哪些？每个值得意思？

  各属性值的作用：

  static：默认值。位置设置为 static 的元素会正常显示，它始终会处于文档流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。

  absolute：相对于父级元素的绝对定位，s浮出、脱离布局流，它不占据空间，就是我们所说的层，其位置相对于最近的已定位父元素而言的位置，可直接指定 “left”、“top”、“right” 以及 “bottom” 属性。若父级都没有定位，则以html（根元素）。(层叠的顺序z-index:value)

  relative：是相对于默认位置的偏移定位，通过设置left、top、right、bottom值可将其移至相对于其正常位置的地方（相对于自己的开始的位置发生的位置上的移动，【不会破坏正常的布局流】

  fixed：相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。

 

13、写出html5新增的标签15个

  header nav footer main aside article section figure datalist video audio fieldest  legend  label caption

14、一、BFC是什么？作用？怎么产生？

1、块级格式化上下文

2、自适应两栏布局、清除内部浮动、防止垂直margin重叠（放在两个BFC里）

3、根元素、 float属性不为none、 position为absolute或fixed、 display为inline-block，table-cell，table-caption，flex，inline-flex、 overflow不为visible

 

 

15、.px，em，rem，pt的区别  

1）px实际上就是像素，用px设置字体大小时，比较稳定和精确

但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的web页面时，如果对浏览器进行了缩放，这时会使我们的web页面布局被打破。因此，这时就提出了使用“em”来定义web页面的字体。

2）em就是根据基准来缩放字体的大小

em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小

3）rem是相对于根元素字体大小来显示的

rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值

4）pt的大小等于1英寸的1/72

磅：他是作为文字的一种计量单位

这种度量方式来源于打印-设计背景，最适合于媒体，但同样广泛应用于显示器

 

16、实现垂直+水平居中有哪些方法？

1、div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}

2、div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}

 

17、渐进增强和优雅降级

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

 

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

 

18、css选择符有哪些？  

1）通配选择符      *

2）类型选择符 /元素选择符     a

3）属性选择符      input[type="button"]

4）包含选择符     div .code a

5）子对象选择符     ul.test>li

6）ID选择符     #

7）类选择符     .

8）群组选择符     body,ul,li

9）伪类及伪对象选择符     div:first-letter     a:hover

10）相邻选择符     li+li

 

19、animation和transition的区别

相同点：都是随着时间改变元素的属性值。

 

不同点： transition需要触发一个事件(hover事件或click事件等)才会随时间改变其

 

css属性； 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。

 

20、什么是标准盒模型和怪异盒模型。两者的区别，如何实现怪异盒模型，和标准和模型

标准盒模型：content+border+padding      

怪异盒模型：content

 

一个算盒子的宽度的时候加上border和padding另一个不加

 

怪异盒模型实现：box-sizing:border-box

标准盒模型：box-sizing:content-box

 

 

21、如何让一个元素在父元素内上下左右居中

css：

.box{display:flex;width:800px;height:300px;justify-content:center}

.box div{align-self:center}

 

html:

<div class="box">

     <div></div>

</div>

 

22、video与audio常用的格式有哪些

 用于视频：video/ogg   video/mp4     video/webm 用于音频：audio/ogg   audio/mpeg

 

23、简单的解释下弹性盒模型的属性和属性值（至少写出6个属性）

display:flex;

flex-direction:

justify-content:

align-items:

align-self:

align-content:

flex-wrap:

 

简单的介绍一下线性渐变和径向渐变、重复渐变的用法

 

线性渐变：linear-gradient()

径向渐变：radial-gradient()

重复线性渐变：repeating-linear-gradient()

重复径向渐变：repeating-radial-gradient()

 

24、简单介绍下animation的用法

animation有两部分组成：animation:动画名称  动画执行时间  动画类型 动画延迟时间  动画重复次数 动画方向； @keyframes 动画名字

 

25、css3D的主要几个属性和属性值

1、景深：perspactive:number;     想要看到的物体越大，那么就把值设的较小，如果要看物体看的越小就把值设的越大

 

2、3D的舞台：transform-style:preserve-3d;

 

3、translateZ()   rotateZ()   scaleZ()

 

26、2D中的主要几个属性

transform:translate()   rotate() skew()  scale()

transform-origin:

 

27、简单介绍过度动画的属性和属性值

transition:属性名称（可以用all） 动画执行的时间  动画的类型  动画的延迟时间

 

28、css3中新增的背景属性

background-origin:背景原点

background-clip:背景裁切

background-size:背景图像的尺寸

以下为background-size的三个值

 

length

规定背景图的大小。第一个值宽度，第二个值高度。

 

Percentage(%)

以百分比为值设置背景图大小

 

cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域

   

 

29、写出5大浏览器的内核及他们的代表作品

*Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器

*Gecko：： 代表作品Mozilla Firefox 是开源的

*Webkit : 代表作品Safari、Chrome ， 是一个开源项目。

*Presto : 代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。

*Blink  ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。

 

30、写出IE6里面常见的几种bug以及解决方案(最少4种)  

1)图片有边框BUG         方案：给图片加border:0;或者border:0    none;

 

2、双倍浮向（双倍边距）   方案：display:inline

 

3、默认高度（IE6、IE7）  方案：给元素添加声明：font-size:0;   方案2：给元素添加声明：overflow:hidden;

 

4、按钮元素默认大小不一   方案：用a标签模拟

 

31、IE的过滤器有哪些？

1、  _ 下划线属性过滤器

2、  \9 ：  IE版本识别；其他浏览器都不识别 语法：选择符{属性：属性值\9;}

3、  \0  :   IE8及以上版本识别；其他浏览器都不识别     语法：选择符{属性：属性值\0；}

 

32、元素高度塌陷解决方案（至少4种）

hack1：给父元素添加声明overflow:hidden;

 

hack2:   给父元素加height

 

hack3:   在浮动元素下方添加空div,并给该元素添加         声明：div{clear:both; height:0; overflow:hidden;}

 

hack4:万能清除浮动法 p:after{content:“.”;clear:both;display:block;height:0;overflow:hidden;  visibility:hidden;}