css笔记-2/文字对齐文字省略

核心知识

文档流（Normal Flow）

• 内联元素的宽高
• 块级元素的宽高
• 水平居中
• 垂直居中
• 文字溢出省略（多行）

盒模型

• 一比一的 div
• outline
• border 调试大法

课堂笔记

• 把宽度与高度了解透彻,才能写出好的CSS
• 内联元素的高度由字体设计师默认设置的字体高度决定,最终决定的是line-height元素觉得
• 块元素的高度由多个其内部元素的高度之和决定
• 以div为例子,只有一行,由字体设计师默认设置的字体高度决定,可以通过设定line-height属性最终决定,存在多行,则由多行各自高度累加之和.
• html元素本质上是不分块和内联的,通过display 属性可以更改
• 块元素内联元素之分是在于CSS
• 块级元素会独占一行（即无法与其他元素显示在同一行内，除非你显式修改元素的display 属性），而内联元素则都会在一行内显示。
• 块级元素可以设置 width、height 属性，而内联元素设置无效。
• 块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。

什么是文档流

• 内联元素从左往右,块元素从上往下,这就是文档流

课堂作业笔记

• 文本过长就变成省略号css实现代码
  .demo{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  }

• 文字两端对齐例子(英文不存在文字对齐问题) 实现代码
  <div>
  <span>姓名</span>
  
  <span>联系方式</span>
  </div>

---

span{
display:inline-block;
width:5em;
text-align:justify;
}
span::after{
content:'';
display:inline-block;
width:100%;
}

• 文字对齐居中css实现代码
  .div{
  line-height:40px;
  text-align:center;
  }

• 多行文本省略CSS实现代码
  .demo{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  }

盒模型

• 盒模型由 4 部分组成。从内到外分别是：
  content -> padding -> border -> margin