响应式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. python学习笔记_week21

    note 上节内容回顾: 1.请求周期 url> 路由 > 函数或类 > 返回字符串或者模板语言? Form表单提交: 提交 -> url > 函数或类中的方法 - .. ...

  2. c# 和 java <转载>http://www.cnblogs.com/zhucai/archive/2011/02/16/csharp-compare-java.html

    从语法层面来讲,c# 和 java 是非常相似的. <转载> 这篇文章对C#与Java做一个语言级的对比,方便C#转Java或Java转C#的人有个大致了解.这里大致用C#3.0与Java ...

  3. Android Netty Server

    项目源码在github上,请看这里-->Android Netty Server Android netty server Start a netty server on android Dow ...

  4. twisted的installReactor()函数

    #twisted的安装反应堆函数def installReactor(reactor): """ Install reactor C{reactor}. @param r ...

  5. springboot 前后端分离项目跨域配置

    @Configuration @EnableWebMvc public class CorsConfig implements WebMvcConfigurer { @Override public ...

  6. Linux 远程登录配置

    如果使用FlashFxp的sftp无法登陆,提示SSH 错误: 协商认证模式失败,也同样这样操作 修改你的ssh配置文件 配置文件路径如:/etc/ssh/sshd_config PasswordAu ...

  7. WPF按钮响应函数中执行操作耗时较长时,UI 界面不能实时更新——问题原因与解决方案

    原因: 一般来说,一个WPF窗口程序,只有一个UI线程, 如果这个线程停在某个函数,UI将会被阻塞,所有其他的界面操作都不能即时响应. 解决方案: 新开一个线程来执行耗时较长的操作,以不阻塞UI.

  8. JSP页面java代码报错:Purgoods cannot be resolved to a type

    错误提示 : Purgoods cannot be resolved to a type Purgoods不能解析为一个类型 原因 : 缺少引入Purgoods类 页面中引入java类,执行java代 ...

  9. 修改页面中显示出需要修改的数据(包括select选择框复显示)

    页面中需要用到某个对象时,在底层代码中赋值,然后页面用java代码进行获取调用 如下截图: select复显示:根据后台方法赋值选择框 ,并设置初始值 按钮及选择框的禁用(五种方法): 方法一: $( ...

  10. delphi dxBarManager 的dxBarEdit 输入问题

    Developer Express 6 想做像office2007那样界面. 问题:dxBarManager1 里面添加了cxBarEditItem1 这是个文本框,运行可以输入内容,但是当焦点失去时 ...