前端页面的布局方式
程序员文章站
2022-04-30 11:09:28
...
布局方式
今天来细聊下页面的布局方式,主要分为两大类宽度自适应布局和高度自适应布局,在实际应用中不同方式的布局都具有不同的效果。
宽度自适应
两栏布局,左侧固定,右侧自适应。以下列举了5种方法:
-
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
上一篇: 键盘和鼠标事件测试
下一篇: SSH整合所需Jar包详解
推荐阅读
-
前端布局系列---居中布局的多种实现方式
-
前端常用的两种布局方式:圣杯布局和双飞翼布局
-
前端框架iviewui使用示例之菜单+多Tab页布局
-
前端实战Demo:一张图片搞定一页布局_html/css_WEB-ITnose
-
前端实战Demo:一张图片搞定一页布局_html/css_WEB-ITnose
-
Android studio的UI界面布局学习(一)——登陆页面的布局制作
-
前端页面的布局方式
-
对于前端开发中的几种布局方式的理解
-
网站前端开发常用的布局方式有哪些_html/css_WEB-ITnose
-
【前端攻略】最全面的水平垂直居中方案与flexbox布局_html/css_WEB-ITnose