前端面试题

html 、css 篇

请说出5个HTML块元素标签？

div 、p、 table、 ul、li 、h1~h6

请说出至少5个行内元素标签？

a、span、i、button、textarea、select、strong等

请说出行内块元素有哪些？

img、input、td

请写出table 标签下面会包含哪些标签？

tr th td thead tbody tfoot 等

很多网站不使用table、iframe 这两个元素，知道原因吗？

是因为网站的渲染是从上至下的，而这两个元素会改变这样的渲染规则，他们要等到自己元素的内部内容加载完毕之后才整体渲染、用户体验感不好。

jpg和png格式的图片有什么区别？

jpg是有损压缩格式，而png是无损压缩格式。在相同的图片中，jpg体积会小，比如官网的banner图一般很大，适合使用jpg类型的图片。 png分8位和24位的，8位的体积会小很多，但在某些浏览器下8位的png图片会有锯齿。

常用浏览器有哪些、内核？

内核的概念是：负责对网页语法的解释并渲染网页。 Chrome、opera ---Blink firefox ------Gecko IE --------Trident Safari-------webkit

什么是块级元素、行内元素、行内块元素？

块级元素：1. 可以设置宽高值，元素大小超出html文档会自动换行
       2. 外边距和内边距都可控制
       3. 可以容纳行内元素和其他块元素
       常见的有 div、p、h1-h6

行内元素：1. 不可以设置宽高值，元素紧跟在前一个元素后面，不会换行
        2. 宽度就是它的文字或图片的宽度，不可改变；
        3. 内联元素只能容纳文本或者其他内联元素；
        常见 的有 a、span、textarea

行内块元素： 既具有行内元素特点又具有块级元素的特点，可以设置宽高、后一个元素紧紧跟在前一个元素后面，不独占一行。
        常见的有 img 、input、button

元素之间进行转换：display:block/ inline/inline-block

html5新内容，有哪些新增的标签？

header 头部、nav 导航、footer 尾部、section 文档中的节、article 内容区域、aside 侧边栏、detailes 文档某个部分细节 dialog 对话框 audio 音频 video 视频

css3新增选择器有？

：first-child 选择某个元素的第一个子元素

：last-child 选择某个元素的最后一个子元素

：nth-child(n) 属于其父元素的第n个子元素

：nth-last-child（）

:nth-of-type() 属于其父元素的第n个指定元素

：only-child选择它的父元素的唯一的子元素

：empty 选择的元素中没有任何内容

：disabled 匹配禁用的表单元素

：enabled 匹配没有禁用的表单元素

：first-of-type 选择一个上级元素下的第一个同类型子元素

：last-of-type 选择一个上级元素的最后一个同类型子元素

css3新增的伪元素有？

::after 元素之后

::before 元素之前

::first-letter 首字母

::first-line 首行

::selection 用户选择的元素部分

盒模型的种类有哪些？

1.W3C标准盒模型

   width+padding+border+margin
   height+padding+border+margin

2.IE 怪异盒模型
   content:width/height+padding+border
   content+margin

设置盒子模型： box-sizing：content-box 标准盒模型 box-sizing：border-box 怪异盒模型

css清除浮动的方法有哪些？

1.在标签尾部添加一个空的标签div，设置clear：both

2.给浮动的元素添加overflow：hidden ,利用了BFC原理

3.使用伪元素 ::after 使用clear：both

使用浮动导致父级元素高度塌陷问题如何解决？

加上一个空div清除浮动
overflow：hidden +zoom:1
伪元素 after+zoom:1

BFC块级格式化上下文是什么，作用有哪些？

概念：BFC为块级格式化上下文，当元素拥有这个属性，就可以拥有一个独立的渲染空间，它的布局不会影响容器外的布局

 如何触发：
      1.浮动元素，元素的float值不为none
      2.绝对定位 元素的positon为absolute或者fixed
      3. display 为inline-block、table-cell、table等
      4. overflow值不为visible

 作用：
     1.避免外边距重叠
     2.清除浮动
     3.避免元素被浮动元素覆盖
     4.多列布局

有几种定位方法？

静态定位 position:static （没有定位）
相对定位 position：relative （基于本身的位置）
绝对定位 position:absolute （如果有父元素，基于父元素，如果没有基于浏览器）
固定定位 position:fixed （参照浏览器左上角进行偏移）

如何实现图片和文字在同一行显示？

给img标签添加"vertical-align:middle"属性
如果是背景图，则通过background的定位属性来设置位置
分别把图片和文字放入不同的div中，设置vertical-align：middle

css选择器及优先级？

！important》id选择器 100》class选择器 10》属性选择器 10》标签选择器 1 》通配符选择器 0

网页优化？

减少css渲染加载时间，通过削减css样式的代码体积
文件压缩使用gulp
有效选择选择器
减少重排和重绘
不要使用@import

隐藏元素的方法有哪些？

display:none 元素在页面中不会占据位置，不会响应绑定的监听位置
visibility:hidden 元素在页面中占据位置，不会响应绑定的监听事件
opacity:0 将元素透明度设置为0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
z-index:负值来使其他元素遮盖住该元素，以此来实现隐藏
transform:scale(0,0) 将元素缩放为0，来实现元素的隐藏
position:absolute 通过使用绝对定位将元素移除可视区域内，来实现元素的隐藏。

display:none 与visibility：hidden 的区别

css有继承性的属性有哪些？

字体类： font-family font-weight font-size font-style 文本类： text-indent

link和@import区别

link是标签，而@import是方法
link引入css的时候在页面加载的同时加载，而@import则是网页全部加载完成之后引入
link没有兼容性问题，而@import有兼容性问题，在低版本浏览器不支持
link支持javascript控制DOM 区改变样式，而@import不支持

display：none 与 visibility：hidden区别

display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；
visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。
display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示

伪元素与伪类的区别

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

 p::before {content:"第一章：";} 
 p::after {content:"Hot!";}
 p::first-line {background:red;} 
 p::first-letter {font-size:30px;}

伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {color: #FF00FF} 
p:first-child {color: red}

transition 和 animation 的区别

transition是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似flash的补间动画，设置一个开始关键帧，一个结束关键帧。

animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画，用@keyframe完成动画。

transform 的属性有哪些？

translate 移动
scale 缩放
rotate 旋转

css中有哪些新特性

新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）
圆角（border-radius:8px）
多列布局（multi-column layout）
阴影和反射（Shadow eflect）
文字特效（text-shadow）
文字渲染（Text-decoration）
线性渐变（gradient）
旋转（transform）
增加了旋转,缩放,定位,倾斜,动画,多背景

csssprites的理解

CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。

优点：
css sprites 能够很好减少网页http的请求，从而大大的提高了页面的性能。

css sprites能够减少图片的字节

缺点：
  在开发的时候相对有点麻烦，需要借助photoshop 或其他工具对每一个背景图的位置进行测量。
  维护的时候也很麻烦，页面背景有少许改动的时候，就需要改这张合并的图片。

sass、less是什么？为什么要使用他们？

他们都是css预处理器，是css上面的一种抽象层。他们是一种特殊的语法/语言编译成css。动态样式语言，将css赋予了动态语言的特征，如变量、继承、运算、函数。既可以在客户端运行也可以在服务端运行。

为什么要使用他们？
 结构清晰，便于扩展，可以方便地屏蔽浏览器私有语法差异，避免无意义的机械劳动。
 
 可以轻松的实现多重继承，完全兼容css代码，可以方便的应用到老项目中去。

对媒体查询的理解？

使用媒体查询，可以针对不同的媒体类型定义不同的样式，@media可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置响应式的页面，@media是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的高度与宽度重新渲染页面。

常见的css单位有

px布局
百分比布局
em，rem 相对长度单位，em相对于父元素，rem相对于根元素
vw、vh ，动态单位，是一个相对于网页视口的单位。系统会将视口的宽度和高度分为100份，1vw就占视口宽度的百分之一。
vmin ，vw和vh中较小的那个，vmax，vw和vh中较大的那个。保证移动开放中屏幕旋转之后尺寸不变。

常见的css布局有

两列自适应布局
flex布局
grid布局网格布局
table布局

居中一个盒子的方法

margin:0 auto;
绝对定位+left，right -自身宽度、高度的一半
绝对定位+transform中的translate -50%
flex布局 justify-content：center align-items：center
table-cell布局vertical-align：middle，子盒子要设置为display:inline-block

用纯css写三角形

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

前端面试题CSS（详细篇...）