块级元素的宽高

从整个布局结构来分析。布局的div元素不设置高度，在几个盒子横排布局时才会设置宽度。内容盒子才精确设置高度。
明确一点宽高不设置值默认内容的大小。给定值的话，要看块级上下文是定位、浮动等情况去考虑。

不设置块级元素的宽高，默认情况

  1. /*UA样式表*/
  2. html{
  3.     display: block;
  4. }

标签设置为块盒模型显示。

  • width
    • 默认情况在行方向会填满整个空间，就是视口的宽度，会随着视口自动变化。
    • 如果设置计算值，直接显示给定的尺寸。
    • 如果设置百分数，是以视口的宽度为基准。
      • 100%就是整个视口宽度
      • 80%就是整个视口宽度的80%
  • height
    • 默认情况是填充内容的高度。如果没有内容是不分配高度的。
    • 如果设置计算值，直接显示给定的尺寸。肯定不会给高度固定值。
/*UA样式表*/
body{
    display: block;
  margin: 8px;
}

标签设置为块盒模型显示。

  • 具体与一样。主要是设置百分数时，如果html没有设置height的值，那么body的百分数值会失效。