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>