CCS进阶——div的宽度和高度是由什么决定的?

2,705 阅读2分钟

核心知识

  • 文档流/普通流(Normal Flow)
    1. 内联元素的宽高(高度是由行高决定的,宽度=内容+border+marging+padding)
    2. 块级元素的宽高(高度是内部文档流元素的高度总和,宽度默认适应父元素的宽度)
    3. 水平居中
    4. 垂直居中
    5. 文字溢出省略
  • 盒模型
    1. 一比一的div(<div style="padding-top=100%;border: 1px solid red;"></div>
    2. outline
    3. border调试大法

div的宽度

我们先来看一个例子。这个div的高度是多少呢?

当我们加上 font-size:20px,div的高度变成了28px,why?

思考:是 line-higth:normal影响的吗?normal这个值是多少呢

不是。 换个字体就不是了。默认是行高和字体设计有关系。

div的高度不确定。或者说div的高度等于line-height指定的高度。


文字垂直居中

让一个div高度是40px,不要写死height,而是要用padding去撑出高度

div{
  background-color: grey;
  line-height: 30px;
  padding: 5px 0;
}

文字垂直水平居中

再加上text-align:center;就可以实现文字垂直水平居中。

div{
  background-color: grey;
  line-height: 30px;
  padding: 5px 0;
  text-align: center
}

margin合并

如何取消margin合并问题呢 ?

  1. 父元素加border属性
  2. 父元素加padding属性
  3. 父元素加overflow:hidden;(不推荐使用,会有bug)

总结:div的高度是由什么决定?是由它文档流中元素的高度的总和。

什么是文档流(Normal Flow):指的是元素排版布局过程中,内联元素会默认自动从左往右,块级元素从上往下的流式排列方式。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。

脱离文档流(常见)

  1. float:left;
  2. position: absolute;
  3. position:fixed;