核心知识
文档流（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
