盒模型

Posted wenxiang-77

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了盒模型相关的知识,希望对你有一定的参考价值。

盒模型
盒模型是网页布局的基石,从盒子的内部到盒子的外围。其组成包括content(内容)、padding(内填充)、border边框、盒子本身和margin(外边距)。
盒模型具体的CSS属性:padding(内填充)和margin(外边距)
padding的用法
1、是长在内容和盒子之间的距离。
2、是长在盒子里面的。
3、作用是主要控制子元素在盒子内部的位置关系。
4、是添加在父元素上面。
5、可以把盒子撑大。
(注意:如果想让盒子保持原有的大小,需要在宽度的基础上减掉padding,如果一个盒子没有固定大小(是被内容撑开的),添加padding不用减。)
6、单一方向上设置padding值的方法:padding-left/right/top/bottom。
7、padding的设置方法:当padding一个值时表示四周的padding
当padding两个值时代表上下和左右
当padding三个值时代表上、左右和下
当padding四个值时代表上、右、下和左
8、padding不会对背景图的位置造成影响。
9、padding不能为负值。
magind的用法
(需求:让两个同级的盒子之间产生一定的距离,也就是盒子的周围产生距离。)
1、margin是长在盒子外围的。
2、控制当前元素与其他同级元素的位置关系。
3、不会改变盒子内部的大小
4、单一方向上设置margin值的方法:margin-left/right/top/bottom。
5、margin的设置方法:当margin个值时表示四周的padding
当margin两个值时代表上下和左右
当margin三个值时代表上、左右和下
当margin四个值时代表上、右、下和左
6、margin是可以设置负值的。
7、margin:0 auto;让当前元素在父元素里面左右居中。
7、margin常出现的bug:
A:同级元素上下之间的margin值不会叠加。
B:当父元素和第一个子元素都没有浮动时,给第一个子元素添加margin-top,会错误的把margin-top添加在父元素上边。
扩展:一个盒子在页面中真正所占区域大小
宽=width + border-left + border-right + padding-left + padding-right + margin-left + margin-right
高=height + border-top + border-bottom + pading-top + padding-bottom + margin-top + margin-bottom

以上是关于盒模型的主要内容,如果未能解决你的问题,请参考以下文章

盒模型——标准盒模型与怪异盒模型

浅谈CSS中的盒模型

什么是盒模型

标准盒模型与怪异盒模型

标准盒模型和怪异盒模型的差异

标准盒模型与IE盒模型