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

核心知识

• 文档流/普通流（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;

转载于:https://juejin.im/post/5cdf4d78e51d45105f4e34a2