三角形：用一个正方形div改为小三角形div
方法：画两个对角线，生成四个小三角形，保留其中一个即可。
核心：content没有内容且宽高为0，只需要border边框，把边框设置为透明transparent，想要哪个方向的小三角就显示哪个方向的。
显示下三角形
一、浮动
使用浮动float后该元素就会飘出文档流，不在被父级元素所包含。
浮动会产生一个父级元素塌陷的问题，上课讲解了两种解决方法，结合以前所学知识，目前一共有四种解决父级元素塌陷的问题：
1、增加父级元素高度
2、增加一个空的div标签，清除浮动
3、在父级元素中增加一个overflow：hidden
4、父级元素添加一个伪类after
二、盒子模型
标准盒子模型：(height+width)(content)+padding(内边距)+border(边框)+margin(外边距)
怪异盒子模型：(content+padding+border)(height+width)+margin
标准盒子转怪异盒子：box-sizing:border-box
讲解了如何让div水平居中，通过使用margin：0 auto 即可
盒子的显示和隐藏以及丝滑出现的方法：
三、定位
1、相对定位：position：relative；
特点：
- 相对于自身进行偏移
- 原来的位置依然存在，不影响其他元素的排列布局
2、绝对定位：position：absolute；
特点：
- 原来的位置不在了（脱离了文档流），影响其他元素的排列布局
- 如果该元素的父级或者祖先元素存在relative/absolute/fixed 其中任何一种，则相对于最近的元素定位。如果父级或者祖先元素没有定位，则相对于浏览器进行定位。
重点：
- 要在父级元素设置定位，子元素才能根据父级元素来定位，并且不能超出父级元素边界。
- 若不给父级元素设置定位，子元素相对于浏览器定位。
若是给子元素的爷爷元素设置定位，子元素相当于爷爷定位。
3、固定定位fixed
应用场景：侧边栏永远都固定在一个位置
特点：
- 始终相当于浏览器进行定位
- 原来的位置不在了，不影响其他元素的排列布局
四、弹性盒子
弹性盒子：让子元素显示在同一行
三种让多个div显示在同一行的方法
1、 display: inline-block; 有间隙
2、display：flex 不存在高度塌陷问题且无间隙
3、弹性盒子
容器和项目
容器：使用了弹性盒子的元素称为容器
项目：弹性盒子的子元素
A、弹性盒子的容器属性
容器属性：
1.flex-direction 改变主轴方向
row 设置水平方向为主轴方向(默认)
column 设置垂直方向为主轴方向
2.justify-content 主轴方向上的对齐方式
flex-start 左对齐
center 居中
flex-end 右对齐
space-between 分散对齐
3.align-items 交叉轴的对齐方式
flex-start 顶部对齐
center 居中
flex-end 底部对齐
主轴和交叉轴
主轴：从左往右的水平方向（可以变为垂直）
交叉轴：从上往下的垂直方向
分散对齐，用的最多的也是分散对齐：
交叉轴对齐方式 ，用的最多的也是水平垂直居中
B、弹性盒子的项目属性
align-self 允许项目在交叉轴上有自己的对齐方式
flex-start 顶部对齐
center 居中
flex-end 底部对齐
实践1：小米商城菜单栏部分
实践2：小米商城手机部分
