整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
做商城类项目的时候，我们可能都会经历过“优惠券”这类需求，笔者在过往工作中，都是直接要求UI切图来实现，直到有一天产品告诉我一个奇思妙想：这个优惠券的宽度会随内容变化的！一下子让我陷入了人生的大思考，这样图片方式可不好整呐，因此萌生一个想法：能不能用纯css实现这些效果呢？
首先我们来看下css如何实现内倒角
.card {
width: 200px;
height: 100px;
position: relative;
background-image:
radial-gradient(circle at left 50px, #fff, #fff 10px, transparent 10px),
radial-gradient(circle at right 50px, #fff, #fff 10px, transparent 11px),
radial-gradient(circle at 100px top, #fff, #fff 10px, transparent 11px),
radial-gradient(circle at 100px bottom, #fff, #fff 10px, transparent 11px);
background-color: red;
}效果图：
内倒角效果图
其实最先想到的是画圆形，在这个例子当中，主要是利用了设置背景图的属性与radial-gradient渐变来实现，实际效果差不多，在形状上呢还是保持整体方形，相信大家也看出来副作用，首先这个添加的渐变需要和背景颜色同步，比如设置的倒角是白色，背景是灰色的，那就露馅啦。
使用圆形的可能情况为倒角设置颜色的效果 | |
上面实现了内倒角，接下来就要考虑虚线了，既然要纯css，能不能把虚线也给优雅地实现了呢，其实线性渐变就可以做到，一起来看看：
.line {
width: 100%;
height: 1px;
background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
background-size: 12px 1px;
background-repeat: repeat-x;
}代码效果：
虚线
/* 稍微调整下size属性就能改变虚线宽度 */
background-size: 20px 1px;虚线2
同样是利用径向渐变，我们尝试下波浪框效果：
.card {
background: red;
width: 200px;
height: 100px;
position: relative;
}
.card:after {
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: -5px;
width: 10px;
height: 100%;
background: radial-gradient(circle, #ffffff, #ffffff 4px, transparent 5px);
background-size: 10px 10px;
}bolang
通过以上例子，优惠券剪卡风格的效果已经呼之欲出了，我们只需要把这些效果组合起来，对颜色位置宽度等细节进行调整~
竖型优惠券例子效果：
.card1 {
width: 120px;
height: 150px;
position: relative;
background-image:
radial-gradient(circle at left 90px, #fff, #fff 10px, transparent 10px),
radial-gradient(circle at right 90px, #fff, #fff 10px, transparent 11px);
background-color: red;
border-radius: 4px;
}
.card1 > .line {
position: absolute;
bottom: 60px;
left: 14px;
width: 96px;
height: 1px;
background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, transparent 50%);
background-size: 12px 1px;
background-repeat: repeat-x;
}究极组合，横型优惠券剪卡风格效果：
.card2 {
width: 200px;
height: 100px;
position: relative;
background-image:
radial-gradient(circle at 130px top, #fff, #fff 10px, transparent 11px),
radial-gradient(circle at 130px bottom, #fff, #fff 10px, transparent 11px);
background-color: red;
border-radius: 4px;
}
.card2 > .line {
position: absolute;
top: 50px;
right: 31px;
width: 78px;
height: 1px;
background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, transparent 50%);
background-size: 12px 1px;
background-repeat: repeat-x;
transform:rotate(90deg);
}
.card2:after {
content: '';
position: absolute;
top: 0px;
bottom: 0px;
right: -5px;
width: 10px;
height: 100%;
background: radial-gradient(circle, #ffffff, #ffffff 4px, transparent 5px);
/* 这里可以优化一下，变为半圆，right也可以设置为0了 */
background: radial-gradient(circle at right, #ffffff, #ffffff 4px, transparent 5px);
background-size: 10px 14px;
}是不是有那么点味道了呢，仅用径向渐变和线性渐变就能做出来效果，一想到UI小姐姐都不用切图给我，可以早早下班回去陪她男朋友了，我赶紧向她展示了成果，没想到小姐姐跟我说，你这没阴影不好看呀，这下子让我又一次陷入了人生的大思考。
回到工位上，我放弃了思考，颤抖的手胡乱地加了一个shadow，果然，露馅了啊！
但是我们要冷静，之前的思路是先画一个方形，然后放置圆形或半圆叠盖，所以最终还是会原形毕露，结果还是必须掏空那段半圆缺口啊，可css明显是做不到的
等等，这时候就需要逆转想法，不是先画一个方形再剔除半圆，而是一开始就不画半圆这个缺口，将整个不规则形状填充出来，也就不需要剔除半圆了，先来看看下面这段css以及它的效果：
width: 300px;
height: 100px;
background:
radial-gradient(circle at right bottom, blue 10px, red 0) top right /50% 50px no-repeat,
radial-gradient(circle at right top, blue 10px, orange 0) bottom right / 50% 50px no-repeat,
radial-gradient(circle at left top, blue 10px, yellow 0) bottom left / 50% 50px no-repeat,
radial-gradient(circle at left bottom, blue 10px, green 0) top left / 50% 50px no-repeat;按这个思路将上面的例子转为画上下两瓣方形，给透明径向渐变绘制的circle以外的区域填上颜色，而阴影部分就用filter来处理
.card2 {
width: 200px;
height: 100px;
position: relative;
background:
radial-gradient(circle at 130px top, transparent 10px, red 0) top / 100% 51px no-repeat,
radial-gradient(circle at 130px bottom, transparent 10px, red 0) bottom / 100% 51px no-repeat;
border-radius: 4px;
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
/* box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); */
}
.card2 > .line {
/* 没变化 */
}最终效果如下，为了看清阴影故意加深了：
没办法，波浪框还是覆盖上去的半圆，所以设置不上贴合的阴影效果，但是基本的券卡形式总算是完美实现了。
第二天UI小姐姐跟我说，她改了设计图，叫我看看，我说停停，要不你还是切图给我吧。
以上就是文章的全部内容，希望对你有所帮助！如果觉得文章写的不错，可以点赞收藏，也欢迎关注，我会持续更新更多前端有用的知识与实用技巧，希望与你共同成长~关于作者茶无味de一天
一篇，小编分享了怎么使用CSS，接下来小编分享CSS中最最重要的部分-选择器；选择器可分为基础选择器、高级选择器；今天先给大家分享基础选择器；
什么是选择器？就是规定/匹配了哪些元素能够使用{}内的样式；
1.通配选择器—*：匹配页面中所有的标签元素；语法规定是：*{属性：值}；常用于定义全局样式，如字体大小颜色等
2.元素/标签选择器—p、div、span等：就是匹配某一类标签；语法规范：p{属性：值}
3.类选择器—“.className”：就是匹配某一个或一组class名的标签“语法规范：.className{属性：值}
4.分类选择器—“p.name”：就是匹配某一标签中，指定类名的目标标签，语法规范：p.name{属性：值} 就是匹配p标签中类名为name的p标签；
5.id选择器—“#idName”：就是匹配某一个id值的标签，语法规范：#idName{属性：值}，注意这个匹配绝对是只有一个目标，因为id是不允许重复的，唯一的，因为id对应的目标元素也是唯一的，这个方式定位到目标元素是最准确的。
6.群组选择器：这个选择器，不是特别的选择器，是指多个元素在有相同样式的情况下，可以通过在选择器之间加"，"隔开，这样能使多个元素运用{}后的样式，语法规范：p，div{属性：值}，意思即p div有相同的样式，这个方式使得CSS代码能加简洁，方便
7.后代选择器：这个方式就通过元素的位置来匹配，后代选择器是指某一个元素即<标签></标签>内所有的元素，通过选择器1 选择器2的方式定位到某一元素的后代元素；如<div> <p>我的div的后代1</p><p>我的div的后代2</p></div>语法规范：div p{属性：值} 这样就能选择匹配到div后代所有的p了，不管是第一层还是第n层的p；
8.子代选择器：这个方式也是通过元素的位置来匹配，和后代选择器不同的时，子代选择器匹配到的是某一个标签的第一层后代，仅仅是父子关系，方式也和后代选择器不同，方式是通过“>”；语法规范：div>p{属性：值}
9.伪类选择器：这个选择器通过匹配识别元素的某一个状态；伪类选择器分类：a）链接伪类：适用于未访问的链接a即a:link，适用于访问过后的链接a即a:visited。b)动态伪类：适用于鼠标悬停时即:hover，适用于元素被激活时即:active，适用于元素获取焦点时（一般是指表单）即:focus.c)目标伪类。d)元素状态伪类。e）结构伪类。f）否定伪类。
以上是CSS选择器中的基础选择器；
结下来，小编给大家分享一些常用属性
1.颜色单位
颜色的表达方式有3种，数值、英文字母、英文单词；数值表示方式语法规范：rgb(xxx,xxx,xxx)其中，rgb对应的颜色分别：红色、绿色、蓝色；XXX数值的范围是0-250-255，常见红色为（255,0,0），绿色为（0,255,0），蓝色（0.0，255）。英文字母方式语法规范：color:#xxxxxx其中xx取值范围0-9a-fA-F，比如白色即color：#ffffff，如果2个1、2或3、4或者5、6的值是一样的，那么可以缩写为1个字母，如#fff。英文单词就比较简单了，如black、red等，这个方式比较单一，颜色比较简单。
2.尺寸
常用于设置宽度和高度；width、height；只有块级元素才能设置宽度和高度、行内元素不能设置宽度和高度
如果设置的width或者height过大，超出它父级的范围那么就涉及到溢出问题了。当内容溢出时可以处理方式有：溢出可见（visible）、隐藏（hidden）、设置滚动条（scroll）、自动（auto）、横向溢出（overflow-x）、纵向溢出（overflow-y）
3.边框：border 语法规范：border:边框的宽度 边框的样式（虚线还是实线） 边框的颜色====border:1px solid red
这个可以统一设置上下左右四边的边框样式，也可以单独设置某一边的边框样式，语法规范：border-放心-属性，如border-top-color:red即表示上边的边框颜色；
4.边框倒角，即边框4个脚的圆弧设置，语法规范：border-readius:xx xx xx xx，如果有4个值那么就是表示从左上角、右上角、右下角、左下角的边框倒角；如果只有1个值，那么表示这个4个边框倒角为统一值。
预告：下一篇： 前端开发教程之CSS（三） 其他属性
． HTML
1. img标记属于什么类型元素？
答案：属于行内(inline)元素.
2.结构标记有哪些？他们与div有什么相同之处，又有什么不同之处？
答案：header，nav，section，aside，footer，article
都是用来做布局的，但结构标记提高了语义性和可读性.
3. 行内元素，块元素，空元素有哪些？
答案：
（1）行内元素：
a， span，i，img，b ,s,u，sup,sub,label
（2）块元素：
div ，dl，dt，dd，ul，li，ol，p，h1，h2，h3，h4，h5，结构标记
（3）空元素：
br-换行，hr-水平分割线
4. 什么是前端？
答案：
用HTML/CSS/JavaScript以及更多的框架技术，编写网站页面、App应用、小程序、2D&3D游戏、Web VR&AR等应用，通过内容设计、交互动画、数据操作构建项目与用户的交互界面。前端工程师在项目中可以与UI设计师和后台程序员合作，实现设计意图并调用后台接口，也可以独立工作完成强用户交互的各类应用。
5. HTML、CSS、JavaScript的作用是什么，为什么会产生这三种语言？
答案：这三种语言都是用来编写网页的，HTML用于搭建网页结构展示内容，CSS用于修饰HTML元素，JavaScript用于添加网页的交互验证。
6. 说说HTML5，CSS3的新特性，平时使用过哪些？
答案：
H5新特性：
结构标记（header，footer，section，article，aside，nav），新表单元素（url，email，number，date，month，color等），canvas，audio，video，地理定位，拖放，web存储，Web Workers，WebSocket等。
CSS3新特性：
复杂选择器器（属性选择器，伪类选择器，伪元素选择器，兄弟选择器等），边框倒角，边框阴影，渐变，转换，过渡，动画，弹性盒子，媒体查询技术等。
7、Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?
（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。
8、对语义化如何理解？
答案：用正确的标签做正确的事情！
HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式 CCS 情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
9、iframe 有那些缺点？
iframe 会阻塞主页面的 Onload 事件；
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。
10.对 WEB 标准以及 W3C 的理解与认识？
答案：
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链 css 和 js 脚本、结构与行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性.
11.XHTML 和 HTML 有什么区别？
答案：
HTML 是一种基本的 WEB 网页设计语言，XHTML 是一个基于 XML 的置标语言最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。标签名必须用小写字母。
XHTML 文档必须拥有根元素。
12.img 标签上 title 与 alt 属性的区别是什么?
答案：alt ,当图片不显示时，在图片位置所显示的文字。
title,鼠标移入到元素上时，为该元素添加提示信息。
13.你如何对网站的文件和资源进行优化?
答案：解决方案包括：
文件合并
文件最小化/文件压缩
使用 CDN 托管
缓存的使用.
二． CSS3
1.隐藏网页中的元素有几种方式？这些方法有什么区别？
答案：三种方法，
display:none; 脱离文档流，不占页面空间,会改变页面布局。
visivility:hidden ；不会脱离文档流，不会改变页面布局，仍占页面空间
opacity:0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件
2.如何解决子元素的上外边距溢出？
答案：在父元素的第一个子元素位置处添加一个空的table标记.
3.常用来设置透明度的方式有几种？他们之间有何区别？
答案：opacity或rgba
opacity能设置与元素相关各种颜色的透明度
rgba()只能设置当前某一种颜色的透明度
4.浮动会对父元素的高度带来什么影响？如何解决这个问题？
答案：子元素一旦浮动，父元素的高度为0，在父元素最后一个子元素位置处添加一个空的块级元素，并设置其clear属性值为both.
.clear:after{
display:block;
content:””;
clear:both;
}
5.哪些元素默认有外边距？
答案：body，p，h1-h6，ul，ol，dl，pre
6.网页中如何定义锚点？如何连接到锚点位置？
答案：a标记用name定义锚点，其他标记用id属性定义锚点，
连接到锚点的位置：href="#锚点名称"
7.框模型默认的计算方式是什么？要改变默认的计算方式用哪个属性及值？
答案：
实际占地宽度=左右外边距+左右边框+左右内边距+width
实际占地高度=上下外边距+上下边框+上下内边距+height
改变计算方式 box-sizing:border-box
8.实现时针转动效果需要用到CSS中哪些关键技术？
答案：旋转，动画，绝对定位
9.设置行内元素居中对齐用什么属性？
答案：text-align：center
10.如果要将表单中控件的值提交给服务器必须为控件设置什么属性？
答案：name和value属性
11.transition和animation的区别？
答案：
Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，
而animation不需要触发任何事件的情况下也会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的，也可以理解为一个animation是由多个transition组成。
12. 如何实现水平垂直居中？
答案：
1、定位+外边距 盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
2、定位+transform 盒子高宽已知，
#container{ position:relative; border:1px solid red; width:800px; height:600px; }
#center{ width:100px; height:100px; background:blue; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
3、flex 布局
父级：
display: flex;
align-items: center;
justify-content: center;
13. 盒子模型你是怎么理解的？
答案：
元素框处理元素内容，内边距外边距以及边框的计算方式。
盒子模型有两种，W3C和IE盒子模型
（1）w3c的盒模型width=content，不包括margin，padding,border
（2）IE盒模型width=content+padding+border
（3）box-sizng border-box在已设定的宽度和高度之内去设定padding和border
content-box在已设定的高度和宽度之外设置padding和border
14. src和href的区别？
答案：
（1）href：
href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。
并行下载该文档，不会停止对当前文档的处理
（2）src：
src是source的缩写，src指向的内容会嵌入到文档当前标签所在位置
如img、script、iframe当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。
15. 说出link和import的区别？
答案：
（1）使用方法不同：
link一般在html头部定义，作为html标签，链接资源，主要用于链接外部的样式表
import一般定义在css内部，并且一定要在其他所有规则之前，也就是一般写在文件头部，并且专门拿来链css的。
（2）加载顺序差别
import比link延迟一些，它会等到页面下载完后才加载，因而可能会产生闪烁
16. 改变页面元素位置的定位方式及他们的区别？
答案：
relative 相对定位 相对于自身原来位置进行偏移，仍处于标准文档流中；
absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照， 完全脱离文档流；
fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在固定的位置。固定定位也会脱离文档流。
17. display有哪些值，说明他们的作用？
答案：
display的取值可以是none/inline/block/inline-block/table
none:元素隐藏不可见，并且元素也不占页面空间。
Inline:元素将呈现行内元素的特点，多个元素在一行中显示，不允许修改尺寸，也不能设置垂直外边距。
block:元素将呈现块级元素的特点，每个元素独占一行，允许修改尺寸。
inline-block:元素将呈现行内块元素的特点，多个元素在一行中显示，但是可以修改尺寸。
table:元素将呈现表格的特点，由内容决定表格的显示方式。元素独占一行，允许修改尺寸。
18. 有两个div，外框和内框高度宽度都不定，内框垂直水平居中，利用css如何实现？
答案：.center{
display:flex;
justify-content:center;
align-items:center;
}
19. 说说em和rem的区别
答案：rem是基于html元素的字体大小来决定，而em则根据使用它的元素的字体大小决定（很多人错误以为是根据父类元素，实际上是元素继承了父类的属性才会产生的错觉）
20、浏览器的内核分别是什么?
答案：IE 浏览器的内核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、 Opera 内核原为 Presto，现为 Blink；
21、为什么要初始化 CSS 样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对 SEO 有一定的影响，但力求影响最小的情况下初始化。最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p,, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
ul, ol{ list-style:none;}
a{text-decoration:none; }
a:hover {text-decoration:underline; }
img{ border:0;}
button,input, select,textarea{ font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
22、CSS哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？
答案：
可继承的样式： font-size ,font-family ,color, background等;
不可继承的样式：border, padding ,margin ,width ,height ;
优先级就近原则，同权重情况下以最近者为准;
优先级为: !important > id > class > tag
important 比 内联优先级高
CSS3 新增伪类：
:first-child 选择属于其父元素的首个元素。
:last-child 选择属于其父元素的最后一个元素。
:only-child 选择属于其父元素唯一的元素。
:nth-child(n) 选择属于其父元素的任意一个子元素。
:empty 选择没有子元素的元素。
:not(selector) 将满足指定选择器的元素给排除在外。
23.描述 css reset 的作用。
答案：reset 重置浏览器为元素设置的默认样式，浏览器的种类不同，样式可能不同，重置是为了让他们统一样式。
24.清除浮动带来影响的几种方式，各自的优缺点
答案：
1、直接设置父元素高度，但不是每次都知道父元素的高度。
2、设置父元素也浮动，但不是任何时候父元素都需要浮动，而且浮动会影响后续元素。
3、为父元素设置 overflow属性，但如果有内容需要溢出显示的话，也会一同被隐藏。
4、在父元素中，追加空子元素，并设置其clear:both,但页面中会多出一个空元素。
5、用内容生成的方式:after{content:””;display:block;clear:both;}
25.px 和 em 的区别
px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em
三． AJAX
1.用post方式异步向服务器端提交数据时，需要在发送请求前设置什么？提交的数据放在什么位置？
答案：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
数据放在send（）括号中
2.什么是异步数据加载？
答案：浏览器在向服务器发送请求的时候，不耽误用户在网页上做其它操作，可以同时开启多个任务，并且可以以无刷新的效果来更改页面中的局部内容。
3.异步请求数据的步骤分为哪几步？
答案：创建异步对象，绑定监听事件，创建异步请求，发送异步请求
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var resText=xhr.responseText;
}
}
xhr.open(method,url,true);
xhr.send(body);
4.异步请求中满足什么条件时才能取出响应的结果数据？
答案：请求状态码为4，响应状态码为200时
5.如何理解JSON？
答案：
JSON是JS对象的一种表现方式，即以js对象的数据格式表现出来的字符串，JSON中的两个api如下：
将JSON字符串转换成JSON对象 JSON.parse()
将JSON对象转换成JSON字符串 JSON.stringify()
6. http和https的区别？
答案：
http传输的数据都是未加密的，也就是明文的
https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。
两者使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443
7.列举几种常见的3和4开头的状态码以及他们的意义？
答案：
301 ：永久性重定向
302 ：临时重定向
304 ：请求资源未被修改，命中缓存
400 (错误请求) 服务器不理解请求的语法。
403 (禁止) 服务器拒绝请求。
404 (未找到) 服务器找不到请求的网页。
8. 什么是ajax？有哪些优缺点？
答案：AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。
优点：
1.局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验。
2.减轻服务器的压力,按需取数据,最大程度的减少冗余数据请求。
3.基于xml标准化,并被广泛支持,不需安装插件。
4.促进页面和数据的分离。
缺点：
1.AJAX破坏了浏览器的Back和History功能
2.AJAX安全问题
3.对搜索引擎支持较弱
4.破坏程序的异常处理机制
5.AJAX不是很好支持移动设备
四． Bootstrap
1.用bootstrap中的栅格做网页布局的基本结构是什么？默认将一行分为多少列？
答案：容器中设置行，行内设置列
默认将一行分为12个单元格（列）
2.如何编写响应式网页？
答案：
(1)声明viewport元标签
(2)所有容器/文字/图片 使用相对尺寸
(3)流式布局+弹性布局
(4)使用CSS3 Media Query技术
3.同时监听多个scss文件的命令是什么？
答案：node-sass -w scss文件夹 –o css文件夹
4.在scss中如何定义混合器以及引用？
答案：
@mixin 混合器名称{ 样式声明 }
通过@include来使用混合器。
5.对于各类尺寸的设备，Bootstrap设置的class前缀分别是什么？
答案
超小设备手机（<768px）：.col-xs-
小型设备平板电脑（>=768px）：.col-sm-
中型设备台式电脑（>=992px）：.col-md-
大型设备台式电脑（>=1200px）：.col-lg-
6.Bootstrap如何设置响应式表格？
增加class="table-responsive"
7、使用Bootstrap激活或禁用按钮要如何操作？
激活按钮：给按钮增加.active的class
禁用按钮：给按钮增加disabled="disabled"的属性
8、Bootstrap有哪些关于<img>的class？
（1）.img-rounded 为图片添加圆角
（2）.img-circle 将图片变为圆形
（3）.img-thumbnail 缩略图功能
（4）.img-responsive 图片响应式 (将很好地扩展到父元素)
9、Bootstrap中有关元素浮动及清除浮动的class？
class="clearfix" 清除浮动
10、Bootstrap如何制作下拉菜单？
（1）将下拉菜单包裹在class="dropdown"的<div>中；
（2）在触发下拉菜单的按钮中添加：class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"
（3）在包裹下拉菜单的ul中添加：class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"
（4）在下拉菜单的列表项中添加：role="presentation"。其中，下拉菜单的标题要添加class="dropdown-header"，选项部分要添加tabindex="-1"。
11、Bootstrap如何制作按钮组？
用class="btn-group"的<div>去包裹按钮组；class="btn-group-vertical"可设置垂直按钮组。
12、Bootstrap中的导航都有哪些？
（1）导航元素：有class="nav nav-tabs"的标签页导航，还有class="nav nav-pills"的胶囊式标签页导航；
（2）导航栏：class="navbar navbar-default" role="navigation"；
（3）面包屑导航：class="breadcrumb"
13、Bootstrap中设置分页的class？
默认的分页：class="pagination"
14、Bootstrap中如何制作徽章？
<span class="badge">26</span>
15、Bootstrap中超大屏幕的作用是什么？
设置class="jumbotron"可以制作超大屏幕，该组件可以增加标题的大小并增加更多的外边距。
16、Bootstrap 网格系统列与列之间的间隙宽度是多少？
间隙宽度为30px（一个列的每边分别是15px）。
17、用Bootstrap，如何设置文字的对齐方式？
class="text-center" 设置居中文本
class="text-right" 设置向右对齐文本
class="text-left" 设置向左对齐文本.
*请认真填写需求信息，我们会在24小时内与您取得联系。
