欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端页面的布局方式

程序员文章站 2022-04-30 11:09:28
...

布局方式

今天来细聊下页面的布局方式,主要分为两大类宽度自适应布局和高度自适应布局,在实际应用中不同方式的布局都具有不同的效果。

宽度自适应

两栏布局,左侧固定,右侧自适应。以下列举了5种方法:

  1. margin-left,左侧固定宽度,并设置浮动float,右侧设定margin-left值为左侧宽度的大小。

    .boxLeft{
    	background: red;
    	height:600px;
    	width: 200px;
    	float: left;
    }
    .boxRight{
    	background: blue;
    	height:600px;
        margin-left: 200px;
    }
    

2.css3属性calc() ,左侧设置固定宽并且左浮动,右侧宽度为calc(100% - 宽度px);
注意:100%和符号后面都有一个空格

.boxLeft{
	background: red;
	width: 200px;
	height:600px;
	float: left;
}
.boxRight{
	background: blue;
	height:600px;
	float:left或者right;
   calc:(100% - 200px);
}

3.fiex,父级元素设置display:flex,左侧设置固定宽,右侧flex:1;

.box{
	display: flex;
}
.boxLeft{
	background: red;
	height:200px;
	width: 200px;
}
.boxRight{
	background: darkcyan;
	height:200px;
	flex: 1;

4.overflow:hidden,左侧固定宽度,右侧overflow:hidden

.boxLeft{
		background: red;
		width: 200px;
        height: 200px;
		float: left;
	}   
	.boxRight{
		background: blue;
        height: 600px;
        overflow: hidden;
	}

5.position:absolute,左侧固定宽度并设定位position:absolute,右侧margin-left

 .boxLeft{
    	background: red;
		width: 200px;
        height: 200px;
        position: absolute;
}   
.boxRight{
	   background: blue;
       height: 600px;
       margin-left: 200px;
}

转载:https://blog.csdn.net/animatecat/article/details/82691399

相关标签: css布局