HTML+CSS

1. CSS3 新特性有哪些

【参考答案】
    （1）新增实现圆角（border-radius） 阴影（box-shadow）
（2）背景的尺寸、位置、绘制区域（background-size,background-origin,background-clip）
（3）文字加特效（text-shadow）
（4）线性渐变和径向渐变（linear-gradient、radial-gradient）
（5）新增 2D 和 3D 转换（transform） 过渡（transition）
（6）动画（@keyframes+animation） 媒体查询
（7）多栏布局
（8）新增多种选择器（结构伪类选择器、属性选择器、）

2. 如何清除浮动

【参考答案】
    1. 给父容器加 overflow:hidden
    2. 空标签法: 在父容器的最后添加一个块级标签例如：div，并设置样式 :
     display:block; visibility:hidden; clear:both(一定要加);
    3. 给父元素添加高度，使其占据位置
     4. 使用单伪元素清除浮动（只使用::after或者::before）
   例如：
     .cleardix::after {

           content:‘’;
           display:block;
           height:0;
           visibility:hidden;
           clear:both;
           zoom:1;
      }

3. 实现div 垂直居中有几种方式，请列举

【参考答案】
    绝对定位实现垂直居中（可在 css 中使用 calc()自动计算中间值）

    定位+transform:

    translate(-50, -50)实现水平+垂直居中

    fixed 定位居中
    flex 弹性布局居中

4. 行内元素与块级元素有什么区别？

【参考答案】

     ① 排列方式：

      行内元素间会在同一行进行排列（水平方向）； 块级元素独占一行，垂直向下排列（垂直方向）

     ②宽高和内外边距：

     行内元素设置宽高无效，宽高随文本内容的变化而变化，但可以设置行高；  行内元素设置内外边距（margin 和 padding）上下无效，左右有效。

     ③元素嵌套：

      块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不  能包含块级元素，只能容纳文本或者其他行内元素。

5. 谈谈你对css 浮动（float）与定位（position）的理解

【参考答案】

     关于浮动：默认为 none,对应标准流的情况。当 float : left;时，元素就会向其父元素的左侧靠紧，脱离标准流，同时宽度不再伸展至充满父容器，而是根据自身内容来确定。

     关于定位：

     position 取值有 static absolute relative fixed；

     static 是默认的,即标准流排下来，就是 static 定位方式

     fixed 相对于浏览器窗口定位的，这个会脱离标准流，一般[回到顶部]这种按钮就是fixed 做的

    relative 照自己原有的文档流位置定位，不会脱离原有的文档流

    absolute 就是相对于父元素的非默认定位元素位置定位，这个会脱离标准流

6. 列举 5 种css 鼠标（hover）效果

【参考答案】

       hover 可以实现很多的 css 效果，

       例如：层叠与放大、跳跃、淡入淡出、旋转等

7. h5 自定义属性格式是什么，简单列举几种在日常项目中的用法

【参考答案】

     形式：html 标签中的 data-* 属性例如：

    <input type="text" name="username" data-id="101"> 用法：

    ① 请求后台接口需要携带上一个请求的返回值，可以使用该属性保存

    ② 保存在自定义属性，方便其他程序获取

8. 在项目中如何调用自定义字体

【参考答案】

     可以使用 CSS3 中的模块：@font-face 将自定义字体嵌入到网页中

9. margin 和padding 对元素会有什么影响？

【参考答案】

     行内元素设置内外边距（margin 和 padding）上下无效，左右有效

     块级元素可任意设置，但会影响盒子原有大小，可使用 box-sizing:border-box;自动计算大小

10. css 中哪些属性可以继承？

【参考答案】

     （1） 可继承的样式： font-size font-family color, text-indent;

     （2） 不可继承的样式：border padding margin width height;

11. 响应式页面中需要考虑是主要分辨率有哪些（需要兼容PC、平板、手机）

【参考答案】

      手机：max-width:600px

      平板：min-width:600px        max-width:960px PC 端：min-width:960px

12. 实现元素隐藏的方式

【参考答案】

        opacity：0;

        display：none;

        visibility：hidden;

         position：-2000px;

13. isibility: hidden 和 display: none 的区别

【参考答案】

          visibility: hidden：将元素隐藏，但是在网页中该占的位置还是占着

          display: none 将元素的显示设为无，即在网页中不占任何的位置

14. 列表单form 的属性列举 3 个？

【参考答案】

           methood=”get/post action=url

           target=”_blank/_parent“(前一个重新打开一个页面，后一个直接本页面跳转)

           H5 新增：autocomplete（规定输入字段是否应该启用自动完成功能）

           novalidate（规定当提交表单时不对其进行验证）

15. 怎么理解盒模型

【参考答案】

          标准盒模型：盒模型的宽高只是内容（content）的宽高，box-sizing:border-box; 转ie 盒模型；

          ie 怪异盒模型： 宽高是内容(content)+ 填充(padding)+ 边框(border) 的总宽高， box-sizing:content-box; 转标准盒模型

16. 说几个常用的flex（弹性布局）的属性

【参考答案】

     父盒子(flex 容器)：

               display:flex; // 指定为 flex 布局

               just-content ： flex-start( 默认)| flex-end | center | space-between | space-around;        // 设置子元素在主轴上的对齐方式

               flex-direction:row(默认)|row-reverse|column|column-reverse; // 设置主轴方向

               flex-wrap:nowrap(默认)|wrap|wrap-reverse; // 设置是否允许子元素换行

     子盒子(容器的子元素)：

                order: 数值;        // 设置子元素的排列顺序，默认 0

                flex-grow：数值; // 设置子元素的放大比例，默认 0

                flex-shrink:数值; // 设置子元素的缩小比例，默认 1

                flex-basis:数值|auto(默认);        // 设置子元素所占据的主轴空间，例如：350px

               flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; // 该属性是上面 3 个属性的合写，默认值为：0 1 auto，后两个属性可选

HTML+CSS

1. CSS3 新特性有哪些

【参考答案】
    （1）新增实现圆角（border-radius） 阴影（box-shadow）
（2）背景的尺寸、位置、绘制区域（background-size,background-origin,background-clip）
（3）文字加特效（text-shadow）
（4）线性渐变和径向渐变（linear-gradient、radial-gradient）
（5）新增 2D 和 3D 转换（transform） 过渡（transition）
（6）动画（@keyframes+animation） 媒体查询
（7）多栏布局
（8）新增多种选择器（结构伪类选择器、属性选择器、）

2. 如何清除浮动

【参考答案】
    1. 给父容器加 overflow:hidden
    2. 空标签法: 在父容器的最后添加一个块级标签例如：div，并设置样式 :
     display:block; visibility:hidden; clear:both(一定要加);
    3. 给父元素添加高度，使其占据位置
     4. 使用单伪元素清除浮动（只使用::after或者::before）
   例如：
     .cleardix::after {

           content:‘’;
           display:block;
           height:0;
           visibility:hidden;
           clear:both;
           zoom:1;
      }

3. 实现div 垂直居中有几种方式，请列举

【参考答案】
    绝对定位实现垂直居中（可在 css 中使用 calc()自动计算中间值）

    定位+transform:

    translate(-50, -50)实现水平+垂直居中

    fixed 定位居中
    flex 弹性布局居中

4. 行内元素与块级元素有什么区别？

【参考答案】

     ① 排列方式：

      行内元素间会在同一行进行排列（水平方向）； 块级元素独占一行，垂直向下排列（垂直方向）

     ②宽高和内外边距：

     行内元素设置宽高无效，宽高随文本内容的变化而变化，但可以设置行高；  行内元素设置内外边距（margin 和 padding）上下无效，左右有效。

     ③元素嵌套：

      块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不  能包含块级元素，只能容纳文本或者其他行内元素。

5. 谈谈你对css 浮动（float）与定位（position）的理解

【参考答案】

     关于浮动：默认为 none,对应标准流的情况。当 float : left;时，元素就会向其父元素的左侧靠紧，脱离标准流，同时宽度不再伸展至充满父容器，而是根据自身内容来确定。

     关于定位：

     position 取值有 static absolute relative fixed；

     static 是默认的,即标准流排下来，就是 static 定位方式

     fixed 相对于浏览器窗口定位的，这个会脱离标准流，一般[回到顶部]这种按钮就是fixed 做的

    relative 照自己原有的文档流位置定位，不会脱离原有的文档流

    absolute 就是相对于父元素的非默认定位元素位置定位，这个会脱离标准流

6. 列举 5 种css 鼠标（hover）效果

【参考答案】

       hover 可以实现很多的 css 效果，

       例如：层叠与放大、跳跃、淡入淡出、旋转等

7. h5 自定义属性格式是什么，简单列举几种在日常项目中的用法

【参考答案】

     形式：html 标签中的 data-* 属性例如：

    <input type="text" name="username" data-id="101"> 用法：

    ① 请求后台接口需要携带上一个请求的返回值，可以使用该属性保存

    ② 保存在自定义属性，方便其他程序获取

8. 在项目中如何调用自定义字体

【参考答案】

     可以使用 CSS3 中的模块：@font-face 将自定义字体嵌入到网页中

9. margin 和padding 对元素会有什么影响？

【参考答案】

     行内元素设置内外边距（margin 和 padding）上下无效，左右有效

     块级元素可任意设置，但会影响盒子原有大小，可使用 box-sizing:border-box;自动计算大小

10. css 中哪些属性可以继承？

【参考答案】

     （1） 可继承的样式： font-size font-family color, text-indent;

     （2） 不可继承的样式：border padding margin width height;

11. 响应式页面中需要考虑是主要分辨率有哪些（需要兼容PC、平板、手机）

【参考答案】

      手机：max-width:600px

      平板：min-width:600px        max-width:960px PC 端：min-width:960px

12. 实现元素隐藏的方式

【参考答案】

        opacity：0;

        display：none;

        visibility：hidden;

         position：-2000px;

13. isibility: hidden 和 display: none 的区别

【参考答案】

          visibility: hidden：将元素隐藏，但是在网页中该占的位置还是占着

          display: none 将元素的显示设为无，即在网页中不占任何的位置

14. 列表单form 的属性列举 3 个？

【参考答案】

           methood=”get/post action=url

           target=”_blank/_parent“(前一个重新打开一个页面，后一个直接本页面跳转)

           H5 新增：autocomplete（规定输入字段是否应该启用自动完成功能）

           novalidate（规定当提交表单时不对其进行验证）

15. 怎么理解盒模型

【参考答案】

          标准盒模型：盒模型的宽高只是内容（content）的宽高，box-sizing:border-box; 转ie 盒模型；

          ie 怪异盒模型： 宽高是内容(content)+ 填充(padding)+ 边框(border) 的总宽高， box-sizing:content-box; 转标准盒模型

16. 说几个常用的flex（弹性布局）的属性

【参考答案】

     父盒子(flex 容器)：

               display:flex; // 指定为 flex 布局

               just-content ： flex-start( 默认)| flex-end | center | space-between | space-around;        // 设置子元素在主轴上的对齐方式

               flex-direction:row(默认)|row-reverse|column|column-reverse; // 设置主轴方向

               flex-wrap:nowrap(默认)|wrap|wrap-reverse; // 设置是否允许子元素换行

     子盒子(容器的子元素)：

                order: 数值;        // 设置子元素的排列顺序，默认 0

                flex-grow：数值; // 设置子元素的放大比例，默认 0

                flex-shrink:数值; // 设置子元素的缩小比例，默认 1

                flex-basis:数值|auto(默认);        // 设置子元素所占据的主轴空间，例如：350px

               flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; // 该属性是上面 3 个属性的合写，默认值为：0 1 auto，后两个属性可选