首先谈到让一个元素在窗口中消失的办法：
1.display:none;不占用屏幕空间。
2.visibility:hidden;要与visibility：visible搭配使用，会占用屏幕空间。
3.opcity:0;设置透明度，子元素和文本都会同时隐藏，会占用屏幕空间。
水平垂直居中的方法：
1.行内元素水平垂直居中方法：
行内元素
text-align:center;
line-height: ; 和父元素同高
2.块级元素
不需要计算：
1.父元素设置display:flex; justify-content:center; align-items:center;
2.父元素设置display:flex;子元素设置：margin:auto;
3.父元素设置相对定位，子元素设置绝对定位 left right bottom top为0 margin:auto;
需要计算：
4.父元素设置绝对定位 子元素设置绝对定位 left:50%; top:50%; margin-left:-子元素宽度的一半 margin-top:-子元素高度的一半
5.父元素设置绝对定位 子元素设置绝对定位 left:设置子元素宽度的一半 top:设置子元素高度的一半
6.父元素设置绝对定位 子元素设置绝对定位 left:calc(50% - 子元素宽度的一半); top:calc(50% - 子元素高度的一半);
四种布局的理解：
浮动布局：浮动布局不完全脱离文档流（ 不对文本元素做遮挡），文本显示不会脱离文档流
不占据屏幕空间， 块级元素能够在一行显示， 可以使行内元素可以设置宽高， 遇到其他浮动元素就停止浮动 遇到父元素边框停止浮动
清除浮动：
1.兄弟级元素 clear left right both
2.父子级元素的清除浮动
a.给父元素添加一个overflow:hidden;
b. div::after{
content:'';
display:block;
clear:both;
}
定位布局：
1.静态定位：
静态定位是所有元素的默认定位方式，显示在普通流中。
2.相对定位：
不脱离文档流， 相对于自己原本的位置进行偏移
3.绝对定位：
完全脱离文档流， 会遮挡文本，多个设置了绝对定位的元素会叠加在一起。
z-index可以调整拥有定位属性的元素的顺序 0为默认值，值越大，显示越在前
如果父元素没有定位属性 那么根据浏览器进行偏移
如果父元素有定位属性 那么根据父元素的左上角进行偏移
4.固定定位：
脱离文档流， 根据浏览器继续定位。在网页出现滚动条时，固定定位位置不变，始终保持在网页的固定位置。需要设置：left top right bottom
伸缩盒布局：
父元素 display:flex flex-direction:
row 默认
row-reverse横向反转
colum行布局
colum-reverse 行布局反转
justify-content 指的是子元素在主轴方向上的位置
flex-start 开始位置
flex-endn 结束位置
center 中间位置
space-between 均匀分布(第一个元素要在主轴开始的位置,最后一个元素要在主轴结束的位置 )
space-around 均匀分布 (左右两边留有边距)
align-items 指的是子元素在交叉轴上的位置
flex-start （默认）交叉轴的开始位置
flex-end交叉轴的结束位置
center 交叉轴的中间位置
stretch 子元素伸缩并对齐文本
baseline 交叉轴的基线位置（文本对齐），子元素不做伸缩
align-content 多主轴的时候,设置子元素在交叉轴上的位置
子元素： flex：占父元素的几等分 也可以为具体的值
