四种常用布局方式

CSS四种常用布局方式：
常用的四种方式有display，浮动布局，定位布局和伸缩盒布局。
1.display布局方式
其中display属性有三个属性值，分别为inline，block，inline-block。
display:inline 将块级元素转变为行内元素；
display：block 将行内元素转变为块级元素；
display：inline-block 将当前元素转变为兼具行内元素和块级元素特性的元素，即可设置宽高也能在一行排列。
2.浮动布局方式
float：left/right，其中使用浮动时不会遮盖文字，对行内元素设置浮动会让行内元素可以设置宽高属性，对块级元素设置浮动时，块级元素不在独占一行。
3.定位布局：
定位布局使用position属性
position：static 静态布局
position：absolute 绝对定位
绝对定位特点：1）脱离默认文档流；2）不保留当前控件；3）默认情况下，绝对定位元素根据body左上角进行定位； 4）当父元素具有定位属性时，子元素根据父元素左上角进行相对定位
position：relative 相对定位
特点：1）根据元素本身进行相对定位；2）不脱离默认文档；3）保留定位前空间
position：fixed 固定定位
特点：1）特点和绝对定位相似；2）使用了固定定位的元素不会随着滚动条的滚动而滚动
position：sticky 综合类相对定位和固定定位。
其中使用定位布局时，要使用配合属性left;top;right;bottom
4.伸缩盒布局
display:flex; 当前元素即刻变成一个伸缩盒，并且所有子元素自动成为父元素的一个成员项item，子元素的浮动属性自动失效
flex-direction:设置子元素的排列方式
align-items: 设置元素在y轴方向位置
stretch 子元素默认高度为父元素100%
flex-start； flex-end ； center
justify-content:设置元素在x轴方向的位置
flex-start；flex-end ；center；space-around；space-between
子元素:flex:number:当前item占据父元素剩余空间的份数
4.如何让子元素在父元素中水平和垂直居中?
1.子元素为行内元素 text-align:center / line-height
2.子元素为块级元素时
1.给父元素设置:justify-content/align-items
2.给父元素设置display:flex;
给子元素直接设置一个margin:auto
3.给父元素设置一个定位属性,给子元素设置一个绝对定位;然后给子元素所有配合属性设置0px;并且给子元素设置margin:auto
4.给父级元素设置定位属性,子元素设置绝对定位;将子元素的top:50%;left:50%;再配合使用margin-top:-height50%;margin-left:-width50%