HTML CSS面试题

1.css媒体查询

   @media属性主要有四种类型（包括screen）：

   all—适用于所有设备。

   print—打印预览模式/打印页面。

   speech——适用于“朗读”页面的屏幕阅读器

   screen——计算机屏幕（默认）

2.弹性盒子

   弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

   弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

   弹性容器内包含了一个或多个弹性子元素。

3.动画

   @keyframes 规则是创建动画。

   @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

   当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

   指定至少这两个CSS3的动画属性绑定向一个选择器：

   规定动画的名称

   规定动画的时长

   把 "myfirst" 动画捆绑到 div 元素，时长：5 秒

   div

   {

      animation: myfirst 5s;

      -webkit-animation: myfirst 5s; /* Safari 与 Chrome */

   }

4.过渡

   要成功实现过渡效果，必须定义以下两项内容：

      元素中参数与过渡效果的属性；

      过渡效果持续的时间。

   transition-property：设置元素中参与过渡的属性；

   transition-duration：设置元素过渡的持续时间；

   transition-timing-function：设置元素过渡的动画类型；

   transition-delay：设置过渡效果延迟的时间，默认为 0；

   transition：简写属性，用于同时设置上面的四个过渡属性。、

5.BFC

   BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

   形成BFC的条件

      1、浮动元素，float 除 none 以外的值；

      2、定位元素，position（absolute，fixed）；

      3、display 为以下其中之一的值 inline-block，table-cell，table-caption；

      4、overflow 除了 visible 以外的值（hidden，auto，scroll）；

   BFC的特性

      1.内部的Box会在垂直方向上一个接一个的放置。

      2.垂直方向上的距离由margin决定

      3.bfc的区域不会与float的元素区域重叠。

      4.计算bfc的高度时，浮动元素也参与计算

      5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

6.父子元素外边距塌陷解决办法

   外边距的塌陷问题只会在垂直之间产生塌陷；水平之间不受影响的；

   只要一方有border就不会出现这个问题

   解决方法有 加border  给父加padding  给父家overflow-hidden

7.清除浮动

   使用clear:both清除浮动

   利用伪元素clearfix来清除浮动

   使用CSS的overflow属性

8.定位标准

   静态定位：static

      static 是 position 属性的默认值，表示没有定位，使用静态定位的元素会按照元素正常的位置显示，并且不会受到 top、bottom、left、right 和 z-index 属性的影响

   相对定位：relative

      相对定位就是元素相对于自己默认的位置来进行位置上的调整，您可以通过 top、bottom、left 和 right 四个属性的组合来设置元素相对于默认位置在不同方向上的偏移量

   绝对定位：absolute

      绝对定位就是元素相对于第一个非静态定位（static）的父级元素进行定位，如果找不到符合条件的父级元素则会相对与浏览器窗口来进行定位。您同样可以使用 top、bottom、left 和 right 四个属性来设置元素相对于父元素或浏览器窗口不同方向上的偏移量

   固定定位：fixed

      固定定位就是将元素相对于浏览器窗口进行定位，使用固定定位的元素不会因为浏览器窗口的滚动而移动，就像是固定在了页面上一样，我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。

9.怪异盒模型

   怪异盒模型就是IE标准的盒子模型

   标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。

   标准盒模型下盒子的大小  = content + border + padding + margin

   怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度

   怪异盒模型下盒子的大小=width（content + border + padding） + margin

10.背景图设置

   (1)使用background-image属性，语法“background-image:url(图片url);”

   (2)使用background属性，语法“background:url(图片url);”。

11.圆角设置

   通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式。

12.线性渐变

   线性渐变：变化根据一条线进行变化

   background: linear-gradient(color1,color2);

13.2D3D等

   CSS 转换（transforms）允许移动、旋转、缩放和倾斜元素。

   把鼠标悬停在下面的元素上，可以查看 2D 转换：

   通过 CSS transform 属性，使用以下 3D 转换方法：

   rotateX()

   rotateY()

   rotateZ()

14.HTML本地存储

   通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

   在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

   与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

   本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据

   特性                 cookie                           localStorage    sessionStorage         indexDB

   数据生命周期   一般由服务器生成，可以设置过期时间 除非被清理，否则一直存在  页面关闭就清理   除非被清理，否则一直存在

   数据存储大小            4K                                  5M               5M                 无限

   与服务端通信   每次都会携带在 header 中，对于请求性能影响  不参与              不参与             不参与

15.HTML视频音频

   <video src="images\sp1.mp4" height="150px" autoplay="autoplay" loop="loop" controls="controls" poster="images\t3.jpg"></video>

   src表示视频来源位置

   height表示视频高度

   autoplay表示视频自动播放

   loop表示循环播放

   controls表示进度控制条

   muted表示静音播放

   poster表示视频封面所用的图片路径

   video/mp4表示视频的格式

   音频 把video替换成audio即可

16.H5新增表单功能

   required 属性 应用元素标签 input textarea

   • 约束该表单元素在提交前必须输入值，提交文档时，限制文本框必须输入内容，否则无法提交，即如果未输入将阻止表单提交。

   • 通俗理解：表明该元素是必填项，当提交表单的时候会自动验证该元素的内容是否不为空。

   placeholder属性 应用元素标签 input textarea

   • 占位符，当用户还没有输入值的时候，输入型控件可以通过 placeholder 属性向用户显示描性说明或者提示信息。使用 placeholder属性只需要将说明性文字作为该属性值即可。

   autofocus 属性 input buuton select textarea

   • 在打开页面时使元素自动获取焦点，只有当一个页面是以使用某个控件为主要目的时，才对该控件使用 autofocus 属性。一个页面只能有一个控件有该属性。

   multiple属性

   • 文件上传多选或多个邮箱地址 ，可以选择多个文件；在email中，可以输入多个邮箱地址，以逗号分隔

   pattern属性

   • 规定用于验证 input 域的模式，模式为正则表达式，验证表单元素

17.语义化标签

   <title>：页面主体内容。

   <hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。

   <ul>：无序列表。

   <li>：有序列表。

   <header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。

   <nav>：标记导航，仅对文档中重要的链接群使用。

   <main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

   <article>：定义外部的内容，其中的内容独立于文档的其余部分。

   <section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

   <aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

   <footer>：页脚，只有当父级是body时，才是整个页面的页脚。

   <small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。

   <strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。

   <em>：将其中的文本表示为强调的内容，表现为斜体。

   <mark>：使用黄色突出显示部分文本。

   <figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。

   <figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。

   <cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

   <blockquoto>：定义块引用，块引用拥有它们自己的空间。

   <q>：短的引述（跨浏览器问题，尽量避免使用）。

   <time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。

   <abbr>：简称或缩写。

   <dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。

   <address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。

   <del>：移除的内容。

   <ins>：添加的内容。

   <code>：标记代码。

   <meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）

   <progress>：定义运行中的进度（进程）。

18.h5表格

   　表格属性分为两大类：分别作用于<table></table>标签和作用于行<tr></tr>和列<td></td>的属性.　

　　1、border属性定义表格边框,属性值接受整数类型数值,表示设置表格边框的宽度

　　说明:如果border的值增大,只有表格最外围的框线增加,每个单元格上的边框并不会变化.若将border设置为10,可查看设置效果

　　2、width/height定义表格的宽度和高度

　　3、bgcolor设置表格的背景颜色

　　4、backgroud属性定义表格的背景图,需要传入一直图片的地址;若background属性与bgcolor属性同时存在,背景图会覆盖掉背景颜色.

　　5、bordercolor设置表格边框的颜色,接收颜色值

　　6、cellspacing设置表格单元格间距,设置表格单元格与单元格之间的间距;当cellspacing设置为0时,单元格之间没有间距

　　说明:cellspacing设置为0时并不能合并相邻边框,因此设置cellspacing=0时是两条边框线的宽度.如果需要合并表格边框可以使用    style="border-collapse: collapse;"进行设置

　　7、cellpadding表格单元格内边距属性,即单元格中文字与单元格边框之间的距离

　　8、align属性用于调整表格在其父容器中的位置,可选值有left、center、right、分别表示表格居左、居中、居右显示

　　注意：align属性建议不再使用,它的相关功能已被CSS中的float所取代