理解box-sizing属性border-box,content-box
来源:互联网 发布:唯品会抢购软件 编辑:程序博客网 时间:2024/05/22 17:02
理解box-sizing属性border-box,content-box,其实也是理解正常盒模型与异常盒模型。
正常盒模型
正常盒模型,是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box,它也是标准 w3c 盒子模型。
下图更方便理解。
正常盒模型是指:盒模型的大小柏阔content,padding,border,并且先做content.。
正常盒模型的大小会以内容优先自动扩展,内部子元素超过父元素给定的大小,会将父元素撑大。
怪异盒模型
怪异盒模型,是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型,但是由于其自身的特殊性,手机页面中也有使用怪异盒模型。
下图更方便理解。
怪异盒模型是先做盒。然后添加border,padding,最后做content。即保证盒模型优先,先做盒再放内容,不管内容是否放得下,一般手机上用的更多。
更通俗的说,怪异盒模型中,父元素的盒模型确定,子元素是无法撑开父元素的盒模型,只能在盒模型剩余空间展示。
如果将父元素盒模型的狂傲,改为(子元素)width + (父元素)padding + (父元素)border的尺寸 = 130px 。 那么得到的效果与正常盒模型相同。
如下图所示。
那应该选择哪中盒子模型呢?
当然是“标准 w3c 盒子模型”了。
怎么样才算是选择了“标准 w3c 盒子模型”呢?
很简单,就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页,
即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子。所以网页在不同的浏览器中就显示的不一样了。
反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
参考文章:
http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html
- 理解box-sizing属性border-box,content-box
- CSS3 box-sizing 属性content-box或border-box
- box-sizing:border-box;和 box-sizing:content-box;
- box-sizing:border-box
- box-sizing:border-box;
- box-sizing:border-box
- box-sizing:border-box;
- box-sizing border-box 的理解
- box-sizing border-box 的理解
- 盒子模型 box-sizing中content-box和border-box
- 盒子模型 box-sizing中content-box和border-box
- box-sizing中content-box和border-box的区别
- HTML+CSS基础之浅层理解box-sizing:content-box | border-box | inherit
- * { Box-sizing: Border-box } FTW
- box-sizing:border-box 解释
- Box-sizing 中的content-sizing 和 border-sizing
- CSS3 box-sizing(content-box:width指内容 border-box:width指border+padding+content)
- box-sizing属性的理解
- yii中的http访问
- 下拉框操作
- matlab实用程序(六)
- poj3254
- 6576
- 理解box-sizing属性border-box,content-box
- Kattis <Simon Says>
- 深入剖析装箱与拆箱机制
- stm32低功耗实验之待机模式
- 東京音頭 (东京音头) 歌词翻译
- JZOJ4779 【GDOI2017模拟9.14】鞍点(OICamp 2016 Day 5 T1) 计数问题
- 科普“智能导航”--整理自大疆工程师
- git无法pull仓库refusing to merge unrelated histories
- python的传值与引用