盒模型

Posted 2021-03-08 wenxiang-77

盒模型
盒模型是网页布局的基石，从盒子的内部到盒子的外围。其组成包括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