【HTML+CSS】教你切图篇4-iframe布局、多列布局实现

iframe框架布局；

项目中经常会使用到iframe，iframe虽然比较多毛病，也比较老了，但是有些项目还是需要，一般项目情况如下图：



一般需求：让iframe区域填充满内容div区域，并且窗口大小改变时自适应。

以往的解决方法是通过js判断window的宽高，然后使用窗口宽高减去左侧和头部的尺寸得到iframe的高度，并且添加窗口resize事件函数，当窗口尺寸改变时，重新执行宽高计算方法。这种方式缺点是js运行开销大，每次窗口改变大小都需要重新执行js,对浏览器极不友好。

改进方法：通过css进行布局，重点强调一个原则：能用css进行布局绝不用js控制。

实现方式图解如下：通过利用css的border-box属性，在iframe区域外面套一个iframe-content类名div，box-sizing从IE8开始兼容，IE7的同学，还是乖乖写js吧。



具体css如下：

.frame-content{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

padding-top: 80px;//头部高度

padding-left:200px;//左侧菜单宽度

box-sizing:border-box;

}

.frame-content iframe{
display: block;
width: 100%;
height: 100%;

}

.header{

position:absolute;

left:0;

top:0;

width:100%;

height:80px;

z-index:2;

}

.left-menu{

position:absolute;

left:0;

top:0;

padding-top:80px;

width:200px;

height:100%;

overflow-y:auto;

z-index:1;

box-sizing:border-box;

}

多列布局；

多列布局参考bootstrap栅格结构，审查元素就可以知道实现方法。

以12列为例，实现原理是将总体宽度分成12等分，通过div占比设定宽度，块与块之间间距用padding模拟，这样的话在屏幕分辨率改变时，媒体查询分辨率，设置相应的块占比大小，可以达到自适应的效果。

下面简单介绍一种实现：



body{

background-color:#f5f5f5;

padding:20px 10px 10px 10px;

}

.col-1{width: 8.33%;}

.col-2{width: 16.66%;}

.col-3{width: 25%;}

.col-4{width: 33.33%;}

.col-5{width: 41.66%;}

.col-6{width: 50%;}

.col-7{width: 58.33%;}

.col-8{width: 66.66%;}

.col-9{width: 75%;}

.col-10{width: 83.33%;}

.col-11{width: 91.66%;}

.col-12{width: 100%;}

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
float: left;
box-sizing:border-box;
padding-right: 10px;//左右加起来20px间距
padding-left: 10px;
margin-bottom: 20px;//下间距为20px

}

鼠标移入显示多色图片；

最近在网上看到灰色赞助商图标，鼠标移入变成彩色的效果。



审查元素，看到实现方式也比较简单，分享css如下：

img {
transition: all 0.3s ease;
filter: grayscale(100%);//关键属性，将图片变成灰度图
opacity: 0.66;

}

img:hover {
filter: none;

opacity: 1;

}

有木有很神奇。

Author：事始

Sign：只要你还在尝试，就不算失败。