大厂前端面试题（含题解）|一起学习

目录

如何用CSS实现一行水平居中，多行居左？

如何实现左右等高布局？

辨析使用link与@import导入CSS？

---

如何用CSS实现一行水平居中，多行居左？

<div><span>我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文
字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。</span></div>
<div><span>我是一行文字</span></div>
<style>
div{text-align: center;}
div span{display: inline-block;text-align: left;}
</style>

如何实现左右等高布局？

table 布局兼容性最好，当然 flex 布局的 align-items: stretch; 也行

<div class="layout">
<div class="layout left">left</div>
<div class="layout right">center</div>
</div>
<style>
.layout{
display: table;
width: 100%;
}
.layout div{
display: table-cell;
}
.layout .left{
width: 50%;
height: 200px;
background: red;
}
.layout .right{
width: 50%;
background: yellow;
}
</style>

辨析使用link与@import导入CSS？

1. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加 载CSS

2. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载

3. link无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持

4. link支持使用Javascript控制DOM去改变样式；而@import不支持

注：如有任何不妥之处，请评论或私信告知，谢谢！