整理了网上流传的几道面试题。心血来潮，总结一下CSS面试题的检查点，发现大部分题目都是围绕几个属性和几个主题展开的，水平有限，仅供参考。写这篇博??文的时候，心里有一种莫名的自责感。我真的不应该复习面试层叠式的“考试”。如果你牛逼，你可能会说：一切都离不开它，如果你掌握了CSS，你就不用担心会考什么了。呵呵！1.多元素水平居中实现如下效果：普通人看到标题，一开始觉得实现图片中的效果并不难，只需要设置小黑框的宽高外边距即可，并将字体水平和垂直居中。其实题目其实应该考察多个元素的水平居中，即不管有多少个元素（小黑盒）是base，都可以作为一个整体水平居中。在网站布局中，很多情况下，子元素中会使用span或块元素li标签等内联元素，标签数量可变，我们希望这个块始终能够居中显示。这就需要设置子元素display:inline-block。同时根据display:inline-block属性，子元素本身具有内联特性，所以父元素需要设置text-align:center来实现子元素在父元素。main{text-align:center;}div{display:inline-block;*display:inline;/*hankIE*/*zoom:1;/*hankIE*/}使用display:inline-block属性制作内联元素或者块元素可以在不添加float属性的情况下定义自己的宽高，同时使该元素显示在父元素的中心。在inline元素上定义display:inline-block属性，发现在IE6和IE7中显示效果与其他浏览器一致，但事实是ie7及以下版本的ie浏览器不支持display:inline-block属性。IE下display:inline-block只是触发元素的布局。比如给div设置display:inline-block只能保证div具有块元素的特性（宽高等可以设置），但是还是会出现换行的情况。下一步是设置display:inline，这样它就不会生成换行符。写显示：内联块；*显示：内联；同样的样式，inline-block属性不会触发元素的布局，所以我们还需要加上*zoom:1来触发布局。除了上面提到的有效方法外，还有一种方法：先使用display:inline-block属性触发块元素，然后定义display:inline，使块元素渲染为内联对象（两个displayto这是IE的一个经典bug，如果先定义了display:inline-block，然后再把display设置回inline或block，布局不会消失）。div{display:inline-block;...}div{*display:inline;}但是要注意display:inline-block元素之间会有多余的空白（本题不涉及）。解决方法：父元素定义font-size:0去除内联块元素的水平空白；子元素定义了vertical-align属性来去除行内块元素的垂直空白。http://codepen.io/floralam/pen/XJwWZJ?editors=1102，实现网格布局的布局：http://codepen.io/floralam/pen/OPYyEE.parent{display:flex;flex-direction:column;//上面两行相当于flex-flow:colomnflex-wrap:wrap;//当显示一行wrap时换行height:440px;width:660px;}一个Flexbox布局是由一个灵活的容器（flexcontainers)和这个容器中的flex项目。Flex方向和换行符（flex-flow）Flex容器有一个CSS属性“flex-flow”，用于确定flex项目的布局。如果flex容器将“flex-flow”值设置为“row”，则flex项目从左到右排列。如果“flex-flow”值设置为“column”，则弹性项目从上到下排列。制作20%、60%、20%的网格布局。main-content{width:60%;}.main-nav,.main-sidebar{-webkit-box-flex:1;/*OLD-iOS6-,Safari3.1-6*/-moz-box-flex:1;/*OLD-Firefox19-*/width:20%;/*Foroldsyntax,otherwisecollapses.*/-webkit-flex:1;/*Chrome*/-ms-flex:1;/*IE10*/flex:1;/*NEW,Spec-Opera12.1,Firefox20+*/}3、垂直居中多行文本，高度未知http://codepen.io/floralam/pen/WbBrwV?editors=110.container{position:fixed;left:0;top:0;height:100%;width:100%;text-align:center;}.mask:after{content:"";display:inline-block;vertical-align:middle;height:100%}.dialog{display:inline-block;border:3pxsolidlightblue;}box容器生成一个高度为100%的备胎与容器的高度相同，相对于“备胎”垂直居中，视觉上表现为相对于容器垂直居中4.移动设备浏览器的多列自适应布局：http://codepen.io/floralam/pen/NPVwgz?editors=110.container{display:-webkit-box;}.??left{-webkit-box-flex:1;}.right{-webkit-box-flex:1;}实现左右元素，文本的右边的元素不会溢出到左边的位置。1）让左图向左浮动或绝对位置，http://codepen.io/floralam/pen/wBbPPj.right{margin-left:150px;}2）让左图向左浮动或绝对位置，http://codepen.io/floralam/pen/gbJogQ.right{overflow:hidden;/*让右边的文字和左边的图片自动分栏*/}3）左边的图片设置为浮动左边，http://codepen.io/floralam/pen/bNyaaX?editors=110.right{display:table-cell;/*让右边的文字和左边的图片自动分栏*/}两列或多列自适应布局的通用类语句为（blockHorizo??ntallabel，需要匹配floating）：http://codepen.io/floralam/pen/vEwpjV.cell{padding-right:10px;display:table-cell;*display:inline-block;*width:auto;}5,强制不换行div{white-space:nowrap;}自动换行div{word-wrap:break-word;//允许长词或URL地址换行到下一行word-break:normal;//让浏览器在任意位置实现换行}word-wrap控制换行。break-word是控制是否打断单词。强制英文单词打断div{ word-break:break-all;}6、li超过一定长度会以省略号显示http://codepen.io/floralam/pen/zxQjrK.nowrapli{空白：nowrap;width:100px;overflow:hidden;text-overflow:ellipsis;}7、左侧导航http://codepen.io/floralam/pen/ogrbXW?editors=110.nav{ position:relative; float:left;width:190px; margin-right:-190px; background:lightblue;}.container{ float:right; width:100%; background:pink;}.content{ margin-left:200px;}8、css3文本栏http://codepen.io/floralam/pen/ZYdOmN?editors=1109，修复sidebar在外容器Content中添加navigation和main，当导航和主要内容的宽度加上内外边距的值大于外容器宽度减去内边距的值，会导致导航和主要内容（其中之一，后面的元素html代码行）被挤出。http://codepen.io/floralam/pen/XJLRYq?editors=110解决方案：1）在Section元素上使用box-sizing:border-box；模拟IE6，让内部元素的宽度为width的值，而不是width加上padding和margin的值。2)宽度：-moz-calc(75%-1rem*2);宽度：-webkit-calc(75%-1rem*2);宽度：计算（75%-1rem*2）；从宽度属性值中减去padding3)http://codepen.io/floralam/pen/yydPOE在元素内部添加一个额外的容器，并将padding放入这个新的内部容器中。这是一个修复程序，许多浏览器都支持它。10、css画三角形http://codepen.io/floralam/pen/azgGmZ很多问题用css3画具体的图，用代码代替图片（多山，返回顶部），都离不开画图三角形。11、清除浮动的技巧在非IE浏览器（如Firefox）下，当容器高度为auto，且容器内容中有浮动（float为左或右）元素时，此时，容器的高度不能自动拉伸以适应内容的高度，使内容溢出到容器之外，影响（甚至破坏）布局。这种现象称为浮点溢出，而防止这种现象的CSS处理称为CSS清除浮点。1）添加***一个元素
