html
@import和link区别
1、link是html标签;@import是css语法
2、link在页面加载的同时加载;@import在页面加载之后加载
3、link无兼容性问题;@import不兼容ie5以下
4、link可以通过js动态引入;@import不行
css
圣杯布局和双飞翼布局是啥;有何区别;如何实现;
理解:两边固定,中间对浏览器变化而变化的三栏布局
区别:圣杯布局是父元素padding给左右让出位置;双飞翼布局是中间元素margin给左右让出位置
实现:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
.box {
width: 100%;
height: 100vh;
display: flex;
}
.left,
.right {
flex-basis: 100px;
background-color: blue;
}
.middle {
flex-grow: 1;
flex-shrink: 1;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>