CSS面试（简答）

1、简要描述CSS中content属性的作用
content属性与:before及:after伪元素配合使用，来插入生成内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器为页面元素插入编号。

2、过渡与动画的区别是什么？
过渡属性transition可以在一定的事件内实现元素的状态过渡为最终状态，用于模拟一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果；
动画属性animation可以制作类似Flash动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。

3、多元素水平居中

main{  text-align:center;}div{  display:inline-block;  *display:inline;/*hack IE*/  *zoom:1;/*hack IE*/}/*在IE下，display: inline-block只是触发了元素的layout。比如将display: inline-block设置到div上，只能保证这个div拥有块元素的特征（可以设置宽度，高度等），但还是会产生换行。接下来要设置 display: inline，使其不产生换行。将display:inline-block;*display:inline;写在同一个样式上，inline- block属性是不会触发元素的layout的，因此我们还要额外加上 *zoom:1来触发layout。*//*但是要注意的是，display:inline-block元素间会产生多余空白（本题没有涉及）。解决方法：父元素定义font-size:0 去掉行内块元素水平方向空白；子元素定义vertical-align 属性去掉行内块元素垂直方向空白。*/

4、未知高度多行文本垂直居中

<div class="mask">        <div class="dialog">               未知宽高元素窗口水平垂直居中(拖动右下角改变宽高)"        </div>    </div>

.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: 3px solid lightblue; } /*box 容器通过 after或者before 生成一个高度 100% 的「备胎」，他的高度和容器的高度是一致的，相对于「备胎」垂直居中，在视觉上表现出来也就是相对于容器垂直居中了*/

5、超出文字用省略号

li{    white-space:nowrap;    overflow:hidden;    text-overflow: ellipsis; } 

6、css分栏

<div id="div1">  　　当春风再一次吹拂她的脸庞时，那场让她刻骨铭心的失恋已在煦风轻扬的季节淡去了。她一点点地恢复，仿佛重生一般，花儿般的笑颜又重新浮上了她的脸庞。而他，看到她康复的样子，高兴极了，但他却不会讲什么，依旧如故，默默地陪在她身旁。他爱她，就包括爱她的一切缺点。这样做，他并不觉得有失尊严。他认为既然爱了，就应该无怨无悔。而她，觉得开始有点喜欢上了他，有些依赖他。但她认为，离爱还很遥远。<br/>  　　转眼她和他都要毕业了，她甚至没有征求他的意见，就直接去了北方的一座城市，而他，却追随着她也到了这里。本来，在南方那座城市，他的家人早已给他联系好了一家不错的公司，但他连想都没想就拒绝了。她和他分别进了不同的公司。同在一个陌生的城市打工，难免心神俱疲，这个时候，她就很想找一个依靠，给她一点家的温暖。明明知道他一直愿意做她的依靠，可她却不愿意把自己的一生交付于他，因为她觉得自己一直不爱他，不爱，又如何依靠，再说，他也不能提供给她想像中的生活。  </div>    <hr/>  <div id="div2">  　　当春风再一次吹拂她的脸庞时，那场让她刻骨铭心的失恋已在煦风轻扬的季节淡去了。她一点点地恢复，仿佛重生一般，花儿般的笑颜又重新浮上了她的脸庞。而他，看到她康复的样子，高兴极了，但他却不会讲什么，依旧如故，默默地陪在她身旁。他爱她，就包括爱她的一切缺点。这样做，他并不觉得有失尊严。他认为既然爱了，就应该无怨无悔。而她，觉得开始有点喜欢上了他，有些依赖他。但她认为，离爱还很遥远。<br/>  　　转眼她和他都要毕业了，她甚至没有征求他的意见，就直接去了北方的一座城市，而他，却追随着她也到了这里。本来，在南方那座城市，他的家人早已给他联系好了一家不错的公司，但他连想都没想就拒绝了。她和他分别进了不同的公司。同在一个陌生的城市打工，难免心神俱疲，这个时候，她就很想找一个依靠，给她一点家的温暖。明明知道他一直愿意做她的依靠，可她却不愿意把自己的一生交付于他，因为她觉得自己一直不爱他，不爱，又如何依靠，再说，他也不能提供给她想像中的生活。  </div>

#div1{  -moz-column-count:2;  -webkit-column-count:2;  }  #div2{  border:6px solid orange;  padding:6px;  text-align:justify;  -moz-column-width:20em;  -moz-column-gap:3em;  -moz-column-rule:6px solid blue;  -webkit-column-width:20em;  -webkit-column-gap:5em;  -webkit-column-rule:6px solid blue;  }

7、css画三角形
讲的很清楚
三角形和平行四边形

8、左侧div固定宽度，右侧div自适应

<!--html--><div class="left">左边的内容</div><div class="right">    <div class="right_content">右边的内容</div></div><!--css-->.left{width:200px;float:left;margin-right:-200px;background: #00ca57;}.right{width:100%;float:left;}.right_content{margin-left:200px;background: #269abc;}

<div class= "container">    <div class="left"></div>    <div class="rigth"></div></div><style>/*方法一： BFC(块级格式化上下文)*/    .container{        width:1000px;height:400px;border: 1px solid red;    }    .left{        width:200px;height:100%;background: gray;        float: left;    }    .rigth{        overflow:hidden;  /* 触发bfc */        background: green;    }/*方法二： flex布局 */    .container{        width:1000px;height:400px;border:1px solid red;        display:flex;         /*flex布局*/    }    .left{        width:200px; height:100%;background:gray;        flex:none;    }    .right{        height:100%;background:green;        flex:1;        /*flex布局*/    }/* 方法三： table布局 */    .container{        width:1000px;height:400px;border:1px solid red;        display:table;         /*table布局*/    }    .left{        width:200px; height:100%;background:gray;        display:table-cell;    }    .right{        height:100%;background:green;        display: table-cell;    }/*方法四： css计算宽度calc*/    .container{        width:1000px;height:400px;border:1px solid red;    }    .left{        width:200px;height:100%;background:gray;        float:left;    }    .right{        height:100%;background:green;        float:right;        width:calc(100% - 200px);    }</style>