css中的定位问题

由于我最近在修改自己的网页布局，突然发现了自己对css中的定位概念还是混淆的，于是通过查官方文档，大神博客，自己实践，重新梳理了css定位的知识点。如果有不对的地方，请指正😁。

一、html中的默认布局格式

　　html中的布局默认格式是文档流，也就是，内联元素默认从左到右排列，宽度不够就会自动换行。块级元素单独占据一行，默认从上向下排列。

二、什么是块级元素什么是内联元素

　　块级元素：①独占一行宽度自动填满其父元素宽度；②可以设置width height属性③可以设置margin padding

　　内联元素：①相邻内联元素排在同一行②设置width height无效只和内部有关③只有margin-left margin-right padding-left padding-right有效

　　关系：可以通过设置display的属性让块级元素和内联元素相互转换，

　　　　　display：block可以将行内元素变为块级元素；

　　　　   display：inline可以将行块级素变为行内元素；

　　　　　display：inline-block不占一行的块级元素

　　常用块级元素：<div> <form> h1-h6 <caption> <hr> <fieldset> <ol> <ul> <p> <th> <tr>

　　常见内联元素：<a> <img> <input> <span> <textarea> 和一些文本样式

三、css定位position

　　四种不同类型的定位：

　　　　①静态定位static：一般元素的默认定位方式，也就是文档流；

　　　　②相对定位relative：该元素原本所占的空间保留，设置top left可以进行偏移；

　　　　③绝对定位absolute：从文档流中删除，原本所占的空间不保留，相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块，

　　　　　元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框；

　　　　④fixed固定定位：脱离文档流，相对于浏览器窗口进行定位；