CSS3盒模型之box-sizing
这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的大小了。所以很多时候我们对于大小的设置都需要使用百分比,嗯,试试看吧!
对于一个导航,我们初始是想这样:
代码如下:
css:
nav{
width
:
100%
;
background
:
#001125
;
overflow
:
hidden
}
nav a{
display
:
block
;
float
:
left
;
width
:
20%
;
height
:
60px
;
color
:
#FFF
;
text-align
:
center
;
font
:
16px
/
60px
Microsoft YaHei;
background
:
#0A92CD
}
nav a.p
1
{
background
: orange}
nav a.p
2
{
background
:
purple
}
nav a.p
3
{
background
:
green
}
nav a.p
4
{
background
:
blue
}
nav a.p
5
{
background
:
gray
}
效果如下:
嗯,看起来还是不错的!
但是,很显然,在实际开发过程中总是存在各种“但是”(比如,产品经理对设计师说:这样不好看,我们要背景一致,用竖线把它们分隔开来...由于是乎,设计师就把方案改了~ 结果,前端工程师就屁颠屁颠的改代码)
css:
nav{
width
:
100%
;
background
:
#001125
;
overflow
:
hidden
}
nav a{
display
:
block
;
float
:
left
;
width
:
20%
;
height
:
60px
;
border-right
:
1px
solid
#001125
;
color
:
#FFF
;
text-align
:
center
;
font
:
16px
/
60px
Microsoft YaHei;
background
:
#0A92CD
}
nav a:last-child{
border-right
:
none
}
一段时间后...终于改好了!来看一下效果吧~
“帮助”你为什么没有跟你们兄弟站在一条战线上?
对啊,为什么呢?我翻资料,查找原因...我查...
原来:现代浏览器对于盒模型的解析引起的问题,它们不会将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{
width
:
100%
;
background
:
#001125
;
overflow
:
hidden
}
nav a{
display
:
block
;
float
:
left
;
width
:
20%
;
height
:
60px
;
border-right
:
1px
solid
#001125
;
color
:
#FFF
;
text-align
:
center
;
font
:
16px
/
60px
Microsoft YaHei;
background
:
#0A92CD
;box-sizing:border-box}
nav a:last-child{
border-right
:
none
}
来看看是不是真的实现了呢?
那是必须的!
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的更多相关文章
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- CSS3盒模型display:box;box-flex:3;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- CSS3盒模型display:box简述
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. box-f ...
- [转]CSS3盒模型display:box详解
时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...
- CSS3盒模型温故
CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...
- css3 盒模型记
css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...
- css3 盒模型
0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不 ...
- 第94天:CSS3 盒模型详解
CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...
- 5.css3盒模型--margin/border/padding/content
1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...
- CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
随机推荐
- Python中的闭包
简单的闭包的栗子: def counter(statr_at = 0): count = 1 def incr(): nonlocal count #注意由于count类型为immutable,所以需 ...
- HackRF实现GPS欺骗教程
硬件平台:HackRF One软件平台:MAC运行环境搭建系统平台:OS X 10.11 EI CapitanGPS终端:One Plus手机,飞行模式,仅GPS定位,GPS test App文章特点 ...
- 极客DIY:打造属于自己的无线移动渗透测试箱
本文中介绍的工具.技术带有一定的攻击性,请合理合法使用. 你想不想拥有一款属于自己的移动无线渗透测试箱,如果你感兴趣,下面介绍的设备将会对你很有帮助.这个箱子被称为“MiTM(中间人攻击)WiFi箱” ...
- [ASP.net教程]ASP.NET保存信息总结(Application、Session、Cookie、ViewState和Cache等)
以下是关于ASP.NET中保存各种信息的对象的比较,理解这些对象的原理,对制作完善的程序来说是相当有必要的(摘至互联网,并非原创--xukunping)在ASP.NET中,有很多种保存信息的对象.例如 ...
- 深入分析:Fragment与Activity交互的几种方式(二,使用Bundle)
首先我们需要在Activity中动态添加Fragment时,用Bundle封装我们需要传递的数据. public void button(View view) { ArgFragment arg = ...
- My_Python的常用函数.
范围生成函数 class range(object) | range(stop) -> range object | range(start, stop[, step]) -> range ...
- Manacher算法 , 实例 详解 . NYOJ 最长回文
51 Nod http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1089 Manacher 算法 定义数组 p[i]表示以i为 ...
- 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 ...
- 【Tsinghua OJ】祖玛(Zuma)问题
描述 祖玛是一款曾经风靡全球的游戏,其玩法是:在一条轨道上初始排列着若干个彩色珠子,其中任意三个相邻的珠子不会完全同色.此后,你可以发射珠子到轨 道上并加入原有序列中.一旦有三个或更多同色的珠子变成相 ...
- mac下U盘装机系统的制作(命令行)
1,不插入U盘和插入U盘分别命令检测硬盘,确定要制作的U盘号:diskutil list 2,卸载usb盘,不推出,diskutil umountDisk /dev/disk1 3,将dmg写入U盘, ...