css布局的几种方式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css布局的几种方式相关的知识，希望对你有一定的参考价值。
参考技术A 左右定宽度，分布向两边浮动，中间如果没设置溢出处理默认宽度是100%，设置后就会截取两边的宽度从而实现中间自适应左右两边定好宽度后，主要用flex:1来占满剩余空间从而实现中间自适应
使用table不仅可以在实现页面自适应的部分，还可以用table-cell来实现对行锤值对齐
4.float+margin实现三列布局
把左右两边的宽度固定然后左右浮动，中间自适应部分用margin：0 和 左右两边的宽度
给左右两边设置相对定位，并分别设置距离页面距离为0，中间自适应部分通过margin：0 左右宽度 来自适应
主要是使用grid-template-columns这一属性时中间的盒子自适应，这一属性定位列属性，比如要定义三列就写3个数值，每个数值代表每一个项目的宽度，auto是自适应占满剩余空间
三栏布局的几种方式
1.流体布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*左右浮动，中间margin或者overflow*/
/*缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。*/
.left {
float: left;
height: 200px;
width: 100px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.main {
margin-left: 100px;
margin-right: 200px;
/*或者overflow: hidden;或者auto*/
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
2.圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*要点：父元素设置margin左右，main宽度100%，然后left和right都设置margin-left左移到同一排*/
.container {
margin-left: 100px;
margin-right: 200px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: red;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;/*左移100%,使left和main在同一行*/
position: relative;
left: -100px;/*左移100px，与container的margin-left相对应。使元素响应地靠左排列*/
background-color: blue;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;/*左移自身宽度，使right和main在同一行*/
position: relative;
right: -200px;/*右移200px，与container的margin-right相对应。使元素响应地靠右排列*/
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div><!--先写主体内容，优先渲染-->
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
3.双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*要点：全部都浮动，然后margin-left位移到同一排*/
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 100px;
margin-right: 200px;
background-color: green;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="content">
<div class="main"></div><!--先写主体内容，优先渲染-->
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
4.flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*缺点：新技术要考虑浏览器兼容*/
.container {
display: flex;
}
.main {
flex: 1;
height: 300px;
background-color: red;
}
.left {
order: -1;/*排最左*/
flex-basis: 200px;/*分配空间*/
height: 300px;
background-color: blue;
}
.right {
flex-basis: 100px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
5.绝对定位布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
position: relative;
}
.main {
height: 300px;
margin: 0 100px;
background-color: green;
}
.left {
position: absolute;
width: 100px;
height: 300px;
left: 0;
top: 0;
background-color: red;
}
.right {
position: absolute;
width: 100px;
height: 300px;
background-color: blue;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
6.table布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*缺点：无法设置栏间距，也无法优先加载内容*/
.container {
display: table;
width: 100%;
}
.left,
.main,
.right {
display: table-cell;
}
.left {
width: 200px;
height: 300px;
background-color: red;
}
.main {
background-color: blue;
}
.right {
width: 100px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>
以上是关于css布局的几种方式的主要内容，如果未能解决你的问题，请参考以下文章