页面布局的学习有三大核心,分别是盒子模型、浮动、定位。
CSS的盒模型是CSS的基础,同时也是难点,也是面试的考点。所以,学好盒子模型,就成了前端开发者的重中之重,对盒模型有了正确的认识就能很好的帮助我们布局页面。
盒模型的组成部分
在菜鸟教程中对CSS盒子模型的描述是这样的:
所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。
那么也就是说,我们可以认为页面中的每一个元素标签就是一个个方块,然后这些方块被有序的摆放或者包裹使用,就形成了我们所看到的静态页面,这就是所谓的盒模型布局。所以,网页布局的本质,其实就是盒子的摆放问题。
在CSS中,一个完整的盒子由外边距(margin)、边框(border)、内边距(padding)、实际内容(content)4部分组成。
下面的图片说明了盒子模型(Box Model):
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
那么,这个盒模型的大小是怎么计算的呢?
那么一般来说,我们在普通的盒模型中,设置的width实际上是Content的宽度。
所以此时,如果一个盒子在内容外还额外添加了内外边距以及边框的时候,那么这个盒子的总宽度则应该是:
总元素的宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距(*注:此处填充即指内边距)
也就是说,我们普通盒子的内边距和边框,是会影响到盒子的实际大小的。
那么有没有例外的情况呢?
答案是有的,下面这就是padding不撑开盒子的情况
【注】:当盒子本身没有设置宽度和高度的时候,此时,对盒子设置padding是不会影响到盒子的实际大小的!!!
关于盒子外边距margin的应用:
外边距可以让块级盒子水平居中,但是必须满足两个条件:
- 盒子必须制定了宽度(width)
- 盒子左右的外边距都设置为auto
即:margin:0 auto
如果想让行内元素或者行内块元素水平居中,只需要给其父亲添加text-align:center
即可
外边距合并的问题
使用margin定义的块级元素的垂直外边距时,可能会出现外边距的合并。主要有两种情况:
- 相邻块元素垂直外边距的合并
当两个垂直外边距相遇时,他们将形成一个外边距,合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。【注意】:只有普通文档流中块框的垂直外边距才会发生外边距合并,行内框、浮动框或绝对定位之间的外边距不会合并。
- 解决方案:只给一个元素margin值
- 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距的同时,子元素也设置了上外边距,此时父元素会他先较大的外边距值。
解决方案:
- 1.可以给父元素定义上边框
- 2.给父元素定义内边距
- 3.给父元素添加
overflow:hidden
怪异盒和普通盒的区别
很明显,在普通盒子模型中,由于种种原因,比如边框和填充会使得盒子撑破,导致我们在网页布局中可能会造成其他元素的错位,或者在完成某些需求的时候需要花费大量精力去计算内外边距边框和内容的占比,进而导致开发效率受限。
所以,在CSS3中,官方为我们带来了一种新的盒子模型,我们称之为IE盒子模型(或者怪异盒子模型),而把之前的普通盒子称作标准盒子模型。
在CSS3中,我们可以通过box-sizing
来置顶盒模型类型,即可指定为content-box(标准盒模型)
和border-box(IE盒模型)
,这样一来,我们计算盒子大小的方式就发生了改变。
标准盒模型content-box:
width = content
IE盒模型:
width = content + paddings + borders