这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的大小了。所以很多时候我们对于大小的设置都需要使用百分比,嗯,试试看吧!

对于一个导航,我们初始是想这样:

代码如下:

css:

nav{width100%;background#001125;overflowhidden}
nav a{displayblock;floatleft;width20%;height60px;color#FFF;text-aligncenter;font16px/60px Microsoft YaHei;background#0A92CD}
nav a.p1{background: orange}
nav a.p2{backgroundpurple}
nav a.p3{backgroundgreen}
nav a.p4{backgroundblue}
nav a.p5{backgroundgray}

效果如下:

嗯,看起来还是不错的!

但是,很显然,在实际开发过程中总是存在各种“但是”(比如,产品经理对设计师说:这样不好看,我们要背景一致,用竖线把它们分隔开来...由于是乎,设计师就把方案改了~ 结果,前端工程师就屁颠屁颠的改代码)

css:

nav{width100%;background#001125;overflowhidden}
nav a{displayblock;floatleft;width20%;height60px;border-right:1px solid #001125;color#FFF;text-aligncenter;font16px/60px Microsoft YaHei;background#0A92CD}
nav a:last-child{border-rightnone}

一段时间后...终于改好了!来看一下效果吧~

“帮助”你为什么没有跟你们兄弟站在一条战线上?

对啊,为什么呢?我翻资料,查找原因...我查...

原来:现代浏览器对于盒模型的解析引起的问题,它们不会将border和padding包含在width之内,所以,这里各自20%的宽度是不包括border-right:1px的,现在元素中20%*5+4px(4个border-right:1px,最后一个被nav a:last-child{border-right: none}去除了)当然就超过了父容器100%的宽度了,所以第一排已经容不下“帮助”了,它不得不孤独的自成一排。

那么,有什么办法可以让它们兄弟重新“团聚”呢?那就是我们今天的主角:box-sizing!只需要,在为所有兄弟设置box-sizing:border-box,就可以让它们合家团圆了!

css:

nav{width100%;background#001125;overflowhidden}
nav a{displayblock;floatleft;width20%;height60px;border-right:1px solid #001125;color#FFF;text-aligncenter;font16px/60px Microsoft YaHei;background#0A92CD;box-sizing:border-box}
nav a:last-child{border-rightnone}

来看看是不是真的实现了呢?

那是必须的!

IE6以前的版本中,对盒模型的解析其实不需要设置border-box就已经是将border与padding包含在了width之内。所以,IE6以前版本的浏览器,在此前的dome中可能就已经没问题了。在我们开发的过程中会发现,有时候,如果对页面中的大区域进行设置时,将border、padding计算到width和height之内,反而更灵活。但W3C的 CSS2.1规范却规定了他们并不能被包含其中。所以才出现了刚才那样的问题。不过幸亏到了css3中引入了这个box-sizing的新属性,它具有 “content-box”和 “border-box”两个值。

box-sizing:content-box就是遵从之前CSS2.1的W3C标准,当它定义width和height时,宽度不包括border和padding。

box-sizing:border-box时便是能完美解决问题的包含其中的设置了!

CSS3盒模型之box-sizing的更多相关文章

  1. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  2. CSS3盒模型display:box;box-flex:3;

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. CSS3盒模型display:box简述

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. box-f ...

  4. [转]CSS3盒模型display:box详解

    时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...

  5. CSS3盒模型温故

    CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...

  6. css3 盒模型记

    css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...

  7. css3 盒模型

    0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不 ...

  8. 第94天:CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  9. 5.css3盒模型--margin/border/padding/content

    1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...

  10. CSS3.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

随机推荐

  1. Python中的闭包

    简单的闭包的栗子: def counter(statr_at = 0): count = 1 def incr(): nonlocal count #注意由于count类型为immutable,所以需 ...

  2. HackRF实现GPS欺骗教程

    硬件平台:HackRF One软件平台:MAC运行环境搭建系统平台:OS X 10.11 EI CapitanGPS终端:One Plus手机,飞行模式,仅GPS定位,GPS test App文章特点 ...

  3. 极客DIY:打造属于自己的无线移动渗透测试箱

    本文中介绍的工具.技术带有一定的攻击性,请合理合法使用. 你想不想拥有一款属于自己的移动无线渗透测试箱,如果你感兴趣,下面介绍的设备将会对你很有帮助.这个箱子被称为“MiTM(中间人攻击)WiFi箱” ...

  4. [ASP.net教程]ASP.NET保存信息总结(Application、Session、Cookie、ViewState和Cache等)

    以下是关于ASP.NET中保存各种信息的对象的比较,理解这些对象的原理,对制作完善的程序来说是相当有必要的(摘至互联网,并非原创--xukunping)在ASP.NET中,有很多种保存信息的对象.例如 ...

  5. 深入分析:Fragment与Activity交互的几种方式(二,使用Bundle)

    首先我们需要在Activity中动态添加Fragment时,用Bundle封装我们需要传递的数据. public void button(View view) { ArgFragment arg = ...

  6. My_Python的常用函数.

    范围生成函数 class range(object) | range(stop) -> range object | range(start, stop[, step]) -> range ...

  7. Manacher算法 , 实例 详解 . NYOJ 最长回文

    51 Nod http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1089 Manacher 算法 定义数组 p[i]表示以i为 ...

  8. Saving structured data with json

    Strings can easily be written to and read from a file. Numbers take a bit more effort, since the rea ...

  9. 【Tsinghua OJ】祖玛(Zuma)问题

    描述 祖玛是一款曾经风靡全球的游戏,其玩法是:在一条轨道上初始排列着若干个彩色珠子,其中任意三个相邻的珠子不会完全同色.此后,你可以发射珠子到轨 道上并加入原有序列中.一旦有三个或更多同色的珠子变成相 ...

  10. mac下U盘装机系统的制作(命令行)

    1,不插入U盘和插入U盘分别命令检测硬盘,确定要制作的U盘号:diskutil list 2,卸载usb盘,不推出,diskutil umountDisk /dev/disk1 3,将dmg写入U盘, ...