作者：徐小夕 来源：趣谈前端

问题学习法：带着问题去学习，有利于集中注意力，目的明确，这既是有意学习的要求，也是发现学习的必要条件。心理学家把注意分为无意注意与有意注意两种。有意注意要求预先有自觉的目的，必要时需经过意志努力，主动地对一定的事物发生注意。它表明人的心理活动的主体性和积极性。问题学习法就是强调有意注意有关解决问题的信息，使学习有了明确的指向性，从而提高学习效率。

在介绍完问题学习法之后，进入我们今天的主题，接下来我会介绍css的一些底层的知识和比较诡异的现象，借此来让大家对css有更深入的理解。

1.首选最小宽度–实现复杂图形效果

• 在css中，图片和文字的权重远大于布局，因此当width:0时表现出来的宽度就是“首选最小宽度”。中文的最小宽度为每个汉字的宽度，西方文字取决于连续的英文字符单元。

因此，我们可以根据这个特性，去实现一些复杂的图形，如下：

当鼠标经过时，变成了下面的样子：

我们会发现，当容器宽度设置为0后，由于首选宽度的影响，出现了基于文字空间的形状。

2.子元素宽度设为100%时的奇怪现象原理探究

• 父元素的宽度 = 图片宽度 + 文字内容宽度
• 浏览器渲染原理：先下载文档内容，加载头部样式资源，然后按从上到下、自外而内的顺序渲染dom内容。本例的现象产生的原因就是：当渲染到父元素时，子元素的width:100%并没有渲染，宽度就是图片加文字内容的宽度；等渲染到文字这个子元素的时候，父元素的宽度已经固定，此时的width:100%就是以固定好的父元素的宽度，宽度不够只能溢出。

理论上父元素宽度应该是子元素宽度之和，但是却出现了上图的现象，原因归根就在于浏览器渲染的顺序：自外而内，这点十分重要。

• 知识点：绝对定位的宽高百分比是基于padding-box的，而非绝对定位的宽高百分比是基于content-box

• * 1.设置显示的高度值

要想实现如上图所示的展开收起动画，就可以使用max-height/min-height：

1. 内容区域：可以理解为文本选中的背景色区域（重点）

2. 内联盒子：内联标签或者纯文本

3. 行框盒子：由内联盒子组成的一行，每一行就是一个行框盒子

4. 包含盒子：由行框盒子组成的盒子 幽灵空白节点：在HTML5文档声明中，内联元素的解析和渲染表现就像每个行框盒子的前面有一个空白节点一样。如下案例所示：

1.在web中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包含边框）为300*150，如video，iframe,canvas等，少数为0，如img，而表单元素的替换尺寸和浏览器自身有关。

3.当图片的src属性缺省时，图片不会有任何请求，是最高效的实现方式，如下展示的是使用此方式的图片占位代码（对于firefox浏览器，src缺省的img是一个普通的内联元素，宽高设置无效）：

4.计数器属性---纯css实现计数器效果

2.对于内联元素，padding对视觉层和布局层都会有影响，如果父元素设置overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条，否则如果父元素不设置设置overflow，只会在垂直方向上发生重叠，不会影响布局:

3.padding的实际应用(具体实现可自行思考)

• 1.增加链接或按钮的点击区域的大小2.利用内联元素的padding实现高度可控的分割线3.用内联元素实现瞄点定位距离

4.利用padding百分比值实现等比例缩放图片效果:

** 注：内联元素的垂直padding会让幽灵空白节点显现,此时可考虑设置font-size:0

其本质区别在于：chrome是子元素超过父元素content box尺寸触发滚动条显示，而IE和Firefox浏览器是超过padding box尺寸时触发滚动条显示

• 块级元素，但不包含浮动和绝对定位元素
• 在默认文档流下只出现在垂直方向

margin合并的三种场景

• 父级和第一个/最后一个子元素

* 解决方案： 父级设置为块级格式化上下文元素

空块级元素margin合并

“正正取大值”，”正负值相加”，”负负最负值”

1. 如果一侧定值，一侧auto，则auto为剩余空间大小

2. 如果两侧均是auto，则平分剩余空间

3. 触发margin:auto计算的前提：width或height为定值时，元素是具有自动填充特性的

2. 对于内联替换元素，垂直margin有效，并且没有margin合并问题，所以永远不会发生margin合并

3. 内联特性导致margin失效：一个容器里面有一个图片，图片设置margin-top,随着margin-top负值越来越大，达到某一具体负值时，图片将不再往上偏移

六.字母x与css中的基线

1. 基线 字母x的下边缘

3. ex：ex指小写字母x的高度，是相对单位

内联元素设置对齐方式时，是基于最前面的内联元素的基线，然后根据自己的vertical-align来调整对齐的

七.BFC–块级格式化上下文

1.表现: 元素内部的布局变化不会影响外部的元素.所以不会出现margin合并,可用来清除浮动的影响.

8.让页面滚动条不出现晃动的方法:

9.多行文本溢出显示省略号的css方法:

1.relative的定位位移是相对于自身的，如果left/top/right/bottom的值为百分比单位，则计算尺寸是基于父元素

2.如果left/right 或top/bottom这些对立属性同时出现时，只有一个方向的属性会生效，优先级与文档流的顺序有关，默认的文档流是自上而下，从左到右的，所以top优先级高于bottom,left优先级高于right

• 尽量不使用relative,可以采用无依赖绝对定位解决某些问题
• 如果一定要使用relative,则relative务必最小化(最小包含区域) –为了避免层级覆盖等问题

• 定位元素的默认z-index:auto;此时和普通元素一样，一旦z-index设置为任意数值，就创建了一个层叠上下文，顺序为：
• css3新属性的层叠上下文：

2. ie8下的多背景隐藏

好啦，关于css的知识还有很多，有些问题也很难通过表象去解决，这个时候，让你脱颖而出的就是你对代码底层更深入的理解了。

特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。