我的css世界

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情。

传送门——我的第一篇文章: 面试不面试，你都必须得掌握的vue知识

  大家好，我是前端贰货道士。上个月抽空整理了下，融合这本书和大佬关于CSS世界的思考，加上自己的实践、思考及扩展构建了属于。为了这次活动，我可是下了血本了，把这两个月来未更新完的都拿出来凑数了，。文章比较长，相信大家看完定会。

  因为是自己的理解，所以难免会出现错误。如果大家发现了错误，或者有些问题需要交流，在评论区下留言。由于最近，还有很多事情需要处理，剩下的部分内容会在后续抽空更完，在此向大家说声抱歉。有兴趣继续读下去的朋友们可以先，哈哈哈。如果本篇文章对您有帮助，烦请大家一键三连哦, 蟹蟹大家~

• absolute的流体特性：

• absolute的包裹性：

• (重点) absolute元素实现水平垂直居中:

• css知识点(扩展总结):

• 绝对定位脱离文档流的特性(扩展总结)：

  绝对定位元素会脱离文档流，不占据其他文档的空间，可以将其看作是位于平行于文档流的上方空间。如果元素设置了绝对定位，且未设置、、、的值，它就会按照结构有序排列，且悬浮于页面上方；如果元素设置了绝对定位，且设置了上下左右的值，则根据定位的位置进行布局。文档流的左上角坐标可看作是，因此可以使用、、、进行绝对定位:

• absolute和overflow(重点)：

  overflow: hidden与绝对定位元素之间的花火：如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow无法对absolute元素进行裁切。

  (重点) 如果父级没有设置相对定位，则绝对定位的元素不会受父级中overflow的auto和scroll属性影响，即使绝对定位元素宽高大于overflow元素，也不会出现滚动条。利用绝对定位的这个特性，可以实现将元素固定到顶部的效果，且该元素不会随着滚动条的滚动而滚动。如果有对父级设置相对定位，并设置oveflow：auto，则绝对定位的图片宽高会跟随父级的宽度(整个容器的宽度减去滚动条的宽度)进行等比例缩放，并出现如下图所示的滚动条。

                

• (重点) 内联元素无法设置宽高，它的宽高是由内容文字撑开的。且因为其默认是水平排列的，因此对于和, 它只对水平方向设置的值有效，对垂直方向设置的值无效。而设置了绝对定位的内联元素，会转换为块级元素，或者直接将其转换为行内块元素或者块级元素，才可以设置宽高。

• (重点) clip属性与绝对定位/固定定位元素的爱恨情仇

    只在和元素上生效, 对其他元素无效, 因此必须与或者元素搭配使用。

    最佳可访问隐藏属性的应用：

    指的是虽然内容肉眼看不见，但是其辅助功能却能够识别。举个例子，我们需要用到一个图标，为了更好的以及无障碍识别，我们一般会使用标签写上网站的名称，

    如果要隐藏这几个字，通常有如下五种做法：

    (1) 使用或者进行隐藏；

    (2) 使用缩进文字；

    (3) 使用和，可以将这个封装为公共；

    (4) 使用,文本框依旧在html中，可被用户选择到，需要取消浏览器的默认事

      件，操作麻烦，故不推荐；

    (5) ;

• (重点)绝对定位元素与包含块之间的传奇故事：

     在的世界里，元素的大小和定位计算一直都受的影响。普通元素的一般是他的，也就是你设置为，那么指的是相对于进行。

     (1)被称作,尺寸是;

     (2) 对于的元素，其由其决定;

     (3) 对于的元素，其为;

     (4) 对于的元素，其由决定。

• 在父容器有padding的情况下，使用border代替top和left进行绝对定位(扩展总结):

(1) 父容器使用做，子容器采取进行绝对定位：

(2) 父容器使用，并采取给和赋予和父容器相同值的方式进行绝对定位：

• (重点) 基于进行定位，不会影响其它元素的页面布局，较高，同时元素的的百分比值也是基于。相对定位还有一个是，。当同侧都有值时，只保留。因此对于块级元素使用只能做到, 无法。而基于祖先第一个有定位的元素()(当找不到该元素时，则以页面根元素为基准)进行定位。
• 具有(自适应性)，而具有(默认一行)。使用布局时，可以对某个包裹器下的容器或者单独对这个容器下的文本进行处理。
• 的宽高是基于进行计算的。

• 巧用dom上的自定义属性(自定义名称)配合content：attr属性生成内容

• 使用content进行计数

          

          

• 利用counters()嵌套计数实现目录结构

• display为none的元素其实可以通过label for id的方式进行点击

1. 会影响的过渡动画效果，而则不会；
2. 会影响到计数值，原先计算为3的列表会变为2.

• display：none与visibility: hidden的区别

            

            

• border的颜色可以省略。在省略的情况下，边框颜色与这个元素对应类上的color相同

默认样式：

hover样式：

• (重点)border-box在块级元素上的特例

  默认的值是，我们都知道使用可以消除对盒子宽度带来的影响。但有一种情况例外，那就是当的值足够大时。比如的值大于的值时，就会以的总宽度作为盒子的宽度。

                

• 内联元素在padding上的应用：增加文字点击区域

  会同时影响的水平和垂直方向，的值不能为负数，的百分比无论在或者是方向上，都是基于父容器的进行计算的。

• (重点) 清除浮动的方式及BFC

  需要特别注意，因为只生效，所以父级清除浮动添加的伪元素必须得是块级元素。默认的伪元素属于行内元素，且必须要设置content属性。此外的是，是无法的。

• (重点) margin的合并与坍塌

   margin与BFC的碰撞

   margin合并与塌陷的解决方案

   注意事项：

• 使用margin: auto分配剩余空间

• (重点) 块级元素的水平垂直居中(margin：auto管理容器的剩余空间)

  扩展(重点)：块级元素使用不能垂直居中: 和都为的时候，则表示他们的值相等，值得计算为剩余空间的一半，所以会水平居中。而当和为的时候，则表示他们的值是0，所以无法完成垂直方向的居中。

• 对图标设置vertical-align: middle或者height: 1ex(相对于当前字体的x-height长度，也就是字母X的高度)可以实现文字和图标的居中对齐

• (重点) vertical-align可以设置数值，而且能支持负值。当vertical-align的值为0时，表现为vertical-align:baseline，即和X的底部对齐。通过这个特性，我们可以修改vertical-align的值进行对齐。而vertical-align百分比的计算规则是依据line-height的大小计算得来的。

• 内联元素中存在的行框盒子的高度只与line-height有关，由这一行内联元素最大的line-height值所决定，line-height的计算公式是 line-height = font-size + 上半行距 + 下半行距

• line-height只能间接影响块级元素的高度，任何直接包含在块容器元素内（而不是内联元素内）的文本都必须被视为匿名内联元素。匿名内联元素会继承父容器的line-height，生成行框盒子。每一行文本就是一个行框盒子，从而撑开块级元素的高度。

• (重点) 的属性值：的默认值是, 它支持数值，百分比和具体长度值。数值和百分比值的计算方式是完全相同的，都是font-size * 长度/百分比，代表字体大小的倍数，向下取整。比如14 * 1.4  = 19.6 = 19px，注意不是四舍五入，是向下取整的。但是在这两种方法的取舍上，我们通常会使用数值，这是由于它们的继承方式不同导致。使用数值的方法：本身的font-size * 数值，使用百分比的方法：继承来的line-height * 百分比。

• (重点) 幽灵空白节点的产生及解决方案：

     a. 产生：

     (1) : 也只在最后一行会产生；

     (2) ： 会产生；

     b. 解决：

     1. 给包裹元素添加, 再重新设置即可。

          

  元素似乎受到的影响处于容器中的位置，那么真的可以影响块元素吗？答案是的。影响的依旧是，只是这个内联元素是你看不到。由于标签原来是个内联元素，因此在该元素前面生成了一个，这个节点默认是个，受到了的感化，跑到了div的中间，虽然不占位置，但占据了一个看不见的空间，而这个看不见的空间对后面的元素产生了影响，这个就乖乖的跟在了。因此元素并不是直接和发生关系！

  前文已经提及过，固定定位的是，因此它的也是根据进行定位的。

         

  (重点) 使用固定定位fixed做遮罩：

  1. 需要提供一个的和

  (重点) 不受控制的fixed元素: 当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。

• ex、em与rem:

    (1) 是字母的高度，的值越大，越大;

    (2) 和有关，但这个单位受的影响，很不稳定。

                  

= 2 * 浏览器默认的 = 2 * 16px =

= 1 * =

            

    (3) : 移动端常用方案，只和的大小有关。

• font-size的冷门属性:

    (1) 相对当前元素的进行计算，表示比大一点，

表示比小一点，分别对应和标签

    (2) 受(非的字体大小)影响, 有非常大，很大，大，

(medium)，小，很小，非常小这种关键字。，不同浏览器文字大小不一，不推荐使用。

• letter-spacing用于调整字符间距，word-spacing用于调整空格间隙
• white-space用法解析：

        

• text-transform: uppercase/lowercase, 这个属性主要用于控制字符的大小写，会自动转换为大/小写，text-align: justify用于控制两端对齐。

• 浮动元素的参考物体：

  。如果没有可以参考的行框盒子，浮动元素自带一个可以参考的(是中的一个，也是一个)。

                

                

                

• 清浮动：浮动真的被清除了吗(注意父容器高度)？

  使用清除浮动，其实并未清除浮动，因为浮动元素还在。那么到底做了什么呢? 元素盒子的边不能和前面的浮动元素相邻， 这也是为什么我们清除浮动伪元素使用而不是的原因。并没有改变任何浮动元素的特性，浮动元素依旧是那个浮动元素，不管你清不清，他还是在那边，浮着。

  当发现组件的样式无法穿透时，需要考虑当前组件是否和页面组件处于同一层级。如果是处于同一层级，使用组件自带的给类名，从而达到修改样式的目的。

  效果如上所示：

  效果如下所示：

  效果如下所示：

  效果如下所示：

  属性只在中生效,根据的大小进行排序。值小的在前方显示，值大的在后方显示。

  描述的是兄弟节点，如果前面的类，描述的不是兄弟节点，则不会生效。 如果中的模板循环了多个父级，然后在父级下，嵌套了多个子节点, 分别对应类， , 。此时, 多个就不为兄弟节点，而多个父级才是兄弟节点。

              

              

  第三个下的按钮布局:

  打开调试工具，选中当前需要调试的。选中，为当前需要或者的元素选中和样式，就可以愉快地调整样式啦。

     

  话不多说，先上效果图：

• 基础版：全站置灰

• 进阶版：首页置灰，翻页恢复样式

  在讨论这个之前，有需要明细：

    a. 与的比较：

    (1) ：该属性将模糊或颜色偏移等图形效果应用于元素。

    (2) ： 该属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

效果浏览:

    b. 属性：该属性只用于中，不支持该属性

    c. : 这个属性很有趣，被赋予该属性的元素就像透明白纸，看得见却摸不着。如果一个元素添加了这个属性，那么该元素上的所有事件都无效，常用于上，使得被遮罩覆盖的元素可以操作。

具体实现：

效果浏览：

  

• 全局引入的要注意引入顺序，样式表的顺序会影响样式的优先级。通常来说，应该先引入变量文件，然后再引入其他样式文件，以确保变量在其他样式文件中可以被正确地使用。
• 假设在全局文件中同时引入了、、、四个文件。虽然其他文件都能识别到在文件中定义的变量，并且在其他文件中定义的与这些变量关联的类也能够全局使用，但是在其他文件中却无法引入并识别这些变量。这是因为变量只有在编译为后才会被解析和识别，而中的全局是在编译之前就被加载的。
• 为解决这个问题，我们可以使用中针对的配置。这个配置相当于在每个文件中都添加该配置下的所有文件。此时，我们可以在中识别并使用定义在全局的变量。同时，需要注意的一点是，变量也是有作用域的。在一个文件中，在作用域下定义的变量只能在该局部作用域下使用，在全局作用域下定义的变量只能在该全局作用域下使用。
• 那么问题来了，既然这么香，为什么不将所有的文件都配置到这里面呢？前文提及，由于的机制，会为每个文件都添加相应的。如果文件很大，文件很多，会导致编译时间过长等各类严重影响性能的问题发生。为此，虽好，但只建议在这个配置下引入一些需要全局使用的变量。
• 中引入的样式相当于样式，而在中引入的样式，相当于全局样式(非)

  表示一个选择器，用于选择包含这个类名的 元素，并且这些元素的属性中必须包含这个类名。

  为指定属性，添加类名即可，比如。以下是效果：

  有布局的前提下，设置属性与上述截图结果一致。设置了属性的元素，具有更高的层级。对于上述情况，浅猜一波浏览器的渲染机制: 浏览器的渲染机制犹如画布一样，层级越低的越先被描绘。 又因为我们能看到背景颜色上的文字信息，所以背景颜色在下层，文字信息在上层。因此，浏览器是先渲染背景颜色，再渲染文字信息。且相比于层级较高的背景颜色和文字信息，层级较低的背景颜色和文字信息先被渲染。

  在中存在两种模型：和(默认)。的高度包含、和文本的内容，而的高度是不包括和的值的。

在中：

需要在原有项目的基础上，适配在各种屏幕上(包括宽度)的样式。

解决方案：

1. 假定提供的稿件宽度是，前端需要对提供的稿件进行一比一还原；
2. 我们可以建立和之间的关系, 把视为，那么。 如果设计稿上某个元素的宽度为, 那么将它换算得到的结果将会是。我们在布局时，严格按照设计稿提供的元素大小，只不过需要将它转换为。而对于这一过程，我们可以借助下文的方法实现；
3. 不同屏幕下的元素显示势必不会那么完美，但是我们可以通过媒体查询，在不同分辨率的屏幕下进行适配，这样就可以解决问题。

方法封装：

• 方法使用：

• sass在线调试