web前端开发中,会用到css实现各种网页布局,以下是我列出的几种常见实例,如果本文有错误的地方,也请指正。 PDF格式: http://demos.pxuexiao.com/flask_doc/css_demo01.html Author: lshxiao
最常见的布局就是左右布局,这里只简单说一下,2列左右布局的情况
1、表格
<!--
表格实现左右布局最简单, 两个td搞定, 这里我就不写详细CSS了。
好处:不用考虑左右内容的高度,两个td的高度始终相同,也不用清除浮动
坏处:但总是感觉这种实现方式比较low,不够优雅。
-->
<table>
<tr>
<td>left</td>
<td>right</td>
</tr>
</table>
2、左右float
<!--
左右浮动实现方式,也是前端开发最常用的一种实现方式。
好处:代码相对优雅,并且符合div+css布局网站的风格
坏处:要设置元素的宽度,控制不好,有可能换行展示,并且要对父元素清除浮动
-->
<style>
.clearfix{ overflow: hidden; zoom:1; }
.left{ float: left; width: 30%; min-height: 200px; background: #f00; overflow: hidden;}
.right{ float: left; width: 70%; background: #0f0; overflow: hidden;}
</style>
<div class="clearfix">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
3、position方式一
<!--
左右都用position: absolute;实现。
这种实现有个很大的缺点:父元素无法被撑开, 这种实现方式被大部分使用场景抛弃
-->
<style>
.panel{ position: relative;}
.p-left{ position: absolute; width: 30%; background: #f00;}
.p-right{ position: absolute; width: 70%; background: #0f0; left: 30%;}
</style>
<div class="panel">
<div class="p-left">
left
</div>
<div class="p-right">
right
</div>
</div>
4、position方式二
<!--
对上面的方法稍加改动,左侧浮动+定位,右侧设置margin-left来实现。
这种实现方式是很多博客中左侧固定菜单,右侧内容弹性布局最常用的实现方式
-->
<style>
.panel {
overflow: hidden;
}
.p-left {
position: relative;
float: left;
width: 30%;
background: #f00;
}
.p-right {
margin-left: 30%;
background: #0f0;
}
</style>
<div class="panel">
<div class="p-left">
left
</div>
<div class="p-right">
right<br>
more<br>
content
</div>
</div>
<div>
other element
</div>
水平垂直居中的场景:弹出dialog需要居中显示。 一般情况都是用JS来计算位置,这里我介绍一下CSS来实现水平垂直居中的实现
1、盒子宽高固定
<!--
前提:元素宽高固定
实现原理:先让元素的凭意一点与浏览器窗口正中央位置重合,这里选择左上角,然后再让元素向左偏移宽度的一半,向上偏移高度的一半。
-->
<style>
.panel {
position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
background: #0aa;
}
</style>
<div class="panel">
</div>
2、盒子宽高不固定
<!--
如果你是在移动端开发,或者不考虑IE低版本浏览器兼容问题,你可以用transform: translate(-50%, -50%);来实现。
这种实现方式,不要求宽高固定
-->
<style>
.panel {
position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 200px;
/*margin-left: -150px;*/
/*margin-top: -100px;*/
-webkit-transform: translate(-50%, -50%);
background: #0aa;
}
</style>
<div class="panel">
</div>
相信不少同学在移动端网页开发中,都插入过图片吧,试问一下,你的图片比例是否可以跟随屏幕尺寸的变化而不变? 你肯定会说,我只设置宽度为100%,高度不就自动按比例缩放了嘛?如果是非图片元素,又如何实现等比放大缩小? 那还不简单嘛?宽高都设置成百分比呗,比如宽度100%,高度100%
1、了解width,height,padding百分比设置
<!--
试验一:宽高都设置为50%,好像并没有效果
-->
<style>
.panel {
width: 50%;
height: 50%;
background: #0aa;
}
</style>
<div class="panel">
</div>
<!--
试验二:在上面代码基础上, 把html,body的height设置为100%, 也没有实现我想要的效果
-->
<style>
html, body{
height: 100%;
}
</style>
<!--
到现在你应该思考一个问题,width, height的百分比,是以谁为标准设置的?
它们都是以父元素的宽高为标准,然后取对应的百分比值。
我们要想实现等比缩放,只能有一个标准,比如都是宽度为标准的话,是不是就好办了?看下面的margin, padding的设置
效果:屏幕宽度发生变化时,margin-left, padding-top的大小也在随之改变,这样我们就已经实现了元素的等比缩放了
原理:margin,padding的百分比设置时,是以父元素的width为标准
-->
<style>
html, body{
height: 100%;
}
.panel {
width: 50%;
/*height: 50%;*/
margin-left: 10%;
padding-top: 20%;
background: #0aa;
}
</style>
<div class="panel">
</div>
2、微信朋友圈图片9宫格实现
<!--
有了上面的等比缩放效果,就可以写出朋友圈图片的9宫格效果,这里不写代码了。
直接给个链接地址吧:http://demos.pxuexiao.com/scale/wx.html-->