CSS中页面布局

这篇文章主要介绍CSS中页面布局，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

专注于为中小企业提供成都网站制作、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业南岔免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了数千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

一、左右两列布局

1、代码如下





两列布局


*{
padding: 0;
margin: 0;
}
body{
min-width: 600px;
}
.lef{
width: 100px;
height: 400px;
background: hotpink;
float: left;
}
.rig{
height: 400px;
background: yellowgreen;
margin-left: 50px;
/*给right开启BFC
利用BFC的特性：
bfc的区域不会与浮动的box重叠*/

/* 溢出内容部分被切割,所以使用省略号表示 */
overflow: hidden;
/*出现省略号需要四个设置：
* display: block;
* overflow: hidden;
* white-space: nowrap;
* text-overflow: ellipsis
* */
/* white-space: nowrap; */
/* text-overflow: ellipsis; */
}
.con{
width: 300px;
margin: 0 auto;
}




left

lzprightrightrightrightrightrightrightrightrightrightrightrightrightright rightrightrightrightrightrightrightrightrightrightrightrightrightright rightrightrightrightrightrightrightrightrightrightrightrightrightright rightrightrightrightrightrightrightrightrightrightrightrightrightright

外层容器con如果为固定宽度，right元素的overflow: hidden;是必须的，否则会出现rig中的字体不在rig里面。

外层容器con宽度如果是100%，或者默认，此时right元素的overflow: hidden;可有可无，页面不会因此受到影响。

粘连布局 *{ padding: 0; margin: 0; } html, body{ height: 100%; } .wrap{ /* 设置wrap的最小高度,当main元素中的内容较少或者为空时，也能保持100%高度 */ min-height: 100%; background: yellowgreen; text-align: center; } .main{ /*main的height值由内容决定*/ /*当内容不足一屏时，下面的设置不会撑开父元素wrap，此时wrap的min-height设置生效， * 当内容刚好一屏时，下面的设置开始撑开父容器，其height值为100%+50px。 * 拉开这50px的原因是防止footer遮盖住main内容，这个值不是固定死的，由footer的高度值决定 * 为footer向上填充margin-top: -50px;做准备 * */ padding-bottom: 50px; } .footer{ height: 50px; line-height: 50px; background: deeppink; text-align: center; margin-top: -50px; } mainmainmainmain mainmainmainmain mainmainmainmain mainmainmainmain mainmainmainmain mainmainmainmain mainmainmainmain mainmainmainmain mainmainmainmain mainmainmainmain mainmainmainmain mlzpain footer

双飞翼三列布局 /*清除浏览器默认样式*/ *{ padding: 0; margin: 0; } /*设置body的最小宽度*/ body{ min-width: 600px; } /*左浮动*/ .fl{ float: left; } /*双飞翼三列布局*/ .mid{ width: 100%; } .lef{ width: 200px; background: mediumpurple; margin-left: -100%; } .rig{ width: 200px; background: orangered; margin-left: -200px; } .inn_mid{ margin: 0 200px; background: pink; } /*等高布局*/ /* 先使子元素溢出父盒子范围，然后在父盒子中设置overflow:hidden; 清除溢出部分，从而由原来的不等高达到等高效果 */ .mid, .lef, .rig{ padding-bottom: 10000px; margin-bottom: -10000px; } .con{ border: 5px solid deepskyblue; overflow: hidden; }

middle

left right

以上是“CSS中页面布局”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

重庆分公司，新征程启航

CSS中页面布局

middle

middle

middle

其他资讯