css中那些须要组合、互斥和特别注意的属性

css学习

不多有人会很系统的把css学习一遍，大部分都是遍历下。而后而后记住经常使用的，不经常使用的也要回查找，前端人不少都认同要学好css真的不很难，这里记录下不少场景下使用css须要注意的地方，一样，开头页列出一些学习css的知识点：

• 基本属性[定位、盒子模型、文本、背景。。。]
• 动画属性[渐变、变化、过渡、动画]
• 堆叠和块格式化上下文
• 布局[table、flex、grid]
• 选择符[权重、包含、子选择、相邻、兄弟、属性选择、伪类、伪元素]
• 媒体查询

固然远不止这些，还有什么不一样应用场景有不一样的样式、厂商前缀、适配等各类让人欲生欲死的问题存在。当自认为能够游刃有余的时候，能够深刻学习如下：

• sass
• css魔法[一本脑洞大开的css书籍]

一些须要注意的点

在平时书写css的时候须要注意些一些属性的依赖、相关甚至相斥的关系，如下是一些暂时常见的一些坑；

float

float是使用比较平凡的一个布局属性，须要注意：

• float在绝对定位和display为none时不生效。
• float:right的时候，第一个绘制的元素在最右边，
• 子元素的float属性都是非none时，父元素不会被撑开，浮动元素脱离了正常的流式布局，须要在父元素内清除浮动，可使用::after来添加伪元素，为伪元素设置clear:both便可。

z-index

z-index也是css种较为关键的属性，通常而言，只要有弹窗的地方，z-index就会出现，在目前的单页应用流行的时候，弹窗是必不可少的，也是影响层叠上下文的关键因子；

两铁律：

1. z-index只能在position属性值为relative或absolute或fixed的元素上有效。【flex子项除外】
2. 子元素的层叠顺序不可能超过父级，若是父级层叠顺序低，子元素再高也不会超过父级同级可是层叠顺序高的的其余元素

层叠上下文

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

正常布局的时候，整个html就是一个层叠上下文，会根据元素绘制的前后顺序来展现，重叠的时候须要根据绘制顺序来进行遮盖，除了在顶层节点会造成层叠上下文时还有下面这些操做会造成层叠上下文：

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
• opacity 属性值小于 1 的元素（参考 the specification for opacity），
• transform 属性值不为 "none"的元素，
• mix-blend-mode 属性值不为 "normal"的元素，
• filter值不为“none”的元素，
• perspective值不为“none”的元素，
• isolation 属性被设置为 "isolate"的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即使你没有直接指定这些属性的值
• -webkit-overflow-scrolling 属性被设置 "touch"的元素
  既然造成了新的层叠上下文，那么这个上下文中的层叠顺序如何肯定？

每一个层叠上下文的绘制顺序

在每个层叠上下文中，如下层次按照后来居上的规则绘制

• 元素的background和borders
• 拥有负堆叠层级（negative stack levels）的子层叠上下文（child stacking contexts）
• 在文档流中的（in-flow），非行内级的（non-inline-level），非定位（non-positioned）的后代元素
• 非定位的浮动元素
• 在文档流中的（in-flow），行内级的（inline-level），非定位（non-positioned）的后代元素，包括行内块级元素（inline blocks）和行内表格元素（inline tables）
• 堆叠层级为 0 的子堆叠上下文（child stacking contexts）和堆叠层级为 0 的定位的后代元素
• 堆叠层级为正的子堆叠上下文
  

重复一下这两铁律：

1. z-index只能在position属性值为relative或absolute或fixed的元素上有效。【flex子项除外】
2. 子元素的层叠顺序不可能超过父级，若是父级层叠顺序低，子元素再高也不会超过父级同级可是层叠顺序高的的其余元素

transformZ和z-index最好不要一块儿使用。

text-overflow

常常会在一个行内标题等地方，文本若是过多的话但愿使用...来隐藏，那么text-overflow就是必须得来；

取值：
clip：当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis：当内联内容溢出块容器时，将溢出部分替换为（...）。
要使得 <' text-overflow '> 属性生效，块容器必须显式定义 <' overflow '> 为非visible值，同时显式或者隐式的定义 <' width '> 为非auto值， <' white-space '> 为nowrap值。

overflow:hidden;
width:200px;
white-space:nowrap;
text-overflow:ellipsis;

超出不隐藏、或者能够换行或者宽带能够自动延伸的话，均不会出现溢出，因此text-overflow会失效

flex

在父级元素是display:flex的时候，子元素的不少布局就失效了，float、clear、vertical-align这三个属性在子元素上不起做用，须要使用flex相关的布局来完成。

伪元素

伪元素其实就是一个子元素，div::after是在div的最后面添加了一个元素，元素就是::after，因此 须要注意在自闭合标签后面不能够添加伪元素，由于自闭合标签不能有子元素，好比img、br这样的标签。

伪类

伪类其实就是一个相似class的选择器，在使用的时候注意，:last-child、:first-child这样的伪类须要注意，必须是父元素中的第一个子元素被命中才能够，因此使用这类伪类的时候，最好是父元素中只有某一类的元素，不含有其余的元素。

position

在绝对定位的时候，须要注意参考元素是离自身最近的定位祖先元素，

absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，若是没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其余任何margin折叠。

当position的值为非static时，其层叠级别经过z-index属性定义。

绝对定位的元素，在top，right，bottom，left属性未设置时，会紧随在其前面的兄弟元素以后，但在位置上不影响常规流中的任何元素。用这个特性你或许会干这样的事

visibility

visibility元素是还在的，只是看不见，位置仍是要占住

background

background是图片的时候，最好加上background-size,否则容易变形或这个平铺

line-height

line-height不少时候是撑开父级元素的关键，能够结合子元素的居中对齐vertical-align

table

配套使用：table table-cell

BFC（block formatting context）

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，而且有一套渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。最多见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，而且与这个区域外部绝不相干。
bfc布局规则

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每一个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算
  bfc触发
• 根元素或其它包含它的元素
• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素具备 position 为 absolute 或 fixed)
• 内联块 (元素具备 display: inline-block)
• 表格单元格 (元素具备 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具备 display: table-caption, HTML表格标题默认属性)
• 具备overflow 且值不是 visible 的块元素，
• display: flow-root
• column-span: all 应当老是会建立一个新的格式化上下文，即使具备 column-span: all 的元素并不被包裹在一个多列容器中。