1.css3有哪些新特性（一）CSS3选择器（基础、属性、伪类详见下文）（二）CSS3边框和圆角border-radius属性：border-top-left-radius左上角border-top-right-radius右上角border-bottom-right-radius右下角border-bottom-left-radius左下角（三）CSS3背景和渐变可以设置多个背景图片，图片大小，位置线性渐变背景：线性渐变（方向，颜色停止1，颜色停止2，...）；direction也可以换成edgeradialgradientbackground:radial-gradient(center,shapesize,start-color,...,last-color);(4)CSS3transition(5)CSS3transformation2Dtransformation3Dtransformationcompatibility(6)CSS3animation在样式中给动画起个名字，就是指定动画，使用@keyframes这篇文章写的不错，你看完可以大概了解一下，但是你需要找到更多关于如何使用每个特性的信息。2、verticalcentermargin：auto的垂直居中需要和position:absolute一起使用，因为margin:auto不识别上下，只识别left和righttranslate-50%的垂直居中移动，position定位也是需要的，因为需要根据坐标。/▽////)q，补表到面3、flex一方面是父容器的几个属性，另一方面是子元素的属性容器：flex-direction的方向子元素排列flex-wrap如果一条轴线没有，如何包裹flex-flowflex-direction属性和flex-wrap属性的简写形式justify-content在主轴上对齐align-itemsalign-content如何在交叉轴上对齐多轴的对齐是在每个具体的item上设置的：orderorder的值越小，排列越高，默认为0flex-growitem的缩放比例，默认为0，即如果有剩余空间，则不扩大flex-shrink缩小比例，默认为1，即如果空间不足，则项目将缩小flex-basis主轴空间在分配多余空间之前被项目占用（主尺寸）并且可以重写align-items属性菜鸟教程很好，简单易懂这篇文章很全面，包括实际例子，包括layout4.如何理解css预处理，less和sass有什么好处，还是一些优于CSS的功能。预处理器：在编写css时，为了兼容各种浏览器，我们往往需要编写大量的代码。css预处理器就是为了解决这个问题。最常用的预处理器有sass、less和styulsCSS，具体有以下缺点：语法不够强大，比如嵌套写法，导致模块化开发需要写很多重复的选择器；没有可变合理的样式重用机制，使得逻辑上相关的属性值必须以字面形式重复输出，难以维护。这导致我们在工作中无缘无故地增加了很多工作量。CSS预处理器的使用提供了CSS所缺乏的样式层重用机制，减少了冗余代码，提高了样式代码的可维护性。大大提高了我们的开发效率。然而，CSS预处理器并不是万能的。CSS的优点是方便使用，随时随地调试。预编译CSS这一步的加入，给我们的开发流程增加了一个环节，调试也变得更加麻烦。一个更大的问题是预编译很容易导致滥用后代选择器。所以我们在实际项目中衡量预编译方案的时候，还是要思考CSS预处理器是否解决了比额外的维护开销更多的麻烦。Sass变量。由$符号定义，通过变量名实现多次重复引用。嵌套。支持选择器和属性的嵌套，但是如果你想在嵌套的选择器中应用类似于:hover的伪类，你需要使用&标识符来连接父选择器。代码重用的继承。要使用选择器继承，使用关键字@extend后接需要继承的选择器。Mixin混合器用于代码重用。使用@mixin声明一个mix，可以传参。参数名以$符号开头，多个参数用逗号分隔。您还可以为参数设置默认值。声明的@mixin由@include+minxin名称调用。如果一个参数可以有多组值，比如box-shadow、transition等，那么这个参数需要在变量后面加三个点来表示，比如$variables....带参数的小栗子：@mixinleft($value:10px){float:left;margin-left:$value;}div{@includeleft(66px);}颜色函数。Lightendarken@import引入。Sass中的@import在生成CSS文件时会先导入所有导入的文件，即所有相关的样式都会被编译到同一个CSS文件中，而不需要额外请求。less和sass的区别，less很简单，sass很强大less和sass也经常问sass怎么用伪类选择器动态伪类：:hover"、":active"和":focus":first-child选择元素的第一个子元素；:last-child选择元素的最后一个子元素；:nth-child()选择一个元素的一个或多个特定子元素;:nth-last-child()选择一个元素的一个或多个特定子元素，从该元素的最后一个子元素开始计算；:nth-of-type()选择指定元素；:nth-last-of-type()选择指定元素，从元素的最后一个开始计数；:first-of-type选择父元素下同类型的第一个子元素；:last-of-type选择一个父元素的最后一个相同类型的子元素；:only-child选择一个元素，该元素是其父元素的唯一元素；:only-of-type选择一个元素，该元素是与其父元素类型相同的唯一子元素；:emptyselects元素里面没有内容.Negative:notPseudo-elements:::first-line,:first-letter,:before,:after;6.DOM7.boxmodelcontent-boxandborder-box:content-box(w3c)宽高不包括border和padding，marginborder-box（即）中不包括padding。默认值是content-boxbox-sizing，它来自mdn边距并与doctype声明重叠在网页顶部。如果不加doctype声明，那么各个浏览器浏览器会根据自己的行为来理解网页，即ie浏览器会使用ie的盒子模型来解释你的盒子，而ff会使用标准的w3c盒子模型解释一下你的框，这样网页在不同的浏览器中显示效果会不一样。反之，如果加上了doctype声明，那么所有的浏览器都会使用标准的w3c盒子模型来解释你的盒子，网页在各个浏览器中的显示都是一致的。8、行元素和块元素的区别行元素：a、span、strong、input、label块元素：div、p、h1到h6、table、td、tr、ul、li行元素的显示和显示有哪些block元素：inline-block显示为块级元素但不占用一行元素的特性：（img和input可以设置width和height）设置widthwidth无效。设置高度无效，可以通过line-height设置。设置边距只对左右边距有效，对上下边距无效。设置padding只对left和rightpadding有效，对top和bottompadding无效。请注意，元素的范围增加了，但对元素周围的内容没有影响。为什么img、input行内元素可以设置宽高？img和input是行内替换元素。如果您不理解上一篇文章，请阅读本文。9.自适应和媒体查询页面宽度设置为百分比，所有页面大小设置为rem单位实现自适应other方法百分比rem@media2倍的使用方法我不懂10.常见的浏览器兼容性问题常见浏览器及内核：IE浏览器内核：Trident内核，俗称IE内核；是Chromium内核还是Chrome内核，以前是Webkit内核，现在是Blink内核；火狐浏览器内核：Gecko内核，俗称火狐内核；Safari浏览器内核：Webkit内核；Opera浏览器内核：原来是自己的Presto内核，后来是Webkit，现在是Blink内核；360浏览器，猎豹浏览器内核：IE+Chrome双核；搜狗、傲游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；浏览器css前缀:-o-transform:rotate(7deg);//Opera-ms-transform:rotate(7deg);//IE-moz-transform:rotate(7deg);//Firefox-webkit-transform:rotate(7deg);//Chrometransform:旋转(7deg);//兼容统一标识语句css:js（常用）：标准addEventListener，而IE使用attachEvent获取DOM节点。.IE:parentElementparentElement.childrenFirefox:parentNodeparentNode.childNodeschildNodes的下标含义在IE和Firefox中是不同的。Firefox使用DOM规范，childNodes中会插入空白的文本节点。一般这个问题可以通过node.getElementsByTagName()来避免。向我指出这个兼容性问题真的很不舒服。我必须一一记住吗？万年系列常用的手机兼容性记不清了。这个应该记住了，虽然我现在还想不起来。
