浅析盒模型
来源:互联网 发布:js中判断字符串长度 编辑:程序博客网 时间:2024/06/03 06:22
在前端开发中我们会经常遇到一个概念-——盒模型。在前端的面试过程中也经常会遇到这样的问题:请你简单说明对盒模型的理解?盒模型是CSS中一个很重要的概念,浏览器认为页面中的元素都包裹在一个看不见的区域中,形象地称为盒子。盒子在我们写页面布局是起着至关重要的作用。下面我们就对盒模型做一些简单解析。
盒模型
盒模型分为标准盒模型和怪异盒模型
1.标准盒模型:由margin(外边距),padding(内边距),border(边框),content(内容)四个部分构成,可以深刻理解为标准盒模型由内容尺寸,盒子尺寸,区域尺寸。内容尺寸为content的宽度(高度),即我们在CSS中设置的width/height值。盒子尺寸为content(width/height值)加上padding值加上border的值,区域尺寸为盒子尺寸加上margin值。
2.怪异盒模型:其组成结构和标准盒模型是一样的,但其盒子的尺寸为我们在CSS中设置的width/height的值,原因就是怪异盒模型的内容尺寸会被padding和border占据。
注意:
1.内边距会影响盒子大小,但是继承的宽度, padding不会挤开
2. 在标准文档流中,竖直方向的margin不会叠加,以较大的为准,这就是所谓的页面坍塌。如果不在标准流中,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的,两个盒子之间的margin会叠加。
3.使用margin:0 auto;的盒子,必须有width,有明确的width。
4.只有标准流的盒子,才能使用margin:0 auto;居中。也就是说,当一个盒子浮动了、绝对定位了、固定定位了,都不能使用margin:0 auto;
5.一般来说,盒子与盒子之间用margin 盒子内部用padding 盒子尺寸尽量用auto 上下间距用padding 左右间距用margin。
- 浅析盒模型
- 浅析ADO 事件模型
- RBAC 权限模型浅析
- linux驱动模型浅析
- 浅析Android线程模型
- 浅析Android线程模型
- linux设备模型浅析
- CryEngine模型格式浅析
- 浅析2.6设备模型
- 主题模型-LDA浅析
- 主题模型-LDA浅析
- 浅析SWT事件模型
- 主题模型-LDA浅析
- linux设备模型浅析
- 主题模型-LDA浅析
- linux 设备模型浅析
- 对象内存模型浅析
- 主题模型-LDA浅析
- 2017年8月17日20:09:57
- Fiori app预加载第三方js库
- SourceTree使用方法--Git客户端
- 史上最全手把手教你搭建分布式文件系统:FastDFS
- angular中的一些DOM操作
- 浅析盒模型
- Processor SDK RTOS BOOT AM57x
- hdu 6140 Hybrid Crystals 阅读题 OR bitset 优化01背包
- 论sqoop1连接数据库的血坑
- RabbitMQ
- Android N的Audio系统(一)
- python中的占位符
- 20170817
- PAT-剪刀石头布