简述 的作用？

声明叫做文件类型定义（DTD），作用是为了告诉浏览器该文件的类型。让浏览器解析器知道应用那个规范来解析文档

常见的浏览器及其内核？

谷歌——blink

IE——trident

火狐——Gecko

欧朋——blink

苹果——webkit

b 和 strong（i 和 em）标签的区别？

b 标签用来加粗，strong 也是用力加粗但是比 b 标签要更加具有意义，语义化

i 标签用来倾斜，em 的作用也是倾斜，会比 i 标签要更有语义化

谈谈对语义化的理解？

就是用特定的语言来定义特定的事物。让页面具有良好的结构和含义，从而让人和机器可以快速的理解网页的内容。可以是开发人员读懂代码结构，可以减少很多差异化，减少成员沟通成本，方便开发和维护，有利于模块化的开发。

CSS 引入方式有哪些？

行内引入：在标记的style属性中设定css样式

嵌入式：在css集中写在网页的中，写入style标签。

连接式：在head标签中的link标签中href=”css文档的链接”

CSS 基本选择器有哪些？

通用选择器

元素选择器

类选择器

id选择器

群组选择器

后代选择器

子代选择器

伪类选择器

如何合并表格单元格？thead、tbody、tfoot 有什么用？

跨行合并：rowspan

  • 找到要合并的首个单元格，添加rowspan属性 表示这个单元格占几行

  • 删除同列下一行单元格

跨列合并：colspan

  • 找到要合并的首个单元格，添加colspan属性 表示这个单元格占几列

  • 删除下一个单元格

常见表单元素有哪些？

form

1
<form name="" action="" method="get"></from>
  • name : 表单名称；action : 用来指定表单处理程序的位置（url）；method : 定义表单结果从浏览器传送到服务器的方式，默认为”get”（也可以是post）

input

1
<input type="" name="" value="" size="">
  • name:控件名称；value:input控件默认文本值；size:input控件在页面中的显示宽度（必须是正整数）

sekect

1
<select size="" miltiple="multiple"> <option hidden>选项1</option> </select>
  • size：下拉菜单的可见选项数；multiple：多选。

fieldset：定义域。及输入区加有文字的边框

legend：定义域的标签，及边框上的文字

label：定义一个控制的标签。如果输入框的文字，用来关联用户的选择

textarea：定义文本域（一个多行的输入空间），默认可以通过鼠标拖动调整大小

button：定义一个按钮

请简述一下盒模型的组成？

  • 由content（内容区）+ padding（内边距）+ border（边框）+margin（外边距）组成

CSS 复合选择器有哪些？

  • 后代选择器 元素2为元素1后代，元素2可以是儿子也可以是孙子

    • 元素1 元素2{样式声明}

  • 子代选择器 只能选择作为某元素的最近一级子元素（只能是亲儿子）

    • 元素1>元素2{样式声明}

  • 并集选择器 可以选择多组标签，同时为他们定义相同样式 通过英文逗号分开

    • 元素1，元素2{样式声明}

  • 链接伪类选择器 用于向 某些选择器添加特殊的效果，比如：hover、:first-child

    • a:hover /选择鼠标指针位于其上的链接/

  • focus 选择器用于获得焦点的表单元素，一般用在inout类表单元素才能获取

  • input:focus{background: red}img

块级标签和行内标签的区别？

  • 块级标签

    • 可以设置宽高

    • 可以自动换行

    • 设置margin、padding

    • 多个块状默认排列从上到下

  • 行内标签

    • 设置宽高无效

    • 对margin设置左右方向有效，对上下无效，设置padding无效

    • 不自动换行

浮动产生的问题？清除浮动的方案？

浮动元素引起的问题：

浮动元素脱离文档流之后在文档流中不占位，父元素的高度无法被撑开，影响与父元素同级的元素

清楚浮动的方法：

（1）给父级元素加高度（不推荐使用，它只适合高度固定的布局，一般父盒子都是为由内容撑起来）

（2）在浮动元素的结尾处添加空div标签clear:both。具体做法：添加一个div标签并定义一个clear的类名，给clear类名添加样式clear:both，将该div标签放到父元素内容结束前的位置（缺点：会多加CSS和HTML标签）。

（3）给父级元素定义 overflow:hidden（推荐使用，缺点：不能和position配合使用，因为超出的尺寸的会被隐藏）

（4）给父级div定义伪类：after和zoom（推荐使用）

1
.clearfix:after{content:"";display:block;clear:both;visibility:hidden;height:0} .clearfix{zoom:1} //清除浮动代码

然后父级元素添加clearfix类名即可

（5）给父级元素添加浮动（缺点：会产生新的浮动问题）

请简述 等高布局、圣杯布局、双飞翼布局的实现原理。

圣杯布局

HTML结构中，先主体内容后侧边

两侧宽度固定，中间宽度设置100%

两侧盒子和中间盒分别加浮动

将左侧盒子拉倒最左边，右侧盒子拉倒最右边

通过左中右盒子的父级盒子将中间的内容漏出来

分辨还原左侧盒子和右侧盒子

双飞翼布局

在两侧宽度固定，中间宽度100%

两侧盒子和中间盒子分别加浮动

将左侧盒子拉倒左边，右边盒子拉倒右边

在主体结构盒子的子盒子设置margin值，将中间的内容漏出来

简述 CSS 精灵图原理，及优缺点？

将背景图标整合到一张图片文件中，在利用background-position来实现背景图片的定位技术

优点

减少网页的http请求，从而提高页面性能

减少图片命名困扰

更换方便

缺点

必须跟限定容器大小符合背景元素位置，需要计算

简述 BFC 规则及解决的问题？

BFC就是只有块级元素参加的，指块级元素在页面中如何排列，如何渲染，并且与内部元素无关

解决问题

兄弟元素的外边距塌陷问题

产生原因：因为同一个BFC的两个相邻的标签margin会发生重叠

解决问题：当让他们处于不同的BFC区域，给其中一个兄弟元素设置一个盒子，给父元素设置overflow:hidden

两|三栏自适应
产生原因：浮动会脱离文档流，但是不脱离文本流，所以左侧盒子浮动之后，右侧盒子中的文字会环绕在左侧盒子的周围
解决问题：BFC区域不会与浮动区域发生重叠，可以让右侧盒子处于一个新的BFC区域就不会与浮动区域发生重叠

放止文字环绕
文字环绕产生的原因：图片浮动会脱离文档流，但是不脱离文本流，左侧盒子中的文字会环绕在图片的周围
解决问题：BFC区域不会与浮动区域发生重叠，可以让左侧盒子处于一个新的BFC区域就不会与浮动区域发生重叠

清浮动：给父元素添加overflow:hidden清浮动时，根据特性计算BFC区域的高度时，浮动子元素也参与计算，让父元素在BFC区域中，那么计算高度时浮动子元素也会参与计算

文本溢出显示省略号如何实现？

单行文本溢出

限制文本容器的宽度

让文字在一行显示white-space:noweap

溢出隐藏overflow:hidden

文字溢出处理text-overflow:ellipsis

为什么要初始化 CSS 样式？

因为浏览器的兼容问题，也是为了提高编码的质量。

在不同的浏览器下对标签的默认值也不同，最常见的初始化就是margin和padding设置为0，以及字体的大小及字体设置。

display:none和 visibity：hidden 的区别？

你能想出几种方法让元素在页面中消失？

简述网页中常见图片格式及特点？

外边距合并

哪些css属性可以继承？

html5 有哪些新特性？

如何处理 HTML5 新标签的浏览器兼容问题？

CSS3 有哪些新特性？

CSS3 新增选择器有哪些？

CSS3 中过渡和动画的区别和各自适用场景？

说出你知道的 2D 或 3D 变形函数 ?

请解释一下 CSS3 的 flexbox（弹性盒布局模型）, 以及适用场景？

什么是 less?less 有什么好处 ?

常见的移动端布局解决方案有哪些？原理如何？

简述 rem 布局原理？

什么是响应式？

响应式布局可以根据屏幕的大小自动的调整页面的展现方 式，以及布局。响应式布局是根据设备屏幕宽度不同适当调 整标签显示布局，在每种设备屏幕宽度的设备下呈现的界面 是不同的

响应式项目中常用到哪些核心技术？

  • 视口标签设置

  • 使用媒体查询适配对应样式

  • 百分比布局

  • 响应式字体设置

  • 响应式图片

定位 （是否脱离文档流，参照物）

让块级元素水平垂直居中