定位postion css考点

定位有哪些?区别?/说一说定位?

0.静态定位 static
特点: 默认文档流定位
1.相对定位 relative
特点:不脱离文档流 相对于自身在浏览器中的位置定位
2.绝对定位 absolute
特点: 1.脱离文档流 原先位置不保留
2.默认定位元素，无论有没有祖先元素，相对于body定位
3.祖先元素设置了定位,相对于祖先元素定位（就近原则）
3.固定定位 fixed
特点: 1.脱离文档流 原先位置不保留
2.相对于浏览器视口区域
4.粘滞定位 sticky top:20px
特点: 1.不脱离文档流
2.没有达到阈值前相对定位
达到阈值就是固定定位

2.如何设置水平垂直居中?

1. 给父元素设置border,给子元素设置margin:width/2;
2. 给父元素设置box-sizing:border-box padding:width/2;
3. 子绝父相,给子元素设置top,left,bottom,right全部为0,margin:auto;
4. 子绝父相,给子元素设置top:50%,left:50%,margin-left:-width/2,margin-top:-height/2;
5. display:flex、justify-content:center、align-items:center
6. display:grid、justify-content:center、align-items:center
7. display:flex 、子元素margin:auto

面试：你说一说flex布局 /弹性盒 /伸缩盒？

1.概念： flex布局，可以简单、完整、响应式地实现各种页面布局，只要设置了display：flex属性，就拥有了一个弹性盒布局,多用于移动端。
2. 容器属性：
flex-dircetion (更改主轴排列方向)
flex-wrap (换行)
flex-flow（flex-direction和flex-wrap属性的缩写）
justify-content（设置主轴对齐方式）
align-items (设置交叉轴的对齐方式)
align-content (设置多行对齐)
3. 弹性元素属性：
order (控制元素排列顺序，值越小越靠前，默认为0
flex-grow（分配剩余空间，默认为0）
flex-shrink（等比例压缩，默认是1）
flex-basis（设置弹性元素宽度 basis 优先级比 width 高）
align-self（设置弹性元素自身交叉轴对齐方式）
flex（flex-grow和flex-shrink和flex-basis 的缩写 默认取值 flex：0 1 auto）

简述浮动布局以及其工作方式？

1. 用来解决块元素在水平方向排列的问题；
2. 一个元素如果成为浮动元素，那么这个元素就会脱离文档流，宽度如果没有指定，则由内容决定，不再占据屏幕空间；同一级别的浮动元素会在一行排列，如果一行无法容纳，则换行显示，浮动元素会失去对父元素支撑。

如何实现响应式布局？

1. 如果是通过css原生代码，可以通过@media来进行媒体查询，当网页显示在不同的网页中加载执行不同的css代码；
2. 设置弹性盒布局。