面试中常见的css问题

1. css实现文字省略（...）效果?

代码一（用于非表格li或span等都可以）

<style type="text/css">
.text-zn{
    display:block;/*内联对象需加*/ 
    width:31em; 
    word-break:keep-all; /*不换行 */ 
    white-space:nowrap; /*不换行 */ 
    overflow:hidden;    /*内容超出宽度时隐藏超出部分的内容 */ 
    text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...);需与overflow:hidden;一起使用。*/ 
}
</style>
<p class="text-zn">测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据</p>

代码二（用于表格）

table{ 
    width:30em; 
    table-layout:fixed;/*只有定义了表格的布局算法为fixed，下面td的定义才能起作用。*/
}

td{
    width:100%; 
    word-break:keep-all; /*不换行 */ 
    white-space:nowrap;  /*不换行 */ 
    overflow:hidden;     /*内容超出宽度时隐藏超出部分的内容 */ 
    text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...);需与overflow:hidden;一起使用。*/
}

2. 左侧固定，右侧自适应

方法一(浮动布局)

<div class="left-box-1">
    <ul>
        <li>首页</li>
        <li>列表管理</li>
        <li>用户管理</li>
        <li>权限管理</li>
    </ul>
</div>
<div class="right-box-1">
    内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面
</div>

.left-box-1{
    float: left;
    width: 200px;
    background-color: #f00; 
}
.right-box-1{
    margin-left:200px;
    background-color: #00f;
}

方法二(定位布局)

<div class="left-box-2">
    <ul>
        <li>首页</li>
        <li>列表管理</li>
        <li>用户管理</li>
        <li>权限管理</li>
    </ul>
</div>
<div class="right-box-2">
    内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面
</div>

.left-box-2{
    float: left;
    width: 200px;
    background-color: #f00; 
}
.right-box-2{
    position: absolute;
    top:0;
    left: 200px;
    right: 0;
    bottom: 0;
    background-color: #00f;
}

方法三（flex）方法三存在兼容性问题，需要注意！有兴趣同学可以阅读阮一峰老师的flex教程

<div class="container">
    <div class="left-box-3">
        <ul>
            <li>首页</li>
            <li>列表管理</li>
            <li>用户管理</li>
            <li>权限管理</li>
        </ul>
    </div>
    <div class="right-box-3">
        内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面内容页面
    </div>
</div>

.container{
    width: 100%;
    display: flex;
}
.left-box-3{
    flex: 0 0 200px;
    background-color: #f00;
}
.right-box-3{
    flex: 1;
    background-color: #00f;
}

3.margin 重叠问题

<div class="m-b-10" id="box1">
    1111
</div>
<div class="m-t-20" id="box2">
    <div class="m-t-40" id="box3">
        3333
    </div>
</div>

.m-b-10{
    margin-bottom:10px;
}
.m-t-20{
    margin-top:20px;
}

.m-t-40{
    margin-top: 40px;
}

问题：

box1和box2的间距是多少？
兄弟级的块之间，margin这个属性上下边距，经常会发生重叠的情况，以数值大的为准，而不会相加。所以间距为：20px;
box1和box3的间距是多少？
父子级的块之间，子级的上下margin会与父级上下margin重叠，以数值大的为准，而不会相加。所以间距为：40px;
详细介绍可参考

4. css 盒模型
CSS中Box model是分为两种: W3C标准和 IE标准盒子模型。

大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。

怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。

当不对doctype进行定义时，会触发怪异模式。

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

CSS3的box-sizing
box-sizing语法：

box-sizing ： content-box || border-box || inherit;

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

5. 移动端 css实现页面正方形布局
实现主要应用padding-bottom（或padding-left）属性值等于width（或height）来实现等边长的矩形（即正方形）。

一种实现：设置width相对百分比，padding-bottom取值等于height。

<body>  
    <div class="square"></div>  
</body>

body{  
    margin:0;  
    padding:0;  
    background:#FFFBCD;  
}  
.square{  
    width:30%;  
    padding-bottom:30%;  
    margin-top:10%;  
    margin-left:10%;  
    background:#0000FF;  
}

另一种实现：设置height相对百分比，padding-left取值等于height。

<body>  
    <div class="square"></div>  
</body>

body{  
    margin:0;  
    padding:0;  
    background:#FFFBCD;  
}  
.square{  
    height:30%;  
    padding-left:30%;  
    margin-top:10%;  
    margin-left:10%;  
    background:#0000FF;  
}

6. 多行文本垂直水平居中

display:table的方法

<div class="middle-box">
    <div class="middle-inner">
        <p>前端开发</p>
    </div>
</div>

.middle-box{
    display: table; 
    height: 300px;
}
.middle-inner{
    display: table-cell; 
    vertical-align:middle; 
    text-align:center;
}

兼容问题解决(相对定位和绝对定位组合)

.middle-inner {
    position: absolute; 
    top:50%;
}
.middle-inner p {
    position: relative; 
    top: -50%;
}

ie hack

.middle-box{
    display: table; 
    height: 300px; 
    border:1px solid #ff0000; 
    width:400px; 
    margin:0 auto; 
    position:relative;
}
.middle-inner{
    display: table-cell; 
    vertical-align:middle; 
    *position:absolute; 
    *top:50%; 
    *left:50%; 
    width:100%; 
    text-align:center;
}
.middle-inner p{
    position:relative; 
    *top:-50%; 
    *left:-50%;
}

增加一个空白标签

<div class="middle-box">
    <p><span class="suc-tip">前端开发</span></p>
    <i class="visible"></i>
</div>

.middle-box{
    height:300px; 
    border: 1px solid #f00; 
    width: 400px; 
    margin: 0 auto; 
    text-align: center; 
}
.middle-box p{
    vertical-align: middle; 
    display: inline-block; 
    *display: inline; 
    *zoom: 1;
}
.visible{
    height: 100%; 
    vertical-align: middle; 
    width: 0; 
    display: inline-block;
}

7. css 全称是什么？
英文全称：Cascading Style Sheets
层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

8. css3相关问题，比如应用过哪些css3的方法，如何实现等高布局及使用css3实现加载中（loading）的效果等。
css3教程

面试中常见的css问题

推荐阅读更多精彩内容