FrankKai.github.io 我不知道的CSS，你知道吗？

经历过几次面试后，才深知精通css对于前端开发的重要性，这个issue将集中针对css展开进攻，提升自己的薄弱的css基础。

ex是什么？
ch是什么？
resolution是什么？
不要用!important
子元素浮动导致父元素塌陷怎么处理？
::placeholder是什么意思？
:fullscreen是什么意思？
说一下position的区别
内容两行展示，多余文字显示省略号
Edge浏览器不生效word-break: break-word;
@charset是什么？
继承属性(inheritable properties)和非继承属性(non-inherited properties)
word-break的break-all和break-word的区别是什么
overflow:auto与overflow:scroll的区别？
rem，em，vh，vw，vmin，vmax
文字截断换行
匹配后3个child div

参考资料：

《CSS世界》
MDN
CSS规范

Feb 09 '18 06:02 FrankKai

1.ex是什么？ 这是一个相对长度单位，相对谁呢？相对的是"x"，x指的是英文小写字母的"爱克斯"，而不是拼音里的"西"。就是说1ex就等于一个英文字母"x"的长度，那么一个"x"的长度，也就是1ex等于多少呢？是个确切的数字吗？是因字体而异的，在许多字体中1ex ≈ 0.5em。

chrome64: 8.64px firefox57: 8.6333px ie11: 7.13px edge41: 7.13px

下面是默认字体的1ex的高度，如果把浏览器字体都改为“Microsoft YaHei”，那么1ex就约等于8.6px。思考：暂时没有想到好的使用场景，如果是需要做一些相对当前使用字体的属性值的计算，可以去使用ex。代码：

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <title>ex是什么？</title>
        <style>
            html{font-family:"Microsoft YaHei"}
            h1{margin:10px 0;font-size:16px;}
            .x{overflow:hidden;height:1ex;background:#aaa;}
        </style>
    </head>
    <body>
        <h1>定义一条与字母x高度相同的线：</h1>
        <div>xxxx</div>
        <div class="x"></div>
    </body>
</html>

Feb 09 '18 07:02 FrankKai

2.ch是什么? 现在已经有了垂直方向的相对长度单位ex了，那么水平方向有没有呢？当然是有的，ch就是这样一个水平方向的相对长度单位，它的大小等于当前字体的"0"（Unicode：U+0030）的宽度，微软雅黑字体的“0”的宽度为9.375px，也就是1ch ≈9.375px。思考：暂时没有想到好的使用场景，如果是需要做一些水平方向的相对当前使用字体的属性值的计算，可以去使用ch。代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ch是什么？</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html{
            /* font-size: 12px; */
            font-family: "Microsoft YaHei"
        }
        .traffic-light{
            height: 1rem;
            width: 1ch;
            background: rgba(255,0,0,1);
        }
    </style>
</head>
<body>
    <div class="traffic-light">
        0
    </div>
</body>
</html>

Feb 09 '18 09:02 FrankKai

3.resolution是什么？ 这是css中的数据类型，在媒体查询时用来描述一个分辨率。在屏幕上，与CSS中的英尺，厘米，或者像素有关，而与物理单位无关。常见单位：dpi（dots per inch） dpcm（dots per cm） dppx（dots per px）。转换关系： 1英尺等于2.53厘米，所以1dpcm ≈ 2.54dpi。 css中1in:1px = 1:96，所以1dppx = 96dpi。例子：各种分辨率下的1像素的直线。

<div class="hairline-border">text</div>
.hairline-border {
  box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .hairline-border {
    box-shadow: 0 0 0 0.25px;
  }
}

Mar 05 '18 05:03 FrankKai

4.不要用!important demo地址：http://jsbin.com/wakequje/1/edit?html,css,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>!important</title>
</head>
<body>
<div class="foo">
  Lorem <span class="bar">ipsum</span> dolor sit amet…
</div>
</body>
</html>

html {
  font: 2em/1.5 sans-serif;
}

.foo .bar {
  color: red;
}

.bar.bar.bar.bar.bar.bar.bar.bar{
  color: green; 
}

不提倡的写法：

.bar{
  color: green !important;
}

MDN优质资料：优先级

使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则，使得调试找bug变得更加困难了。

一些比!important更好的方法： 1.更好地利用css级联关系 2.增加元素权重，增加更详细的父级选择器 3.当没有其他可以选择的父选择器时，重复多次选择自身增加权重（此comment的原因所在）

其实只要写成

.bar.bar{
  color: green; 
}

就好了，多写几个.bar是为了提升代码可读性。

Mar 08 '18 08:03 FrankKai

5.子元素浮动导致父元素塌陷怎么处理？

overflow:hidden;

or

display:inline-block;

为父元素添加overflow:hidden(常用)或者是display:inline-block（常用）。除此之外，也可以是auto、scroll; table-cell、table-caption、inline-block。或者position的值不为relative或static，或者float的值不为none，或者是根元素。

本质上，这是激活了元素的BFC，所谓BFC，其实就是Block Format Context，如果一个元素具有BFC，那么内部子元素无论有什么骚操作，无论是float,absolute,fixed,z-index等等等等，都不会对外部的元素有任何影响。

本质上大家最常用的clear:both，也是为当前元素激活了BFC。

除此之外，BFC还可以去除margin重叠。

题外话：随着浏览器厂商对flex，grid兼容性的进一步支持，BFC依旧很重要，哈哈。

Apr 17 '18 09:04 FrankKai

6.::placeholder是什么意思？ 这是一个实验性的css技术，这个css伪元素代表这form元素的placeholder的文字内容。只有适用于:: first-line伪元素的CSS属性的子集可以在其选择器中使用:: placeholder的规则中使用。

<input placeholder="Type something here!">

input::placeholder {
    color: red;
    font-size: 1.2em;
    font-style: italic;
}

May 07 '18 02:05 FrankKai

7.:fullscreen是什么意思？ 这是一个实验性的技术。这个:fullscreen伪元素会使得元素在浏览器的全屏模式下去显示。

那么如何触发浏览器的全屏模式呢？

我们来看一个

<video controls id="myvideo">
    <source src="somevideo.webm"></source>
    <source src="somevideo.mp4"></source>
</video>

我们可以使得视频通过如下方式进入全屏模式：

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

再来看个普通标签的例子：

<div id="fullscreen">
    <h1>:fullscreen Demo</h1>
    <p>This text will become big and red when the browser is in fullscreen mode.</p>
    <button id="fullscreen-button">Enter Fullscreen</button>
</div>

<script>
var fullscreenButton = document.getElementById("fullscreen-button");
var fullscreenDiv    = document.getElementById("fullscreen");
var fullscreenFunc   = fullscreenDiv.requestFullscreen;
if (!fullscreenFunc) {
     ['mozRequestFullScreen', 'msRequestFullscreen','webkitRequestFullScreen'].forEach(function (req) {
        fullscreenFunc = fullscreenFunc || fullscreenDiv[req];
     });
}  
function enterFullscreen() {
    fullscreenFunc.call(fullscreenDiv);
} 
fullscreenButton.addEventListener('click', enterFullscreen);
</script>

普通模式下是这样：很普通，:fullscreen伪元素未激活。全屏模式下是这样：很丰满，fullscreen伪元素的被激活。

May 07 '18 03:05 FrankKai

8.说一下position的区别

值集合：static relative absolute fixed sticky 关键词：正常文档流占用页面空间参照元素偏移副作用 z-index堆叠上下文 margin边缘重叠

static

在正常文档流中
占用页面layout空间
top right bottom left不生效
无副作用
z-index属性不生效

relative

在正常文档流中
页面上的空间与static一致
根据top right bottom left 参考自身进行偏移
偏移不影响其他元素的位置
当z-index值不为auto时，这个值创建了一个新的堆叠上下文
对table-*-group，table-row，table-column，table-cell和table-caption的影响未定义。

absolute

从正常文档流移除
不占用当前页面布局空间
根据top right bottom left，参考最近的已定位的上级元素偏移，如果没有，则向上查找到最高层级的初始化包含块
偏移不影响其他元素的位置
当z-index不为auto时，创建新的堆叠上下文
绝对定位的盒子不会与其他元素发生边缘重叠

fixed

从正常文档流移除
不占用当前页面布局空间
根据top right bottom left，参考viewport偏移；当它的上级元素中有transform，perspective，filter属性，这个元素被作为参考的对象。
偏移不影响其他元素的位置
直接创建一个新的堆叠上下文 6.在打印文档中，元素在每一页的相同位置

sticky (实验性)

在正常文档流中
不占用当前页面布局空间
根据top right bottom left ，参考最近的scrolling祖先，包含块以及table类元素定位，或者是最近的粘性机制元素。注意粘性元素与最近的有滚动机制的元素粘在一起。(当overflow值为hidden,scroll,auto或者是overlay)，即使在上级元素不是最近的祖先元素。
偏移不影响其他元素位置
直接创建新的堆叠上下文

通过关键词记忆的方式，对position区别记忆和理解的方式更佳。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/position

May 21 '18 01:05 FrankKai

9.内容两行展示，多余文字显示省略号

Chrome官方对于多行文本截断的说明：https://chromestatus.com/feature/5680142707851264
截断测试：firefox77上测试生效；基于Chromium开发的Edge83也测试生效
如果在ie上无法使用-webkit-line-clamp，可以通过clamp.js实现截断效果: line-clamp
有些情况需要结合overflow:hidden;text-overflow:ellipsis一起实现截断

.line-clamp {
     display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}

如何解决"打包后-webkit-box-orient:vertical;消失"问题？注释掉autoprefixer对它的处理。

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

或者

/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*! autoprefixer: off */

Jul 03 '18 08:07 FrankKai

10. Edge浏览器不生效`word-break: break-word;`

需要使用word-break: break-all替代，这对于Edge和Chrome均适用。

Sep 20 '18 13:09 FrankKai

11.@charset是什么？

指明样式表中的字符编码格式，必须位于样式文件最前面。
由于它不是@nested statement，所以不能再contiditional group at-rules中生效。
多个@charset定义时，第一个设置的生效。

拓展知识点

at-rule是什么？

at-rule是一个指明CSS如何表现的CSS语句。语法：@IDENTIFIER(RULE)

@chatset-定义样式表使用的字符集
@import-告诉CSS引擎包括其他的样式表
@namespace-告诉CSS引擎所有的内容必须带XML命名空间的前缀
Nested at-rules-一个嵌套语句的子集，可以用来作为样式表的语句以及条件组规则：
- @media 媒体查询
- @supports 在支持某个css属性的条件下，运用以下规则
- @document、@page、@font-face、@keyframes、@viewport、@counter-style、@font-feature-values

条件组规则是什么？

每个at-rule都有自己的规则。但是他们可以被组合到一个叫做conditional group rules的特殊目录下。三个主要的CSS 条件 Level3at-rule规则：

@media
@supports
@document

css-conditional-3是什么？

css条件应用规则的语法。 https://drafts.csswg.org/css-conditional-3/

Apr 13 '19 13:04 FrankKai

12.继承属性(inheritable properties)和非继承属性(non-inherited properties)

在CSS中，继承控制了一个元素属性值没有特别指定时的表现。任何CSS属性都可以查看是否是可继承的。

继承属性

如果一个继承属性没有为元素指定值，这个元素会从父元素获得属性的计算值
只有文档的根元素，才可以获得属性摘要给定的初始值

color是一个典型的继承属性。

p { color: green; }

<p>This paragraph has <em>emphasized text</em> in it.</p>

”emphasized text“也是绿色的，是因为em元素从p元素继承了color的值。所以它没有使用自己本身的初始值。（这个初始值是用于页面没有指定color时用于根元素的。）

非继承属性

当一个非继承属性为一个元素指定时，元素会获得属性的初始值。 border是一个典型的非继承属性。

p { border: medium solid; }

<p>This paragraph has <em>emphasized text</em> in it.</p>

em元素的content不会拥有border（因为border-style的初始值是none。）

提醒

inherit关键字可以指定属性继承，既可以在继承属性上生效，也可以在非继承属性上生效。 可以使用all缩写属性一次性控制所有属性的继承。

font {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}

这会revert font属性的浏览器默认样式，除非有用户css指定。然后2倍font大小并且使字体加粗。

CSS的all属性是什么？

all属性可以重置一个元素的所有属性（除了unicode-bidi和direction）。
可以设置属性为initial值，或者是unset值，或者inherited值，或者是其他样式表的值。

如何查看一个属性是不是可继承的？

查看mdn上的css规则定义，Inherited:yes;Inherited:no。 例如font-size：https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

Dec 30 '19 08:12 FrankKai

13.word-break的break-all和break-word的区别是什么

break-all 不管是不是单词都能break，但是chrome80上不能。
break-word 只在单词处break。

Mar 19 '20 07:03 FrankKai

14.overflow:auto与overflow:scroll的区别？

浏览器在内容溢出时增加滚动条：overflow:auto 。

Desktop browsers provide scrollbars if content overflows.

明确告诉用户这里有滚动条：overflow:scroll。因为scroll的话，滚动条一直在。浏览器总是显示滚动条，不管是否实际剪切了任何内容，以防止滚动条在内容更改时出现或消失。

Browsers always display scrollbars whether or not any content is actually clipped, preventing scrollbars from appearing or disappearing as content changes.

把scroll理解成”scrollBar“的话更好记一些。

Mar 25 '20 07:03 FrankKai

15. rem，em，vh，vw，vmin，vmax

rem 继承root元素的font-size，比如html Represents the font-size of the root element (typically ). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).
em 继承最近的父元素的font-size，隔代也可 Represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.
vh 不用繁琐的从顶部父级继承高度 Equal to 1% of the height of the viewport's initial containing block.
vw 不用繁琐的从顶部父级继承宽度 Equal to 1% of the width of the viewport's initial containing block.
vmin Equal to the smaller of vw and vh.
vmax Equal to the larger of vw and vh.

Apr 28 '20 07:04 FrankKai

文字截断换行

-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
text-overflow: ellipsis;
white-space: pre-wrap;
overflow: hidden;

May 07 '22 09:05 FrankKai

匹配后3个child div

div: nth-last-child( -n + 3) {
  ...
}

Aug 17 '22 08:08 FrankKai

FrankKai.github.io FrankKai.github.io copied to clipboard

我不知道的CSS，你知道吗？

8.说一下position的区别

9.内容两行展示，多余文字显示省略号

10. Edge浏览器不生效word-break: break-word;

11.@charset是什么？

拓展知识点

at-rule是什么？

条件组规则是什么？

css-conditional-3是什么？

12.继承属性(inheritable properties)和非继承属性(non-inherited properties)

继承属性

非继承属性

提醒

CSS的all属性是什么？

如何查看一个属性是不是可继承的？

13.word-break的break-all和break-word的区别是什么

14.overflow:auto与overflow:scroll的区别？

15. rem，em，vh，vw，vmin，vmax

文字截断换行

匹配后3个child div

FrankKai.github.io
FrankKai.github.io copied to clipboard

10. Edge浏览器不生效`word-break: break-word;`