CSS魔法堂:盒子模型简介
本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model)
一、W3C标准的盒子模型
二、IE盒子模型
三、两种模型的区别
W3C标准盒子模型:
外盒模型
元素空间宽度 = content width + padding + border + margin的宽度
元素空间高度 = content width + padding + border + margin的高度
内盒模型
元素宽度 = content height + padding + border的宽度
元素高度 = content height + padding + border的高度
IE盒子模型:
外盒模型
元素空间宽度 = content width + margin的宽度
元素空间高度 = content height + margin的高度
内盒模型
元素宽度 = content width
元素高度 = content height
当IE6~8处于怪异模式下就会使用IE盒子模型,否则将使用W3C标准盒子模型。
四、CSS3规则——box-sizing
box-sizing有三个值,默认是content-box(表示元素使用W3C盒子模型),而border-box(表示元素使用IE盒子模型),inherit(从父元素上继承)
浏览器支持:IE8开始支持
Element{ -moz-box-sizing: border-box; // FireFox3.5+ -o-box-sizing: border-box; // Opera9.6(Presto内核) -webkit-box-sizing: border-box; // Safari3.2+ -ms-box-sizing: border-box; // IE8 box-sizing: border-box; // IE9+,Chrome10.0+,Safari5.1+,Opera10.6 }
五、总结
盒子模型是CSS的基础,虽然IE一直被大家诟病,但不代表IE盒子模型就比W3C标准盒子模型差,后面我们一起深入学习CSS3样式规则box-sizing就明白了。
尊重原创,转载请注明来自: http://www.cnblogs.com/fsjohnhuang/p/3967623.html ^_^肥仔John
六、参考
http://www.cnblogs.com/releaseyou/archive/2009/04/16/1437456.html
http://blog.csdn.net/ncode/article/details/7428746
http://www.w3cplus.com/content/css3-box-sizing
http://jorux.com/archives/property-4-if-you-love-css/
相关文章
- 《CSS世界》笔记二:盒模型四大家族
- CSS - 美化字体 => CSS的-font-smoothin属性优化
- 【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序
- css盒子模型1
- 第三百四十节,Python分布式爬虫打造搜索引擎Scrapy精讲—css选择器
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
- 第七十三节,css盒模型
- css icons fontawesome-free
- 前端学习 -- Css -- 内联元素的盒模型
- [CSS] Build a Fluid Loading Animation in CSS
- HTML JAVASCRIPT CSS 大小写敏感问题
- 前端学习 -- Html&Css -- 层级和透明度
- CSS学习(一)
- CSS 基础点集锦一:盒子模型、浮动、清除浮动
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- 01【html和css】4/10
- 〖大前端 - 基础入门三大核心之CSS篇㉑〗- 3D变形 与空间移动
- 【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )
- 【CSS】盒子模型外边距 ① ( 盒子模型外边距设置 | 外边距属性单独设置 | 外边距属性复合写法 )
- 【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )
- 【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
- 【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
- 【CSS】CSS 背景设置 ④ ( 超大背景图片设置 | 背景图片定位设置 background-position: center top; )
- CSS盒子模型
- CSS(五)浮动和文档流、定位
- 【CSS】尺寸和边框、盒子模型、外边距_02
- 【CSS】css概述、语法规范、基础选择器_01
- css案例9——圆角头像