1. 如何实现一个自适应圆形，下列样式设置正确得是（D）;

    A. width：100px;height:100px;border-radius:50px;
    B. width：30%;height:30%;border-radius:50%;
    C. width：30%;height:0;padding:30%;border-radius:50%;
    D. width：30%;height:0;padding-top:30%;border-radius:50%;

    1. 在设置渐变背景过程中设置_角度创建竖直方向渐变，__创建水平方向渐变。( B )

    A. 90deg 0deg
    B. 0deg 90deg
    C. top to bottom
    D. left to right

    1. [多选] 如何去掉图片之间的默认空隙（ AD ）。

    A. font-size:0;
    B. padding:0;
    C. margin:0;
    D. float:left;

    1. [多选] 关于渐进增强与优雅降级下列说法正确的是 （ AB ）。

    A. 渐进增强: 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行处理
    B. 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容处理
    C. 渐进增强:一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
    D. 优雅降级：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行处理

    1. 关于盒模型，下列说法错误的是( C );

    A. 盒子模型有两种：IE6混杂模式盒子模型、标准W3C盒子模型；
    B. IE6混杂模式的content部分包含了border和pading；
    C. IE6混杂模式的content部分不包含了border和pading；
    D. 可以通过box-sizing属性切换盒模型

    1. 描述一下伪类与伪元素的区别？

    伪元素主要是用来创建一些不存在原有dom结构树的元素；伪类表示已经存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来添加其样式。
    区别：1.伪元素的操作对象是新生成的dom元素，不是原来dom结构里就存在的；而伪类的操作对象是原来dom结构里就存在的元素。
    2。W3C中，伪类：用于向某些选择器添加特俗的效果；伪元素：用于将特殊的效果添加到某些选择器里，就是对那些不能通过css、id等选择元素的补充；
    伪类的效果可以通过添加实际的类实现，伪元素的效果可以通过添加实际的元素来实现。
    本质区别**就是是否创造了新元素，也就是操作的对象是够存在于原来的dom结构中。**

    1. 实现一个上三角形。 

      1. <div></div>
      2. div{
      3.          width: 0px;
      4.          height: 0px;
      5.          border-bottom: 100px solid red;
      6.          border-left: 50px solid transparent;
      7.          border-right: 50px solid transparent;
      8.  }

    2. 除了rgb在css3中还可以使用hsl来设置颜色，hsl分别代表什么含义，h() s() l()？

    hsl：函数在css中使用主要提供颜色值；
    **hsl: h(hue色相)、s(saturation饱和度)、l(lightness明度)
     hue：色调是一个容器，可以设置一个色轮的色彩
     saturation：设置颜色饱和度，确定一个百分比内
     lightness：设置颜色的亮度，确定一个百分比内**

    1. 实现文字溢出打点 

      1. <style>
      2.    body {
      3.      padding: 0;
      4.      margin: 0;
      5.    }
      6.    .wrapper {
      7.      width: 190px;
      8.      height: 30px;
      9.      font-size: 20px;
      11.      position: absolute;
      12.      top: 40%;
      13.      left: 40%;
      14.      background-color: rgb(255, 156, 25);
      15.    }
      16.    @keyframes action{
      17.        0%{
      18.            opacity: 0;
      19.        }
      20.        50%{
      21.            opacity: 1;
      22.        }
      23.        100%{
      24.            opacity: 0;
      25.        }
      26.    }
      27.    @keyframes byteline {
      28.      0% {
      29.        left: 0;
      30.        opacity: 1;
      31.      }
      32.      100% {
      33.        left: 10em;
      34.      }
      35.    }
      36.    @keyframes byte {
      37.      0% {
      38.        width: 0;         
      39.        opacity: 1;
      40.      }
      41.      100% {
      42.        width: 10em;
      43.        opacity: 1;
      44.      }
      45.    }
      46.    .wrapper .text {
      47.      position: absolute;
      48.      left: 0;
      49.      top: 0;
      50.      overflow: hidden;
      51.      width: 1em;
      52.      padding-left: 4px;
      53.      white-space: nowrap;
      54.      opacity: 0;
      55.      animation: byte 10s steps(10, end) infinite;
      56.    }
      57.    .wrapper span {
      58.      position: absolute;
      59.      left: 0;
      60.      top: 0;
      61.      color: #fff;
      62.      margin-left: 3px;
      63.      opacity: 0;
      64.      animation: byteline 10s steps(10, end) infinite, action .7s step-end infinite;
      65.    }
      66.  </style>
      67. </head>
      68.  <div class="wrapper">
      69.    <div class="text">大家好，我叫陈佳欣!</div>
      70.    <span>|</span>
      71.  </div>

    2. 利用简易css代码实现以下图形变换

      image.png
      上图html结构如下：

      <div class="box">
<div class="red"></div>
<div class="green"></div>
</div>

      实现：

      <style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        perspective: 2000px;
        perspective-origin:  400px 10px;
        transform-style: preserve-3d;
    }
    body,html{
        height: 100%;
    }
    @keyframes greenrun{
        0%{
            border: 1px solid green;
            transform: translate(0);
        }
        25%{
            border: 1px solid green;
            transform: translate(100px, 0px);
        }
        50%{
            border: 1px solid green;
            transform-origin: left;
            transform: translate(100px, 0px) rotateY(90deg);
        }
        75%{
            border: 1px solid green;
            transform: translate(0);
        }
        100%{
            border: 1px solid green;
            transform: translate(0);
        }
    }
    @keyframes redrun{
        0%{
            border: 1px solid red;
            transform: translate(0);
        }
        25%{
            border: 1px solid red;
            transform: translate(0);
        }
        50%{
            border: 1px solid red;
            transform: translate(0);
        }
        75%{
            border: 1px solid red;
            transform: translate(0);
        }
        100%{
            border: 1px solid red;
            transform-origin: left;
            transform: rotatey(90deg);
        }
    }
    .box{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        transform: translate(-100px, -100px);
        transform-style: preserve-3d;
        border: 1px solid black;
        box-sizing: border-box;
    }
    .box .red, .green{
        box-sizing: border-box;
        position: absolute;
        width: 99px;
        height: 99px;            
    }
    .red{
        border: 1px solid red;
        animation: redrun 8s infinite;
    }
    .green{
        border: 1px solid green;
        animation: greenrun 8s infinite;
    }
</style>

    3. class名为box的div为class名为wrapper的子级，wrapper的宽为100px,现在为box设置css样式width:calc(50% - 10px);最终box样式为多少( 40px )

    1. 列举三个css3中新增的选择器。

    Relationship Selectors （关系型选择模式）：E+F（E的下一个满足条件的兄弟元素节点F） E~F（E下面满足条件的一堆兄弟节点F）
    Attribute Selectors（属性选择器）：E[attr~=“val”]（就是选择属性attr中包括独立a） E[attr |=“val”]（属性值-val） E[attr^=“val”] (以属性值val开头) E[attr$=“val”]（以属性值val结尾） E[attr*=“val”]（属性值有val）
    Pseudo-Element Selectors（伪元素选择器）： E :: placeholder（基本上不用，能改变提示的颜色）
    E :: selection（能够改变鼠标选中的颜色和文字阴影）

    1. 一个元素先进行沿着y轴平移再绕着z轴旋转和先绕着z轴旋转再沿着y轴平移，最后的位置显示相同嘛？

    不同

    1. display:none、visibility:hidden:、opacity:0之间的区别

    区别：1.空间占据；display：none；隐藏后不占据空间，但会产生回流和重绘，而visibility：hidden 和 opacity：0元素虽然隐藏了，但是还占据空间，只会引起页面重绘
    2.子元素继承；display：none；不会被子元素继承，但是父元素不在了，子元素自然就不显示了；visibility：hidden；会被子元素继承，可以通过设置子元素visibility：visible使子元素显示出来；opacity：0；会被子元素继承，但是不能通过opacity：0 使其重新显示
    3.事件绑定；display：none 的元素都已经不在页面存在了，因此肯定也无法触发它上面绑定的事件。visibility：hidden 元素绑定的事件也无法触发；opacity：0 元素上面绑定的事件是可以触发的。
    4.过渡动画：trandition对于display是无效的，对visibility也是无效的，对于opacity有效

    1. 实现居中的四种方式

    居中方式：1. text-aligin方式，文本对齐
    2.定宽 margin：auto；方式
    3.flex方式；justufy-content：center；
    4.position定位方式 + float；position：absolute；left：calc（50% - 元素宽度）
    5.position定位方式 + transform；position：absolute；left：50%；transform：translate（-元素宽度px）**

    1. 浮动会造成哪些问题，为什么要清除浮动

    问题：1.父元素高度塌陷：当子元素设置了float、属性之后，而且父元素的高度和宽度没有进行设置，是有子元素支撑起来的，则会导致父元素的原本height后来被设置成0；在一定程度上影响了父级的布局
    2.浮动元素之后的普通元素无视浮动元素：使用浮动之后，它是漂浮在文档流之上的，文档流中的普通元素就会表现的该浮动元素没有一样，完全无视它。而且虽然脱离了文档流但是还是占据正常文档流流的文本空间。
    **

    1. 清除浮动利用伪元素的实现方式

      .clearfix:after{
    content:'';
    display:block;
    clear:both;
}

    2. 介绍一下css的盒子模型？盒模型分几种类型？如何切换盒模型？

    盒模型：内容、填充、边界、边框
    类型：ie盒子模型（width = boxWidth； content = width - border - padding）、
    标准W3C盒子模型（width = content + padding + border）
    切换盒模型：box-sizing：border-box；ie盒子模型
    box-sizing：content-box；W3C标准盒子模型

    1. transition和animation的区别？

    　animation 可以用 name 设置动画的名称，用 duration 设置动画完成的周期，用 timing-function 设置动画的速度曲线，delay 设置动画什么时候开始，iteration-count 设置动画播放的次数，direction 规定下一个周期是否逆向的播放，play-state 动画是否正在进行或者暂停，fill-mode 设置动画停了之后位置什么状态
    　transition 用 property 去设置过渡效果的属性名称，duration 设置过渡效果的周期，timing-function 规定速度效果的速度曲线，delay 设定过渡效果什么时候开始；
    　　区别：
    　　　　1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
    　　　　2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
    　　　　3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
    　　　　4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；
    　　　　5、在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；

    1. 前端页面有哪三层构成，分别是什么？作用是什么？

    最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。
    网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
    网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
    网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

    1. 如何使文本溢出边界显示为省略号？
    div{
    width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
    1. 如何使连续的长字符串自动换行？

    如果您是在进行web页面编程，那么您需要的是css样式属性：word-break。
    语法word-break: normal | break-all | keep-all;值描述normal使用浏览器默认的换行规则。
    break-all允许在单词内换行。keep-all只能在半角空格或连字符处换行。
    方法：
    #test{width:150px;word-wrap:break-word;}
    word-wrap的break-word值允许单词内换行；因为word-break未列入w3c标准，故火狐暂未支持，可以使用word-wrap,而word-wrap应添加到td标签的样式中。

    1. box-shadow传入参数分别代表的含义？

    box-shadow: h-shadow(水平） v-shadow(垂直) blur(可选，模糊距离) spread(可选，阴影大小) color(可选，阴影颜色) inset(可循啊，从外层阴影开始改变内层阴影)

    1. 元素设置display:inline-block属性基于元素的哪条基准线对齐？如果我们想让元素居中对齐如何设置？

      行内元素和替换元素（ing、input、textarea等）有个基线（垂直对齐），基线位于文字的最底部，如果是行块级元素中文本内容，基线则就会自动移动到元素的最底部。
      既然这种情况是由元素以基线对齐才导致的，俺么只要设置元素的垂直对齐方式就可以了，使用vertical-align属性。vertical-align：top；

    2. 利用css3弹性盒子进行布局，需要为父级设置_diaplay_属性与属性值felx，子元素默认呈行级元素排列，如果想让子元素竖直排列，可以设置_**felx-direction_属性与属性值column**。


    1. css3中渐变设置包括 linear-gradient_和radial-gradient,如何实现渐变背景45deg，渐变颜色从红到绿到蓝__background-image：linear-gradient（45deg， red， green， blue）


    1. 我们可以通过给一个元素设置** transition_**属性实现过渡效果，过渡属性由那几个属性组成？ 

       **过渡：监听属性、时间、运动方式**<br />**transition-property****（****用来监听到底哪个属性的状态改变）****：all；全部属性；**<br />**transition-duration：****时间间隔**<br />**transition-timing-function：运动方式**

    2. 页面上有一个利用transition实现的div元素的过渡动画，现在想在过渡动画结束出发btn的点击事件，如何实现？可以用简略代码实现。 

      $("div").mousemove(function (e) {
    $("div").css("backgroundColor", "red");
    console.log($("div").css("backgroundColor"));

    setTimeout(function () {
      if ($("div").css("backgroundColor") == "rgb(255, 0, 0)") {
        $(".btn").trigger("click");
      }
    }, parseInt($('div').css('transitionDuration')) * 1000);
  });
  $(".btn").click(function (e) {
    console.log("我，我，我自己打的");
  });

    3. 如何实现一个元素的倒影，利用 box-reflect__属性实现。


    1. 什么是网页响应式设计？

    用一套代码解决几乎所有设备的页面展示问题