css之经典布局
2020-03-28 本文已影响0人
Angrybird233
- 1.左边固定，右边自适应
- 2.左右固定，中间自适应
- 三角形
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css常用布局</title>
<style>
div{
text-align: center;
height: 200px;
}
.content-box1{
height: 200px;
width: 100%;
}
/*两列布局*/
.content-box1 .left{
float: left;
width: 200px;
height: 200px;
}
.content-box1 .right{
width: auto;
margin-left: 200px;
height: 200px;
}
.left{
background-color: red;
}
.right{
background-color: blue;;
}
.middle{
background-color: yellow
}
/*三列布局*/
.content-box2{
display: flex;
}
.content-box2 .left{
flex: 0 0 200px;
}
.content-box2 .middle{
flex: auto;
}
.content-box2 .right{
flex: 0 0 200px;
}
.box1,.box2,.box3,.box4{
height: 0;
width: 0;
float: left;
border-style: solid;
margin: 10px;
}
.box1{
border-width: 100px;
border-color: tomato transparent transparent transparent;
}
.box2{
border-width: 100px 173px;
border-color: transparent tomato transparent transparent;
}
.box3{
border-width: 100px 80px;
border-color: transparent transparent tomato transparent;
}
.box2{
border-width: 100px 90px 80px 70px;
border-color: transparent transparent transparent tomato;
}
</style>
</head>
<body>
<h2>1.左右布局，左边固定宽度，右边自适应</h2>
<h3>a.左边左浮动，右边设置ml(左边的宽度)且宽度auto</h3>
<h3>b.大盒子相对定位，左边决定定位，右边ml(左边的宽度)</h3>
<div class="content-box1">
<div class="left">左</div>
<div class="right">右</div>
</div>
<h2>2. 垂直三列布局，左右两边宽度固定，中间自适应</h2>
<h3>a.大盒子相对定位，左右各自绝对定位靠左和靠右，中间设置margin(0,左宽度,0,右宽度)</h3>
<h3>b.大盒子display:flex;左边flex:0 0 200px;右边flex:0 0 200;中间：flex: auto;</h3>
<div class="content-box2">
<div class="left">左</div>
<div class="middle">中</div>
<div class="right">右</div>
</div>
<h2>3. 三角形</h2>
<h3>a.border</h3>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
