响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框,那么很容易就可以实现,但如果你给每一列以及总宽度都采用百分比设置,那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题,你会学到如何创建一个流式布局,而不用担心额外的边框以及内边距。

假设我们需要一个五列的布局。我们要考虑的第一件事就是外边距(margins).假设所有的列都需要4%的外边距,我们需要为所有的外边距保留20%(4%*5(5列)=20%)的占宽比;然后我们从总宽比(100%)里面减去20%,得到的就是所有列实际占的总宽比。所以每一列的占宽比即16%(80% /5)。下面是一个详细的图表:
 
相应的CSS代码如下:

.column{ 
   width:16%; 
   margin: 2% 2%;
   float: left;
   background: #03a8d2;  
对应的界面是:

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

解决方案当然应该是:在之前的计算中我们应该考虑到边框(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; 

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

浏览器兼容性问题:
兼容性和上面的一样,除了IE需要8以上的版本,其他浏览器均可兼容,同时这个方法不会出现上面提到的阴影问题。
最后发现不行,需要加上样式float:left;

H5 边框:带border的百分比布局的更多相关文章

  1. 前端笔记之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

    一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...

  2. H5自带进度条&滑块

    一.H5自带进度条 <div id="d1"> <p id="pgv">进度:0%</p> <progress id= ...

  3. 用H5自带拖拽做出购物车效果的作业题

    效果描述: 图片代表物品,图片在有宽高的div上方显示,把图片拖放到设置好的div里面,并且在div里面显示图片的信息:价格,物品名,数量.如果拖放有重复,只是在div里面让物品的数量加1,最后计算出 ...

  4. 百分比布局实现响应式布局在 IE6 中填坑思路

    最近接了个政府项目,政府项目要求响应式,并且兼容IE6,不想用媒体监测的方法,于是用了百分比布局的方法,但是IE6真是名不虚传,做第一个界面就遇到了个bug ①两张宽度各占50%的图片无法在同一横排, ...

  5. CSS——小三角带边框带阴影

    乍一看,很简单,做小三角,首先想到的是利用border的transparent特性,可以制作出小三角的效果.但是注意,这个小三角本身就是边框制作出来的.怎么能在小三角的外边再加一层小边框呢.那就必须再 ...

  6. rem字体+百分比布局表格

    效果图: 上源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. Android百分比布局支持库介绍——com.android.support:percent(转)

    转载自http://www.apkbus.com/forum.php?mod=viewthread&tid=244752&extra=&_dsign=0b699c42 在此之前 ...

  8. Android 屏幕适配(二)增强版百分比布局库(percent-support-lib)

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Andr ...

  9. HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

    pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...

随机推荐

  1. spring 之 lookup-method & replace-method

    初始化bean的堆栈: at org.springframework.beans.factory.support.CglibSubclassingInstantiationStrategy$Cglib ...

  2. jdk src 学习 Threadlocal

    示例: import java.io.Serializable; public class TestThreadLocal implements Serializable { /** * */ pri ...

  3. OV7670配置和调试小结

    先上一下OV7670的框架图 OV7670常用寄存器设置说明 直接看OV7670 Implementation Guide (V1.0)等 资料我已经上传了 https://files.cnblogs ...

  4. ISO7816之管脚定义

    卡座的管脚定义 如果使用示波器或者逻辑分析仪来观察 连接C3.C5.C7 小技巧当C3为3.57MHZ时候,可以使用波特率为9600的串口来监听.

  5. ScheduledThreadPoolExecutor 使用线程池执行定时任务

    转自:https://segmentfault.com/a/1190000008038848 在现实世界里,我们总是免不了要定期去做一件事情(比如上课)—— 在计算机的世界里,更是如此.比如我们手机每 ...

  6. day43-socketserver

    基于tcp的套接字,关键就是两个循环,一个链接循环,一个通信循环 socketserver模块中分两大类:server类(解决链接问题)和request类(解决通信问题) server类: reque ...

  7. jsfl 导出指定名称的swf

    var _openDOC = fl.openDocument("file:///E|TE/dt.fla"); var _exName = _openDOC.pathURI.spli ...

  8. Oracle 学习总结 - 表和索引的性能优化

    表的性能 表的性能取决于创建表之前所应用的数据库特性,数据库->表空间->表,创建数据库时确保为每个用户创建一个默认的永久表空间和临时表空间并使用本地管理,创建表空间设为本地管理并且自动段 ...

  9. 1:python 简介与基础

    什么是python? 1.python是一种面向对象的解释型语言,它继承了传统编译语言的通用性和强大性,同时也借鉴了简单脚本和解释语言的易用性. 2.python 在自动化测试.人工智能.数据分析等方 ...

  10. 6.5 Shell 算术计算

    6.5 Shell Arithmetic shell允许在其内计算表达式,可以通过以下方式使用:((中,let和带-i选项的declare命令中. 只能计算固定长度的整数,而且不会检查溢出,除0可以捕 ...