qq_43293207的博客

复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，–main-text-color 会比 #00ff00 更易理解，尤其是这个颜色值在其他上下文中也被使用到。在CSS自定义属性出现之前，CSS变量只能在一些CSS预处理器中使用，如less，scss等。

层叠上下文，英文称作 stacking context，是 HTML 中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在 z 轴上就有一定优先级层叠水平，英文称作 stacking level，决定了同一个层叠上下文中元素在 z 轴上的显示顺序。不要把层叠水平和 CSS 的 z-index 属性混为一谈。尽管某些情况下 z-index 确实可以影响层叠水平，但是只限于定位元素以及 flex 盒子的flex item元素；因为所有的元素都存在层叠水平。

1. 什么是FlexBoxFlexBox（”弹性布局”）是CSS3提供的用于布局的一套新属性，这套属性包括针对容器（弹性容器，flex container）和针对其直接子元素（弹性项，flex item）的两类属性FlexBox可以控制弹性项（flex item）的以下方面：大小，基于内容和可用空间流动方向，水平还是垂直，正向还是反向两个轴向的对齐和分布顺序，可覆盖源代码中的顺序flex container默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axi

1. 前置知识在真正讲解vertical-align属性之前，我们需要了解下面一些前置的知识1.1 x-Height在各种内联相关模型中，凡是涉及垂直方向的排版或者对齐的，都离不开最基本的基线（baseline）。例如，line-height 行高的定义就是两基线的间距，vertical-align 的默认值就是基线字母 x 的下边缘（线）就是我们的基线。通俗地讲，x-height 指的就是小写字母 x 的高度，术语描述就是基线和等分线（mean line）（也称作中线，midline）之

1.margin与元素尺寸我们知道，在W3C盒模型下（即box-sizing:content-box）给一个元素设置padding内边距的时候，会改变元素原有的实际尺寸（即使你设置该元素的width属性）。而margin属性虽然其本意为外边距，让人以为只会影响其与其他元素间的距离。实际上，当元素处于“充分利用可用空间”的状态时，margin属性会影响其实际尺寸示例：<div class="container"> <div class="child"></div&g

由于浮动元素的脱离文档流，.box2会忽略浮动元素的原空间（即当其不存在），由因为普通div不设置宽度默认会是父元素宽度。普通的块级元素之间的margin-top和margin-bottom有时会出现margin合并的现象，而浮动元素由于其自身会变成一个BFC（块级格式化上下文），不会影响外部元素，所以不会出现margin重叠问题。此时我们发现：没有设置高度的container元素，其实际高度只由标准文档流的box2元素撑起来了21px，而设置了30px高度的浮动元素由于脱离文档流其高度被忽略了。

注意文章中出现的块级元素包括纯块级和行内块元素，行级元素包括纯行级元素和行内块元素（除非进行了特别说明）1.1 text-align：center应用场景容器元素为块级元素，欲居中元素为行级元素。实现水平居中。<div class="container"> <span class="child">我要居中</span></div> .container{ text-align: center; }

只能用于块级元素。可用的CSS属性为font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height,clear。可用的CSS属性为font,color,background,marin,padding,border,text-decoration,vertical-align,text-transform,line-height,float,clear。

欢迎访问个人博客网站：http://www.zhuxin.club1. 优先级分级按照优先级从高到低排列：1. ! important.foo{ color:red !important}!important是顶级优先级，唯一推荐使用它的场景为忽略JS脚本设置的样式，使js设置样式无效。对于其他场景都没有使用它的理由，切勿滥用2. style属性内联样式<span style="color:red">红色</span>3. ID选择器#foo{ colo

1. 用户行为伪类1.1 :hoverselector:hover 表示匹配鼠标经过的selector选择器元素。应用场景：鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等细节优化：如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用）通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通

格式化上下文Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。格式化上下文（Formatting context） 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系

前言CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性（值可为CSS数值单位，正负决定其方向）则决定了该元素的最终位置。1. static定位position属性的默认值，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。2. relative相对定位基于元素原本的位置进行定位移动。此时 top、right、bottom、left 属性均基于原本的位置进行移动尺寸

dfg

1. 效果展示<style> div{ display: inline-block; background-color: cornflowerblue; }</style><div >我是行内块1</div><div >我是行内块2</div><div >我是行内块3</div>可以看到行内块元素（display:inline-block或默认的行