一、背景图全屏
bg{
position: fixed;
top: 0;
left: 0;
100%;
height: 100%;
background: url(bg.jpg) no-repeat #000;
background-size: cover;
z-index: -1;
}
二、水平居中
- margin
margin:0 auto
- absolute+margin
position:absolute;
left:50%;
720px;
margin-left:-360px; //自身宽度一半
- absolute+translate
position:absolute;
left:50%;
720px;
transform：translateX(-50%);
三、给高度自适应的div设置背景图
不给height，设置padding
position: relative;
100%;
height: 0;
padding-top: 70%;
background-size: cover;
background-image: url();
四、利用视口单位做自适应：
:root {
font-size: calc(0.5em + 1vw);
}
五、响应式网格布局
在容器上设置：
.grid-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 20px;
}
六、利用text-align: justify与text-align-last: justify实现行内均匀分布
<body>
<style>
.container {
400px;
margin: 50px auto 0;
background: #ddd;
}
.justify {
position: relative;
100%;
height: 24px;
text-align: justify;
text-align-last: justify;
margin-bottom: 20px;
}
i {
24px;
line-height: 24px;
display: inline-block;
text-indent: 9px;
background: #333;
color: white;
border-radius: 50%;
overflow: hidden;
font-style: normal;
}
</style>
<div class="container">
<div class="justify">
<i>1</i>
<i>2</i>
<i>3</i>
<i>4</i>
<i>5</i>
</div>
</div>
</body>
七、图层反转：
transform: scale(-1,1) //水平反转
transform: scale(1,-1) //垂直反转