1.元素大小自适应
等比缩放
需求：我们需要一个元素无论在什么尺寸的设备上都以一定的宽高比展示，或者说等比缩放
<!-- 实现宽高5:1的元素盒子， 利用padding百分比 -->
<style>
.scale {
width: 100%; // 宽度100%同步父元素宽度，是为了随外部元素宽度自适应
padding-bottom: 20%; // 1/5
height: 0; // 设定为0是为了高度让padding-bottom来撑起
position: relative;
.banner {
position: absolute;
width: 100%;
height: 100%;
background-color: 499e56;
}
}
</style>
<div class="scale">
<div class="banner">
元素
</div>
</div>
2.图片自适应
background设置
.img-container{
width:688px;
height:304px;
background: black url(./test.png) no-repeat center center;
background-size: contain;
}
img设置
利用Object-fit
- fill 默认值:填充，替换元素填满真个内容区域，可能会改变长宽比，导致拉伸。
- contain 包含:保持原始的尺寸比例，保证替换元素完整显示，宽高至少有一个和内容区域的宽高一致，会出现空白。
- cover 覆盖:保持原始的尺寸比例，保证内容区域被填满。替换元素可能会被切掉一部分，从而不能完整展示
- none 保持原始尺寸比例。
- scale-down 等比缩小:就好像依次设置了 none 和 contain，最终呈现的是尺寸比较小的那个。
.img {
width: 400px;
height: 400px;
object-fit: contain;
}
3.页面布局（以左中右为例）
1.flex布局
中间设置flex：1
<!-- flex布局 -->
<style>
.container {
margin-top: 140px;
}
.container .left-center-right{
display: flex;
}
.container .center {
flex: 1;
}
</style>
<section class="container">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>这是flex布局</h2>
<p>文字</p>
<p>文字</p>
</div>
<div class="right"></div>
</article>
</section>
2.absolute布局
左中右脱离文档流，中间设置左右间距
<!-- 定位布局 -->
<style>
.layout.absolute .left-center-right > div {
position: absolute;
}
.layout.absolute .left {
left: 0;
}
.layout.absolute .center {
left: 300px;
right: 300px;
}
.layout.absolute .right {
right: 0;
}
</style>
<section class="layout absolute">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>这是absolute布局</h2>
<p>文字</p>
<p>文字</p>
</div>
<div class="right"></div>
</article>
</section>
3.table布局
<!-- table布局 -->
<section class="layout table">
<style>
.layout.table .left-center-right {
display: table;
height: 100px;
}
.layout.table .left-center-right > div{
display: table-cell;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>这是table布局</h2>
<p>这是一段文字</p>
<p>这是一段文字</p>
</div>
<div class="right"></div>
</article>
</section>
4.grid布局
<!-- grid布局 -->
<section class="layout grid">
<style>
.layout.grid .left-center-right {
display: grid;
grid-template-columns: 300px auto 300px;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>这是grid布局</h2>
<p>这是一段文字</p>
<p>这是一段文字</p>
</div>
<div class="right"></div>
</article>
</section>
5.float布局
双飞翼布局
- 中间宽度100%，里嵌套一层content，设置margin值，避免被左右布局覆盖
- 左侧margin-left：-100%,
- 右侧margin-left：负当前宽度
<style>
.wrap{
margin: 0 auto;
width: 80%;
}
#main{
float: left;
width: 100%;
background: green;
}
#left{
float: left;
width: 200px;
background: yellow;
height: 800px;
margin-left: -100%;
}
#right{
float: left;
width: 200px;
background: yellow;
height: 800px;
margin-left: -200px;
}
.content{
height: 800px;
margin: 0 200px;
}
</style>
<div class="wrap">
<section id="main">
<div class="content">#main</div>
</section>
<aside id="left">#left</aside>
<aside id="right">#right</aside>
</div>
圣杯布局：
- 中间宽度100%，设置左右padding；
- 左侧margin-left：-100%, left:负当前宽度；
- 右侧margin-left：负当前宽度，right：负当前宽度
<style>
.box {
border: 1px solid red;
overflow: hidden;
padding: 0 200px;
}
.main {
width: 100%;
height: 200px;
float: left;
padding: 0 200px;
background-color: springgreen;
}
.left {
background-color: tomato;
position: relative;
float: left;
margin-left: -100%;
left: -200px;
width: 200px;
height: 200px;
}
.right {
background-color: pink;
position: relative;
float: left;
margin-left: -200px;
right: -200px;
width: 200px;
height: 200px;
}
</style>
<div class="box">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
