大图居中:
先看一下普通的居中:
代码为:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .img{ display: block; margin: auto; } </style> </head> <body> <div class="center"> <img class="img" src="1.jpg" width="684" height="384"> </div> </body> </html>
浏览器100%的时候显示为:
浏览器缩小时:
如图,当浏览器大小小于图片大小的时候,图片会贴靠在左边而不再移动。
我的理解是,当图片设置为居中,浏览器界面小于图片大小的时候,浏览器会挤住图片。因为图片小于浏览器的部分,浏览器不愿意收留图片多余的部分,哎图片这可怜的孩儿。当然这种情况我是看不下去的,所以,我强制让浏览器“收留”它。
代码修改为:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .center { position: relative; left: 50%; } .img { display: block; /*margin:0 auto;*/ position: relative; left: -342px; } /*主要的思路就是,图片的中心点为中心,而不是已图片的左上角为中心*/ </style> </head> <body> <div class="center"> <img class="img" src="1.jpg" width="684" height="384"> </div> </body> </html>
效果图为:
如图,浏览器缩小的时候,图片依然居中。(浏览器,你敢不收留它,废了你\)。
当然拿这个思路也就引出了淘宝著名的“双飞翼布局”。
简要说明一下双飞翼布局,它是当浏览器缩小的时候,中间栏随浏览器变化而变化。而侧栏不随浏览器变化而变化。
先看下效果图:
开始时候:
浏览器缩小的时候:
这种布局和上面的居中方式使用的方法基本差不多。一个字,悟。当然css3中有个方法可以简单实现这种
当然css3中有个方法可以简单实现这种。display:flex。称为“弹性盒子”这种只能ie9+
先看代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹性盒子模型</title> <style> body{ margin: 0; } #container{ display: flex; flex-direction: row; width: 300px; height: 300px; } .a{ flex: 1; /*width: 100px;*/ height: 100%; background-color: #0099FF; } .b{ flex: 1; /*width: 100px;*/ height: 100%; background-color: darkorange; } .c{ flex: 1; /*width: 100px;*/ height: 100%; background-color: palevioletred; } </style> </head> <body> <div id="container"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> <script src="main.js"></script> </body> </html>
那代码来说,先给父类一个display:flex。然后给子类设置flex:n。
这种方法的实现思想是,如代码,子类有三个,都设置为,flex:1,意思是每个子类占父类三分之一。
用这种方法可以轻松实现双飞翼布局,如代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹性盒子模型</title> <style> body{ margin: 0; } #container{ display: flex; flex-direction: row; width: 300px; height: 300px; } .a{ /*flex: 1;*/ width: 100px; height: 100%; background-color: #0099FF; } .b{ flex: 1; /*width: 100px;*/ height: 100%; background-color: darkorange; } .c{ /*flex: 1;*/ width: 100px; height: 100%; background-color: palevioletred; } </style> </head> <body> <div id="container"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> <script src="main.js"></script> </body> </html>
a,c设置固定宽度,b设置flex:1即可。
时间: 2024-11-03 05:42:05