核心知识

  • 文档流/普通流（Normal Flow）
  2. 内联元素的宽高（高度是由行高决定的，宽度=内容+border+marging+padding）
  3. 块级元素的宽高（高度是内部文档流元素的高度总和，宽度默认适应父元素的宽度）
  4. 水平居中
  5. 垂直居中
  6. 文字溢出省略
  • 盒模型
  2. 一比一的div（​​<div style="padding-top=100%;border: 1px solid red;"></div>​​）
  3. outline
  4. 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合并问题呢 ？

  2. 父元素加​​border​​属性
  3. 父元素加​​padding​​属性
  4. 父元素加​​overflow:hidden;​​（不推荐使用，会有bug）

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

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

脱离文档流(常见)

  2. ​​float:left;​​
  3. ​​position: absolute;​​
  4. ​​position:fixed;​​