css定位总结以及绝对定位margin失效的原因

最近在复习CSS定位的相关知识，感觉之前做项目的时候写CSS都是遇到需求然后去网上CV下来能正常显示就行不会去关注CSS里的逻辑关系，这样效率高，但是如果以后遇到一些bug，不懂其中的一些基本原理就无从下手，现在是时候写一篇博客总结一下了。()

CSS的定位方式有三种由显示顺序从高到低有定位浮动标准流。

先从标准流说起

标准流的元素排序就是原原本本的从上到下从左到右，他的排列方式同时也受元素的显示模式（display）影响，分为块状，即一个元素就占一行，常见的有div hr p h ul ol form 等（没错h和p也是块状，我之前一直以为他是行内元素），行状如 span a ，以及行内块，这是一种比较特殊的排列方式，它可以与其他行内块元素在同一行显示，且默认的宽度即为元素本身宽度，并且还能像块状元素那样设置高宽，内外边距等等，比如 img input td 等。

再来说浮动

他是可以设置在子元素上的，可以向左或向右浮动，可以让块级元素在一行内显示，类似于将其转换成了行内块，但是与之不同的是他脱标了（关于脱标会在下面进行详细介绍）也就不占位置，有可能被下面的元素顶进来，并且不会被撑开，想要清除这些负面效果的话只需在父元素上设置 overflow: hidden即可。

再来说定位

常见的定位方式有fixed absolute relative ，他们之间大致区别没什么好说的，需要注意的有absolute是会脱标的而relative不会，这也就是父相子绝的由来。定位可以总结为定位模式+偏移偏移可以设置为 left：50% 如果不知道元素的大小的话可以用 transform: translateX(-50%);来进行居中。

下面介绍下脱标

脱标就是脱离标准流的限制，它可以使元素可以设置宽高，默认都由内容决定，不再给父元素汇报大小，同时display大部分也变成了块，但是不受标准流限制行为像行内块（大概？？

绝对定位不可以用margin 实现水平居中

元素设置了absolute 之后脱离了文本流，系统自动根据第一个非静态定位的父元素设置了left和top，我的理解是他脱标了，宽度由内容大小决定，所以margin就失去作用了，但是如果设置了 left: 0,right:0 （浏览器会按照左上右下的顺序尽量满足设置）的话元素的外边界就被拉伸到了父元素的最右边，也就是元素的宽度被拉伸了，这时候我们就可以通过设置固定的宽度和margin 来实现水平居中了

CSS的定位方式有三种 由显示顺序从高到低有 定位 浮动 标准流。