CSS-怪异盒模型和标准盒模型
来源:互联网 发布:淘宝店铺模板市场 编辑:程序博客网 时间:2024/06/16 14:01
在html文档中,每个渲染在页面中的标签都是一个个盒子模型。
盒子模型又分为 : W3C标准的盒子模型
和 IE标准的盒子模型
。
由于目前大部分主流的浏览器支持的是W3C标准盒模型(标准盒模型),也有保留对怪异盒子样式的解析,当然IE沿用的是自己标准的盒模型(怪异盒子模型)
用两个简单的例子分别介绍下这两个盒子模型:
标准盒模型:
<!--html--><div class="box1"> <div class="box2"></div></div>
<!--css-->.box1{ width: 200px; height: 200px; background-color: aqua; padding: 30px; }.box2{ width: 200px; height: 200px; background-color: red; }
这里外层盒子的width和height都是:30 + 200 + 30 = 260px。
怪异盒模型
<!--css中加入box-sizing属性--><!--box-sizing属性:border-box(怪异盒子模型),content-box(标准盒模型)-->.box1{ width: 200px; height: 200px; background-color: aqua; padding: 30px; box-sizing: border-box; }.box2{ width: 200px; height: 200px; background-color: red; }
“`
这里外层盒子的width和height都是:30 + 140+ 30 = 200px。
这里得出一个结论:
标准盒模型,一个块的总宽度 = width(content的宽度) + margin(左右)+ padding(左右)+ border(左右)
怪异盒模型,一个块的总宽度 = width(content + border + padding)+ margin(左右)
阅读全文
0 0
- CSS-标准盒模型 & 怪异盒模型
- CSS中的标准盒模型 和 怪异盒模型
- CSS-标准盒模型和怪异盒模型box-sizing
- CSS-怪异盒模型和标准盒模型
- 怪异盒模型和标准盒模型
- 前端进阶---标准盒模型和怪异和模型---
- css基础———box-sizing—标准盒模型&怪异盒模型
- 正常盒模型和怪异盒模型
- 【怪异解析-盒模型】
- css盒模型(IE和标准)
- 盒模型——标准盒模型与怪异盒模型
- 浏览器的标准兼容模式和怪异呈现模式以及盒模型
- 怪异盒模型 box-sizing
- 标准和模型和IE盒模型
- CSS盒模型全面讲解,怪异模式盒模型,CSS3 box-sizing属性
- 标准盒模型和IE盒模型
- 标准盒模型和IE盒模型
- HTML5基础加强css样式篇(css属性:怪异盒模型解析)(四十六)
- Stanford机器学习---第一讲. Linear Regression with one variable
- 学习日志2017.12.18
- JPA随手笔记
- 1008. 数组元素循环右移问题 (20)
- android Popupwindow被弹出软键盘挡住
- CSS-怪异盒模型和标准盒模型
- 20个非常有用的Java程序片段
- cookie、 sessionStorage 、localStorage之间的区别和使用
- 无法安装64位版本的微软Office
- Spring IOC
- [Vim]注释代码的四种姿势
- python出现中文错误:SyntaxError: Non-ASCII character '\xe7' in file car-training.py on line 7, but no encod
- 行内元素padding-left用百分比
- Tensorflow Lite初探(Android)