作为前端狗的我们，每天都要和网页打交道。当 UI 将设计稿发给你时，CSS 的知识便显得尤为重要。而 CSS 这一标记性的语言，却时常让我很头疼：毫无逻辑性，并充满了各种坑爹的潜规则 ，以至于每次做项目时，大部分时间精力都浪费在了调整布局与样式上，详情可点击知乎上的为什么 CS…

在CSS中，margin的值可以是正数，也可以是负数。 当margin为负数的时候，对普通文档流元素和对浮动元素的影响是不一样的。 当元素的margin-top或者margin-left为负数时，“当前元素”会被拉向指定方向。 当元素的margin-bottom或者margin…

flex-grow剩余空间，按照比例添加给各个item剩余空间：flex容器大小- 所有flex项目大小所有项目都有相同系数，获得相同的剩余空间否则根据flex-grow决定的比例分配剩余空间flex

relative/absolute 元素都支持 top/right/bottom/left 属性定位。 relative 元素是相对自身定位的；absolute 元素是相对于最近的 position 属性值不是 static（也就是 fixed, absolute, relat…

基于包含块的宽度来计算的属性：margin, padding, width, max-width,min-width, left, right, text-indent. . 基于元素本身的宽高：background-position：背景图像的位置，分别设置水平方向和垂直方向…

CSS 中有时候需要一些特殊布局，用正常流做不出来的效果。这时我们就可以使用破坏流和保护流的那些 CSS 属性来实现这些效果。 float 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流(文档流)中移除，尽管仍然保持部分的流动性（与绝…

对象遵循标准文档流中，top, right, bottom, left 等属性失效。 relative（相对定位） 对象遵循标准文档流中，依赖top, right, bottom, left 等属性相对于该对象在标准文档流中的位置进行偏移，同时可通过z-index定义层叠关系…