怪异盒子模型

1.内外边距的差别

• padding 盒子边框本身以内的间距,当内边距设置过大时,盒子本身的大小会 被撑大
• margin 盒子边框以外的间距,外边距大小不会影响盒子的大小,可能会影响盒子的位置

2.补充块元素和行内元素

• 块和行内块元素的宽度和高度默认是继承父元素的宽度 和高度的百分比.

• 行内元素是不能设置宽width和高度height,它的宽度和高度是根据内容来的.

• 同一行如果多个元素的宽度相加大于父元素容器的宽度,放不下的换行显示.

• 图片标签一般设置固定的宽度,高度设置为auto 图片标签大小会根据比咧缩小或者放大.

3.外边距的补充

外边距穿透:大盒子里面有一个小盒子,

​ 如果大盒子没有设置边框或者内边距,当里面的小盒子外边距过大时,小盒子的外边距会穿透大盒子,导致两个盒子一起移动.

如果大盒子设置边框和内边距,当里面的小盒子外边距过大时,小盒子不会穿透大盒子,只有小盒子在大盒子里面移动.

4.怪异盒子模型

• box-sizing :border-content; 标准盒子模型,平常不设置就默认是标准盒子模型

• box-sizing :border-box; 怪异盒子模型

  标准盒子模型与怪异盒子模型的区别:

  当内边距和边框的宽度<内容width时, 盒子的总宽度=width的值

  ​ 内容 content区域会被压缩,但是内容同样会显示出来,并且内容多的时候会溢出

​ 当内边距和边框的宽度>内容width时, 盒子的总宽度=内边框+内边距

​ 这时的内容区域就为0,但文本内容同样会显示出来.

5.怪异盒子的应用

优点:1. 固定盒子区域,在得到盒子大小后,可以自动压缩内容区域的宽度,不需要我们去计算.

2.普通盒子环境下,有些时候我们给盒子里面的内容过大 ,会导致整体盒子被撑大,就会改变设计要求的大小,而怪异盒子模型就不会.

在设置怪异后,设置width就为盒子的整体宽度,内容区域的实际宽度会自动挤压(条件是内边距和边框的宽度<提前设置好的内容区域width)

box-sizing: border-box;