织梦58

击败边框:带border的百分比布局

相关案例演示
响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框,那么很容易就可以实现,但如果你给每一列以及总宽度都采用百分比设置,那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题,你会学到如何创建一个流式布局,而不用担心额外的边框以及内边距。 假设我们需要一个五列的布局。我们要考虑的第一件事就是外边距(margins).假设所有的列都需要4%的外边距,我们需要为所有的外边距保留20%(4%*5(5列)=20%)的占宽比;然后我们从总宽比(100%)里面减去20%,得到的就是所有列实际占的总宽比。所以每一列的占宽比即16%(80% /5)。下面是一个详细的图表:

击败边框:带border的百分比布局


相应的CSS代码如下: .column{     width:16%;     margin: 2% 2%;    float: left;    background: #03a8d2;   }  对应的界面是:

击败边框:带border的百分比布局


当我们给每一列添加一个2px的边框时,问题出现了,如下图,最后一列被挤到下面去了。

击败边框:带border的百分比布局


解决方案当然应该是:在之前的计算中我们应该考虑到边框(border),但是我们怎么去做呢?结论是,我们不能用百分比去设置border边框的大小,只能用一个固定的值。因为如果所有的都使用百分比设置,那么我们留给border的空间也会是一个变化的值,也就是说当页面宽度变化时,border的值也会跟着变化,这样是有问题的。这使得我们没有办法去决定我们边框的宽度!   解决方案 设置CSS的box-sizing属性值为“border-box”,这样就会把borders和padding全都包含在定义的宽高里面。这就意味着一个带有2px边框的200px的div仍然宽度是200px!!是不是很神奇呢? .column{      width: 16%;      margin: 2% 2%;      float: left;      background:#03a8d2;      border: 2px solid black;      box-sizing: border-box;      -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;  } 

击败边框:带border的百分比布局


即使我们加上padding,也同样可以正常显示:

击败边框:带border的百分比布局


浏览器兼容性问题: 兼容性和上面的一样,除了IE需要8以上的版本,其他浏览器均可兼容,同时这个方法不会出现上面提到的阴影问题。织梦园( 专注织梦好模板)


有问题可以加入织梦技术QQ群一起交流学习

本站vip会员 请加入织梦58 VIP②群 PS:加入时备注用户名或昵称

普通注册会员或访客 请加入织梦58 技术交流②群

作者:DEDE58.CC时间:2020-05-28
首先声明,只要是我们的vip会员所有源码均可以免费下载,不做任何限制(了解更多)
☉本站的源码不会像其它下载站一样植入大量的广告。为了更好的用户体验以后坚持不打水印
☉本站只提供精品织梦源码,源码在于可用,不在多!!希望在这里找到你合适的。
☉本站提供的整站织梦程序,均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源(包括源码、模板、素材、特效等)仅供学习与参考,请勿用于商业用途。
☉如有其他问题,请加网站客服QQ进行交流。
相关织梦教程
QQ在线咨询
双语模板 营销型模板 手机模板 响应式模板