1、calc, support, media各自的含义及用法？
@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，
如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
calc() 函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算；
@media 查询，你可以针对不同的媒体类型定义不同的样式。
2、四种垂直居中的方法
水平居中：
行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中
设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;
3、1rem、1em、1vh、1px各自代表的含义
rem是全部的长度都相对于根元素<html>元素。通常做法是给html元素设置一个字体大小，
然后其他元素的长度单位就为rem。
em是子元素字体大小的em是相对于父元素字体大小，
元素的width/height/padding/margin用em的话是相对于该元素的font-size
vw/vh是基于视窗的宽度和高度的单位，相当于 屏幕宽度和高度的 1%，不过，
处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
4、画一条0.5px的直线？
height: 1px;transform: scale(0.5);
5、盒模型
标准盒模型 border, padding, content, margin
IE盒模型 border, padding, content
通过 box-sizing属性改变元素的盒模型
6、清除浮动的原因和方式
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，
而高度的塌陷使我们页面后面的布局不能正常显示。
标签法（在最后一个浮动标签后，新加一个标签，给其设置clear: both;）(不推荐)
优点：通俗易懂，方便
缺点：添加无意义标签，语义化差
父级添加 overflow 属性（父元素添加 overflow: hidden）(不推荐)
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行，导致内容被隐藏掉，无法显示要溢出的元素
使用 after 伪元素清除浮动 （推荐使用）
7、讲一下BFC
BFC ：（块级格式化上下文），是一个独立的渲染区域，让处于 BFC 内部的元素与
外部的元素相互隔离，使内外元素的定位不会相互影响。
触发条件：
根元素position: absolute/fixed；display: inline-block / table；float 元素；
ovevflow的visible除外的其他属性值。
规则:
属于同一个 BFC 的两个相邻 Box 垂直排列
属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动子元素也参与计算
文字层不会被浮动层覆盖，环绕于周围
8、CSS选择符
id选择器（#myId）
类选择器（.myClassName）
标签选择器（div, h1, p）
后代选择器（h1 p）
相邻后代选择器（子）选择器（ul > li）
兄弟选择器（li~a）
相邻兄弟选择器（li+a）
属性选择器（a[rel="external"]）
伪类选择器（a:hover, li:nth-child）
伪元素选择器（::before, ::after）
通配符选择器（*）
9、::before 和 :after 中双冒号和单冒号的区别？这2个伪元素的作用？
区别：在 CSS3 中 : 表示伪类， :: 表示伪元素
作用：想让插入的内容出现在其他内容前，使用::befroe。否则，使用::after
10、4.CSS中哪些属性可以继承？
一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。
文本相关的属性，color和text-align等。
表格的一些布局属性、列表属性如list-style等。
还有光标属性cursor、元素可见性visibility。
当属性不是继承属性的时候，可以通过将它的值设置为inherit来使它从父元素那获取同名的属性
11、CSS3有哪些新特性
过渡 transition；动画 animation；形状转换 transform:适用于2D或3D转换的元素
阴影 box-shadow；边框 border-image；Filter（滤镜）；弹性布局 Flex；栅格布局 grid；
12、css3动画如何实现
css实现动画主要有3种方式，第一种是：transition实现渐变动画，
第二种是：transform转变动画，
第三种是：animation实现自定义动画，下面具体讲一下3种动画的实现方式。
13、解释一下 Flexbox (弹性盒布局模型)？及适用场景？
概念：
flex 布局是CSS3新增的一种布局方式，一个flex布局容器默认有两条轴，一个是水平的主轴，
一个是与主轴垂直的交叉轴。
任何一个容器都可以指定为 flex 布局。行内元素也可使用 flex 布局。
场景：
我们可以通过将一个元素的display属性设置为flex，从而使此元素成为一个flex容器，
元素内所有子元素都此元素的项目。
flex容器使用flex-direction来指定主轴的方向，使用justify-content来
指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。
使用flex-wrap来规定当一行排列不下时的换行方式。
主要属性：
flex-direction 定义主轴的方向
flex-wrap 定义“如果一条轴线排不下，如何换行”
flex-flow 上述2个属性的简写
justify-content 定义项目在主轴上对齐方式
align-items 定义项目在交叉轴上如何对齐
align-content 定义多根轴线的对齐方式
14、浏览器兼容性有哪些？*****
浏览器默认的 margin 和 padding 不同：加一个全局 *{ margin: 0; padding: 0; }来统一
谷歌中文界面下默认会将小于12px 的文本强制按照12px显示
解决：使用-webkit-transform:scale(.75);收缩的是整个span盒子大小，这时候，必须将
span准换成块元素。
超链接访问过后hover样式就不会出现了，被点击访问过的超链接样式不再具有hover 和active 了
解决：改变css 属性的排列顺序L-V-H-A
15、width: auto 和 width: 100% 的区别
width: 100% 会使元素box的宽度等于父元素的contentbox的宽度
width: auto 元素撑满整个父元素，margin, border, padding, content 区域会自动分配水平空间
16、CSS优化，提高性能的方法有哪些？
加载性能：
CSS 压缩：将写好的CSS 进行打包压缩，可以减少很多的体积。
CSS单一样式：当需要下边距和左边距的时候，很多时候选择：margin: top 0 bottom 0;
但margin-top: top;margin-bottom: bottom;执行的效率更高。
选择器性能：
关键选择器。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。
17、怪异盒模型box-sizing？弹性盒模型|盒布局?
在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，
盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。
18、transform？animation？区别?animation-duration
Transform:它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视
等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。
Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹
表现的javascript代码而实现动画,可以通过keyframe显式控制当前帧的属性值.
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
20、animation对应的属性
写法：animation: name duration timing-function delay iteration-count direction;
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
21、transition（过渡）
css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、
获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值 注意区别
transform，transform是进行2D转换的 如移动，比例化，反过来，旋转，和拉伸元素。
22、为什么要初始化CSS样式。
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会
出现浏览器之间的页面显示差异。
23、解释下 CSS sprites，以及你要如何在页面或网站中使用它。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的
“background-image”，“background- repeat”，“background-position”的组合
进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少
很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是
6个。对于未来而言，就不需要这样做了，因为有了http2。
24、a点击出现框，解决方法:
a,a:hover,a:active,a:visited,a:link,a:focus{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
outline:none;background: none;
text-decoration: none;border:none;
-webkit-appearance: none; }
未完，待更新。。
1168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
