CSS面试题

353 阅读1分钟

39、介绍下 BFC 及其应用

juejin.cn/post/692649…

52、怎么让一个 div 水平垂直居中

1)定位+移动距离(定宽)
(2)定位+transform(不定宽)
(3)定位的特殊写法(top:0;bottom:0;left:0;right:0;margin:auto;)(定宽)
(3flex(不定宽)
(4flex+margin(不定宽)
(5table-cell+inline-block(不定宽)	
               .container {
			display: table-cell;
			width: 300px;
			height: 300px;
			border: 5px solid #ccc;
			text-align: center;
			vertical-align: middle;
		}

		.main {
			display: inline-block;
			width: 100px;
			height: 100px;
			background: red;
		}

57、分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

juejin.cn/post/692655…

1)dom结构
(2)事件监听
(3)性能
(4)继承
(5transition

60、已知如下代码,如何修改才能让图片宽度为 300px ?注意下面代码不可修改 juejin.cn/post/692655…

68、如何解决移动端 Retina 屏 1px 像素问题?

juejin.cn/post/692865…

127、如何用 css 或 js 实现多行文本溢出省略效果,考虑兼容性

<style>
    .box {
        width: 100px;
        height: 60px;
        background: chocolate;
        /* 单行溢出 */
        /* overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; */

        /* 多行溢出 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; 
        text-overflow: ellipsis;
        overflow: hidden;
    }
</style>

<body>
    <div class="box">
        发放和粉红色快递发货快递师傅和卡上的饭卡上的积分卡上发快递师傅和卡都是附加费
    </div>
</body>

</html>

总结:

(1)单行文本

  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;

(2)多行文本

  display: -webkit-box
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;