两栏、三栏布局以及垂直居中的实现方式
程序员文章站
2022-04-26 17:37:24
...
两栏、三栏布局以及垂直居中的实现方式
**1.1两栏布局：**
1、float+margin
.block_left{
float: left;
width: 200px; //左边定宽
background-color: blue;
}
.block_right{ //右边自适应
background-color: red;
margin-left:200px;
}
2、定位
.content{
position: relative;
width: 100%;
}
.block_left{
position: absolute;
width: 200px;
background-color: blue;
}
.block_right{
position: absolute;
left: 200px;
right: 0;
background-color: red;
}
3、弹性布局
*{
margin: 0;
padding: 0;
/*这是设置默认的内外边距。因为浏览器标签自带的属性是不统一的，设置为0。为了兼容所有的浏览器！*/
}
.flex-container{
width: 100%;
height: 300px;
display: flex;
}
.block_left{
background-color: blue;
width: 20%; //这个可以对其进行控制，左右占比
flex:1 0 auto; //设置其可扩展，不可压缩，且大小自适应
}
.block_right{
background-color: red;
width: 80%;
flex:1 0 auto;
}
1.2三栏布局：
1、float:left和float:right
优点：简单 缺点：中间部分最后加载，用户体验感不好
<style>.left{
background-color: red;
float: left;
width: 100px;
}
.right{
background-color: red;
width: 100px;
float: right; }
.content{
background-color: green;
margin-right: 100px;
margin-left: 95px;
}
</style>
<body>
<!-- 必须要把类为content的div元素放在浮动元素之后，因为浮动元素不可以高于任何在源文档（html代码）之前的块元素或浮动元素,所以如果按照左中右的顺序摆放的话会出现以下情况-->
<div id="container"></div>
<div class="left">1</div>
<div class="right">3</div>
<div class="content">2</div>
</body>
2、BFC：即：在第一种方法的基础上，给content部分加上overflow:hidden来使其形成BFC，利用BFC不会与浮动元素重叠的规则
3、圣杯布局
<style>
*{
padding: 0;
margin: 0;
}
#container{
/* 让左右两栏占据container左右两边的填充 */
padding-left:100px;
padding-right: 100px;
background-color: blue;
}
.left{
background-color: red;
float: left;
position:relative;
width: 100px;
height: 100px;
/* 这个100%是content部分相当于container的，就是指左列要越过中间列的宽度，跑到它前面去 */
/* 浮动元素的margin值是相当于上一个相邻的浮动元素来计算的 */
margin-left:-100%;
left:-100px;
}
.right{
background-color: red;
width: 100px;
height: 100px;
float: left;
position:relative;
/* 此处的margin-left是相对于其相邻元素left的 */
margin-left: -100px;
right: -100px;
}
.content{
float: left;
background-color:yellow;
width:100%;
height: 100px;
}
</style>
</head>
<body>
<!-- content部分先渲染 -->
<div id="container">
<div class="content">2aaasadsfdff</div>
<div class="left">1</div>
<div class="right">3</div>
</div>
4、弹性布局
#container{
display:flex;
}
.left{
background-color: red;
width: 100px;
height: 100px;
flex:0 1 auto;
order:-1; //渲染是首先渲染content部分，但是布局是要将left模块放到左边，order默认为0，所以设置其为-1，就可以位置领先于其它元素
}.right{
background-color: red;
width: 100px;
height: 100px;
flex:0 1 auto;
}
.content{
background-color:yellow;
flex:1 0 auto;
height: 100px;
}
</style>
<body>
<!-- content部分先渲染 -->
<div id="container">
<div class="content">2aaasadsfdff</div>
<div class="left">1</div>
<div class="right">3</div>
</div>
6、绝对定位：很简单，通过对三块区域设置绝对定位，然后通过left/right值来进行定位，就可以实现三栏布局
.left{
background-color: red;
width: 100px;
height: 100px;
position:absolute;
left:0;}
.right{
background-color: red;
width: 100px;
height: 100px;
position: absolute;
right: 0;
}
.content{
background-color:yellow;
position: absolute;
height: 100px;
left:100px;
right: 100px;
}
1.3水平垂直居中：
1.3.1文字水平垂直居中
1、单行文字：
text-align:center; /*水平居中*/
line-height: 20px; /*行距设为与div高度一致*/
将行距设为和div一致，即使得每段文字都具有和div一样的高度，即：让文字利用整个div空间，有点像margin:auto
2、多行文字
text-align:center;
display:table-cell;vertical-align:middle;
还可以用弹性布局 ： display:flex;justify-content:center;align-item:center
1.3.2块状水平垂直居中：
方法1：对块元素绝对定位，然后将其位置通过margin-left和margin-top负值各拉回自身的一半
div {
background-color:yellow;
height:200px;
width:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
方法2：利用margin:auto
div {
background-color:yellow;
height:200px;
width:200px;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto
}
方法3：通过弹性盒（一定要保证父级元素有高度）
html,body {
display:flex;
jutify-content:center;
align-items:center;
background-color:blue;
}
div {
background-color:yellow;
height:200px;
width:200px;
text-align:center;
line-height:200px;
}
上一篇： Flutter 对齐方式之 Align
下一篇： 个人站长必须以另外一种姿态去生存