css学习很少有人会系统的学习css，大部分都是遍历。然后记住常用的，不常用的再回头搜索。很多前端人都认同学好CSS真的不难。下面是在很多场景下使用CSS需要注意的几点。同样的，开篇页面列出了css的一些学习知识点：基础属性【定位，盒模型，文字，背景。..]动画属性[gradient,change,transition,animation]stackingandblockformattingcontextuallayout[table,flex,grid]选择器[weight,containment,childselection,adjacent,sibling,attributeselection,pseudo-class,pseudo-element]的当然，媒体查询远不止于此。还有各种应用场景，风格不一，厂商前缀，适配等问题让人想死。当你认为自己可以游刃有余的时候，可以深入研究以下内容：sasscssmagic[脑洞大开的css书]一些需要注意的点写css时，需要注意依赖、关联和甚至是某些属性的排斥关系，以下暂且列举一些常见的陷阱；floatfloat是一个比较普通的布局属性，需要注意的是：float在没有绝对定位和display的情况下是不生效的。float:right时，第一个绘制的元素在最右边。当子元素的float属性为非none时，父元素不会被拉伸。浮动元素超出正常流式布局，需要在父元素中清除对于浮动，可以使用::after添加伪元素，并为伪元素设置clear:both。z-indexz-index也是css的一个关键属性。一般来说，只要有弹窗，就会出现z-index。在当前单页应用流行的时候，弹窗是必不可少的，也是影响堆叠上下文的关键因素；两条铁律：z-index只能对position属性值为relative、absolute或fixed的元素有效。【flexchildren除外】子元素的堆叠顺序不能超过父级。如果父级的层叠顺序低，则子元素不会超过父级，而是其他层叠顺序高的元素的层叠顺序。堆叠上下文是HTML。元素的三维概念，相对于面向（计算机屏幕）窗口或网页的用户，沿假想的z轴延伸。HTML元素根据自身的属性按优先顺序占据堆栈上下文的空间。正常布局时，整个HTML是一个堆叠上下文，会按照元素绘制的先后顺序显示。重叠时，需要按绘制顺序覆盖。除了顶层节点会形成一个栈上下文外，后面的操作都会形成一个栈。上下文：根元素（HTML），z-index值不是“auto”的绝对/相对定位，z-index值不是“auto”的弹性项目（flexitem），即：父元素display:flex|inline-flex，opacity属性值小于1的元素（opacity参考规范），transform属性值不为“none”的元素，mix-blend-mode属性值不为“normal”的元素，以及过滤除“none”以外的值的元素、透视值不为“none”的元素、isolation属性设置为“isolate”的元素、position:fixed指定will-change中任意CSS属性，即使你不直接指定这些属性的值-webkit由于-overflow-scrolling属性设置为"touch"的元素形成了一个新的层叠上下文，那么这个上下文中的层叠顺序是如何确定的呢？每个层叠上下文中的绘制顺序在每个层叠中上下文，下面的图层绘制元素的背景和边框按照后来居上的规则。文档流（in-flow）中具有负堆栈层级（childstackingcontexts）的子层叠上下文，non-inline-level，non-positioneddescendantelementsnon-positionedfloatingelementsinthedocumentflow（in-flow），inline-level(inline-level)，非定位后代元素，包括内联块和内联表，堆叠级别为0的子堆叠上下文和堆叠级别为0的定位堆叠级别为的后代元素的子堆叠上下文positive重复这两条铁律：z-index只能对position属性值为relative、absolute或fixed的元素有效。【flexchildren除外】子元素的堆叠顺序不能超过父元素。如果父元素的层叠顺序低，那么无论子元素有多高，都不会超过其他与父元素同级但层叠顺序高的元素的transformZ和z-index。最好不要一起使用。text-overflow通常出现在行内标题和其他地方。如果文字过多，想用...隐藏，那么text-overflow是必须的；value:clip:当行内内容溢出块容器时，会溢出部分裁剪。ellipsis：当内联内容溢出块容器时，将溢出替换为(...)。要使<'text-overflow'>属性生效，块容器必须显式定义<'overflow'>为不可见值，同时显式或隐式定义<'width'>为非可见值auto值，<'white-space'>是nowrap值。溢出：隐藏；宽度：200px；空白：nowrap；文本溢出：省略号；如果不隐藏overflow，或者可以绕行或者自动扩展宽带，都不会出现overflow，所以text-overflow会失败。flex在parent元素为display:flex时，子元素的很多布局都会失效。float、clear、vertical-align这三个属性对子元素是不起作用的，需要使用flex相关的布局来完成。伪元素伪元素实际上是一个子元素。div::after是在div末尾添加的元素。元素是::after，所以需要注意的是自闭标签后不能加伪元素，因为自闭标签不能有子元素，比如img、br这样的标签。伪类伪类其实就是类类选择器。使用的时候要注意伪类，比如:last-child和:first-child。它必须是要命中的父元素中的第一个子元素，所以在使用这种类型的伪类时，父元素中最好只有某一类元素，不包含其他元素。当position是绝对定位时，需要注意的是引用元素是距离自身最近的定位祖先元素。absolute：对象脱离正常流。此时的offset属性指的是距离自身最近的定位祖先元素。如果没有定位祖先元素，它会一直回到body元素。框的偏移位置不会影响正常流中的任何元素，并且它的边距不会与任何其他边距重叠。当position的值为非静态时，其级联级别由z-index属性定义。绝对定位的元素，当不设置top、right、bottom、left属性时，会紧跟其前面的兄弟元素，但位置不影响正常流中的任何元素。使用此功能，您可以执行类似的操作。visibility元素还在，只是不可见，位置还是需要占据背景。当背景是图片的时候，最好加上background-size，不然容易变形或者这个平铺的line-heightline-height往往是拉开父元素的关键，可以和vertical-aligntable结合使用对于子元素：tabletable-cellBFC(blockformattingcontext)Formattingcontext是W3CCSS2.1规范中的一个概念。它是页面中的一个渲染区域，有一套渲染规则，决定了它的子元素将如何定位，以及与其他元素的关系和交互。最常见的格式化上下文是块格式化上下文（简称BFC）和内联格式化上下文（简称IFC）。块格式化上下文是网页可视化CSS呈现的一部分。是块级框布局出现的区域，也是浮层元素交互的区域。BFC（Blockformattingcontext）直译为“块格式化上下文”。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部Block-levelBox如何布局，与该区域外部无关。bfc布局规则里面的Box会在垂直方向上一个接一个的放置。Box的垂直距离由margin决定。属于同一个BFC的两个相邻框的边距将与每个元素的边距框的左侧重叠，接触包含块边框框的左侧（对于从左到右的格式，否则反之亦然）。即使存在浮动也是如此。BFC的区域不会和浮动框重叠。BFC是页面上一个隔离的独立容器，容器内部的子元素不会影响外部的元素。反之亦然。BFC计算高度时，浮动元素也参与BFC的计算，触发根元素或其他包含它的元素(元素有display:inline-block)tablecell(元素有display:table-cell,HTML表格单元格默认属性)表格标题(元素有display:table-caption,HTML表格标题默认属性)具有溢出且值不可见的块元素，显示：flow-rootcolumn-span：all应始终创建新的格式化上下文，即使具有column-span：all的元素未包装在多列容器中。
