1介绍一下标准的CSS盒模型？和低版本IE的盒子模型有什么区别？标准盒模型：width=内容宽度（content）+border+padding+margin低版本IE盒模型：width=内容宽度（content+border+padding）+margin2box-sizing属性？用于控制元素的盒模型的解析方式，默认为content-boxcontext-box：W3C标准盒模型，设置元素的height/width属性，指的是内容部分边框的高/宽-box：IE传统的盒子模型。设置元素的height/width属性是指border的height/width+padding+content3什么是CSS选择器？哪些属性可以继承？CSS选择器：id选择器（#myid）、类选择器（.myclassname）、标签选择器（div、h1、p）、相邻选择器（h1+p）、子选择器（ul>li）、后代选择器（lia）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover、li:nth-child）可继承属性：font-size、font-family、color不可继承样式:border,padding,margin,width,height优先级（就近原则）：!important>[id>class>tag]!important是4CSS优先级高于inline优先级算法如何计算？元素选择器：1class选择器：10id选择器：100元素标签：1000！important声明的样式优先级最高，如果有冲突会计算。如果优先级相同，则选择最后出现的样式。继承样式的优先级最低。5CSS3中有哪些新的伪类？p:first-of-type选择属于其父元素的第一个元素p:last-of-type选择属于其父元素的最后一个元素p:only-of-type选择其父元素only元素p:only-child选择属于其父元素的唯一子元素p:nth-child(2)选择属于其父元素的第二个子元素:enabled:disabled表单控件的禁用状态。:checked单选或复选框被选中。6如何让一个div居中？如何使浮动元素居中？如何居中绝对定位的div？div:border:1pxsolidred;margin:0auto;height:50px;width:80px;浮动元素的上、下、左、右中心：border:1pxsolidred;float:left;position:absolute;width:200px;height:100px;left:50%;top:50%;margin:-50px00-100px;绝对定位左右center:border:1pxsolidblack;position:absolute;width:200px;height:100px;margin:0auto;left：0；右：0；还有一种比较优雅的居中方式就是使用flexbox，后面会整理。7显示值有哪些？解释他们的作用？inline(default)--inlinenone--hideblock--blockdisplaytable--tabledisplaylist-item--itemlistinline-block8position的值？静态（默认）：按照正常文档流排列；relative（相对定位）：不脱离文档流，通过top,bottom,left,right定位来指代自身的静态位置；absolute（绝对定位）：指的是最近的一个非静态父元素由top,bottom,left,right定位；fixed（固定定位）：固定参照物为可见窗口。9CSS3有哪些新特性？RGBA和透明度background-imagebackground-origin(content-box/padding-box/border-box)background-sizebackground-repeatword-wrap(wrapforlonginseparablewords)word-wrap:break-wordtext-shadow:text-阴影：5px5px5px#FF0000；（水平阴影、垂直阴影、模糊距离、阴影颜色）font-face属性：定义自己的字体圆角（borderradius）：border-radius属性用于创建圆角边框图片：border-image:url(border.png)3030roundboxshadow:box-shadow:10px10px5px#888888mediaquery:定义两套css，浏览器大小变化时会使用不同的属性10请说明CSS3flexbox（弹性盒布局模型），以及适用场景？此布局模型的目的是提供一种更有效的方式来为容器中的项目布置、对齐和分配空间。在传统的布局方式中，块布局是将块从上到下垂直排列；而内联布局将它们水平排列。Flexbox布局没有这种固有的方向限制，可以由开发人员自由操作。试用场景：Elastic布局适用于移动前端开发，在Android和ios上也完美支持。11纯CSS创建三角形的原理是什么？首先需要将元素的宽高设置为0，然后设置边框样式。width:0;height:0;border-top:40pxsolidtransparent;border-left:40pxsolidtransparent;border-right:40pxsolidtransparent;border-bottom:40pxsolid#ff0000;12如何设计全屏字符layout?第一类实字：确定三个块的高和宽；顶部块使用margin:0auto；居中；底部的两个块使用float或inline-block没有换行符；使用保证金来调整他们的位置以居中。第二种全屏字符布局：上div设置为100%，下div为50%宽，然后使用float或者inline使其不换行。13常见的兼容性问题？不同浏览器中tabs默认的margin和padding是不一样的。{margin:0;padding:0;}IE6bilateralmarginbug：当block属性标签float后有水平margin时，IE6显示的margin比设置的margin大。破解：显示：内联；将其转换为内联属性。渐进式识别的方法是逐渐将部分排除在整体之外。首先，巧妙地使用“9”标记将IE与所有情况区分开来。然后，再次使用“+”将IE8和IE7、IE6分开，这样IE8就已经独立识别了。{background-color:#f1ee18;/allrecognition/.background-color:#00deff9;/IE6,7,8recognition/+background-color:#a200ff;/IE6,7recognition/_background-color:#1e0bd1;/IE6识别*/}设置更小的高度标签（一般小于10px），高度超过IE6、IE7自己设置的高度。Hack:设置overflow:hidden用于超过高度的标签；或将行高line-height设置为小于您设置的高度。IE下可以使用获取常规属性的方法获取自定义属性，也可以使用getAttribute()获取自定义属性；在Firefox下，只能使用getAttribute()来获取自定义属性。解决方法：通过getAttribute()统一获取自定义属性。默认情况下，Chrome中文界面会强制小于12px的文字以12px显示，可以通过添加CSS属性-webkit-text-size-adjust:none来解决；超链接被访问后，hover样式不会出现，被点击的超链接样式也不再有hover和active。解决方法是改变CSS属性的顺序：L-V-H-A（爱恨交加）：a:link{}a:visited{}a:hover{}a:active{}14为什么需要初始化CSS样式因为浏览器兼容性问题，不同浏览器对某些标签的默认值不同。如果不对CSS进行初始化，浏览器之间的页面显示往往会存在差异。15absolutecontainingblock计算方式和普通流量有什么区别？不管属于哪种类型，都需要在其祖先元素中找到最近的position值不是static的元素，然后判断：如果这个元素是内联元素，那么包含块就是第一个和最后一个生成的元素可以包含这个元素的inlinebox的paddingbox的最小矩形（margin和border以外的区域）；否则，它由这个祖先元素的填充框组成。如果两者均未找到，则它是初始包含块。补充：static（默认）/relative：简单的说，就是其父元素的内容框（即去掉padding的部分）始终是根元素(html/body)16CSS中的visibility属性有一个collapse属性值？不同浏览器有什么区别？当元素的可见性属性设置为折叠值时，它的行为与普通元素的隐藏行为相同。在chrome中，使用collapse值和使用hidden没有区别。firefox、opera和IE，使用collapse值和使用display:none没有区别。17display:none和visibility:hidden有什么区别？display:none不显示对应元素，不再在文档布局中分配空间（回流+重绘）visibility:hidden隐藏对应元素，保留文档布局中原有空间（重绘）18位并显示，overflow,当float的这些特性相互叠加时会发生什么？display属性指定元素应生成的框类型；position属性指定元素的定位类型；float属性是一种布局方法，用于定义元素浮动的方向。类似于优先级机制：position:absolute/fixed具有最高优先级。当它们存在时，float不起作用，需要调整显示值。float或absolute定位的元素只能是块元素或表格。19BFC规范的理解（块格式化上下文：blockformattingcontext）？BFC指定内部BlockBox的布局方式。定位方案：内部的Boxes会在垂直方向上依次放置。Box在垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会重叠。每个元素的边距框的左侧接触包含块的边框框的左侧。BFC的区域不会和浮动框重叠。BFC在页面上是一个隔离独立的容器，容器内的子元素不会影响外面的元素。BFC计算高度时，浮动元素也会参与计算。满足以下条件之一即可触发BFC根元素，即htmlfloat的值不为none（默认），overflow的值为不可见（默认），display的值为inline-block、表格单元格和表格标题位置。取值是absolute还是fixed20为什么会有float，什么时候需要清除？清除浮动的方法？浮动元素在碰到其包含边框或浮动元素的边框时停止。由于浮动元素不在文档流中，文档流的块框表现得好像浮动框不存在一样。浮动元素浮动在文档流中的块框上。浮动引起的问题：父元素的高度无法展开，影响父元素同级元素和浮动元素同级的非浮动元素（内联元素）如果不是第一个就会跟随元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。清除浮动的方法：在父div定义最后一个浮动元素的高度后添加一个空的div标签，并添加样式clear:both。为包含浮动元素的父标签添加样式overflow到hidden或auto。父div定义了zoom21，上下边距重合。在重合元素外包裹一层容器，触发容器生成BFC。例子：
