搞明白页面中元素的高度和宽度

元素宽高的定义

  • 内联元素的宽:由它内部的文字、图片来决定(padding、margin、border 会算在宽度内)
  • 内联元素的高:由它文字的行高来决定(注意 padding、margin 不会改变内联元素的高度,虽然元素范围增大了,但是对元素周围的内容是没影响的)
  • 块级元素宽度:宽度默认是它的容器的100%,除非设定一个宽度
  • 块级元素高度总结:div 的高度是由它内部文档流(normal flow)中元素的高度总和决定的(不是单纯的讲所有高度相加、因为需要需考虑 margin 合并等情况)。那何为文档流?文档流中内联元素从左至右依次排列,如果空间不够,另起一行继续排列,当中的块级元素都会另起一行从上到下排列

分析一个实例

  • 当有如下代码,此时的div元素高度为多少 ?
<div>Hello<div>

font-size 乘以 line-height,当我们不设置行高时,浏览器用的是默认是字体的建议行高(字体设计师傅把它写在字体文件中),如「苹方」建议行高是 1.4,我们设置 font-size: 20px 那么 div 的高度为 20px × 1.4 = 28px。

在我们设置了line-height = 30px 时(写死了行高),此时 div 的高度由行高决定。不会因为字体大小变化而改变。可以看这个例子:

总结为:当 div 里面只有一个内联元素,那么 div 的高度就是这内联元素的行高

  • 在 div 中只有内联元素时
    • 两个内联元素之间,存在看不见的字符(空格、制表符、回车……)都会被 HTML 视作一个空格字符。比如:用 display:inline-block 做导航条时,每个导航之前会出现间隙,就是因为将回车符变为一个空格。
    • word-break 属性指定了怎样在单词内断行
  • 脱离文档流的情况。可直观的理解为「在计算宽高时别把脱离文档流的元素算进去」
    1. float
    2. position: absolute
    3. position: fixed

元素垂直居中

  • 不要使用 heigth 属性将父元素高度写死。应该用行高line-heightpadding 来撑开开父元素,自然就垂直居中了
  • 在父元素确定高度(高度被写死)的情况下。一般情况就是这个父元素需要全屏,而且,其内部的块级元素宽高不确定(由它的内容的内容来确定宽高)。内部的元素需要绝对居中,可以 flex 布局来实现
.dad {
  heigth: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
  • 在父元素高度没写死(由里面的元素撑起来)时,需要让子元素垂直居中,让父元素上下 padding 相等即可

水平居中

需要水平居中让子元素margin: 0 auto

外边距合并

在 CSS 中,两个或多个毗邻(父子元素或兄弟元素)的普通流中的块级元素垂直方向上的 margin 会发生叠加。这种方式形成的外边距即可称为外边距叠加(collapsed margin)

  • 何为毗邻:是指没有被非空内容、 padding、 border 或 clear 分隔开。
  • 何为普通流:除浮动(foat)、绝对定位( absolute)外的代码即为普通流(或者叫正常流)。