一:宽高自适应
1:width:auto;或者不写,才是宽度自适应;
导航栏,通栏布局通常设置宽度自适应
2:height:auto;高度自适应,根据内容多少调节高度
3:min-height:设置最小高度,这个一般用的比较多。
max-height;min-width;max-width;
4:浮动元素的高度自适应
.box::after{
content: ""; /* 空的行内元素 */
clear: both; /* 清浮动 */
sidplay: block; /* 行内元素-->块元素 */
height: 0;
width: 0;
visibility: hidden; /* 内容隐藏,可以隐藏content中的内容 */
}
5:窗口自适应
盒子可以根据窗口的大小进行改变。
以下为例,设置box为默认的100%宽高。
<style>
.box{
width: 100%;
height: 100%;
}
html,body{
height:100%
}
</style>
二:屏幕分多栏布局(使用窗口自适应)
1:两栏布局(左栏宽度固定,右栏宽度自适应)
方案一:box1设置浮动,box2设置margin-left,将box1浮动占的weight空出来
方案二:box2使用calc函数计算weight,box1设置左浮动,box2设置右浮动
<style>
*{
margin: 0;
padding: 0;
}
.box1{
height: 100%;
weight: 200px;
background: red;
/* float: left; */
}
.box2{
height: 100%;
background: yellow;
/* margin-left: 200px; */
/* width: calc(100% - 200px); */
/* float: right; */
}
html,body{
height: 100%;
}
/* 方案一:box1设置浮动,box2设置margin-left,将box1浮动占的weight空出来 */
/* 方案二:box2使用calc函数计算weight,box1设置左浮动,box2设置右浮动*/
</style>
扩展知识点:
2:三栏布局1(左、右两栏宽度固定,中间栏自适应)
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
/**********************************/
.left,.right{
height: 100%;
weight: 200px;
}
.left{
background: yellow;
/* float: left; */
}
.right{
background: red;
/* float: right; */
}
.center{
height: 100%;
background: yellow;
/* margin-left: 200px; */
/* margin-right: 200px; */
/* width: calc(100% - 400px); */
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
方案一:left,right设置浮动,center设置margin-left & margin-right,将left,right浮动占的weight空出来
注:此方案需要注意body中right和center的顺序,center未设置浮动,为块元素,如果center在right前,则right无法和center在同行显示。
方案二:center使用calc函数计算weight,left,center设置左浮动,right设置右浮动
3:三栏布局2(上、下栏高度固定,中间栏高度自适应)
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
/**********************************/
.top,.bottom{
height: 50px;
weight: 100%;
background: #ccc;
}
.middle{
width: 100%;
background: yellow;
height: calc(100% - 100px);
/* margin-left: 200px; */
/* margin-right: 200px; */
}
.left,.right{
width: 100px;
height: 100px;
background: red;
float: left;
}
.center{
width: calc(100% - 200px);
height: 100&;/* 此处为父盒子高度的100% */
background: blue;
float: left;
}
</style>
<body>
<div class="top"></div>
<div class="bottom">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="middle"></div>
</body>
扩展:
1:display:none;不占位的隐藏
2:visibility:hidden;占位隐藏
3:
4: