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

FrankKai · 2018-02-09T06:49:57Z

经历过几次面试后，才深知精通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规范

FrankKai · 2018-02-09T07:04:46Z

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>

FrankKai · 2018-02-09T09:02:53Z

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>

FrankKai · 2018-03-05T05:29:08Z

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;
  }
}

FrankKai · 2018-03-08T08:32:44Z

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是为了提升代码可读性。

FrankKai · 2018-04-17T09:13:04Z

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依旧很重要，哈哈。

FrankKai · 2018-05-07T02:53:27Z

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;
}

FrankKai · 2018-05-07T03:43:02Z

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伪元素的被激活。

FrankKai · 2018-05-21T01:24:39Z

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

FrankKai · 2018-07-03T08:42:39Z

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 */

FrankKai · 2018-09-20T13:29:33Z

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

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

FrankKai · 2019-04-13T13:17:52Z

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规则：

css-conditional-3是什么？

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

FrankKai · 2019-12-30T08:09:58Z

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

FrankKai · 2020-03-19T07:13:15Z

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

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

FrankKai · 2020-03-25T07:21:08Z

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“的话更好记一些。

FrankKai · 2020-04-28T07:52:19Z

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.

FrankKai · 2022-05-07T09:11:26Z

文字截断换行

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

FrankKai · 2022-08-17T08:33:44Z

匹配后3个child div

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

FrankKai closed this as completed Feb 9, 2018

FrankKai reopened this Feb 9, 2018

Repository owner locked and limited conversation to collaborators May 1, 2018

FrankKai closed this as completed May 7, 2018

FrankKai reopened this May 7, 2018

FrankKai added the CSS label Mar 6, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

FrankKai commented Feb 9, 2018 •

edited

FrankKai commented Feb 9, 2018 •

edited

FrankKai commented Feb 9, 2018 •

edited

FrankKai commented Mar 5, 2018

FrankKai commented Mar 8, 2018 •

edited

FrankKai commented Apr 17, 2018 •

edited

FrankKai commented May 7, 2018

FrankKai commented May 7, 2018 •

edited

FrankKai commented May 21, 2018 •

edited

FrankKai commented Jul 3, 2018 •

edited

FrankKai commented Sep 20, 2018 •

edited

FrankKai commented Apr 13, 2019 •

edited

FrankKai commented Dec 30, 2019 •

edited

FrankKai commented Mar 19, 2020 •

edited

FrankKai commented Mar 25, 2020

FrankKai commented Apr 28, 2020 •

edited

FrankKai commented May 7, 2022

FrankKai commented Aug 17, 2022

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

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

Comments

FrankKai commented Feb 9, 2018 • edited

FrankKai commented Feb 9, 2018 • edited

FrankKai commented Feb 9, 2018 • edited

FrankKai commented Mar 5, 2018

FrankKai commented Mar 8, 2018 • edited

FrankKai commented Apr 17, 2018 • edited

FrankKai commented May 7, 2018

FrankKai commented May 7, 2018 • edited

FrankKai commented May 21, 2018 • edited

8.说一下position的区别

FrankKai commented Jul 3, 2018 • edited

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

FrankKai commented Sep 20, 2018 • edited

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

FrankKai commented Apr 13, 2019 • edited

11.@charset是什么？

拓展知识点

at-rule是什么？

条件组规则是什么？

css-conditional-3是什么？

FrankKai commented Dec 30, 2019 • edited

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

继承属性

非继承属性

提醒

CSS的all属性是什么？

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

FrankKai commented Mar 19, 2020 • edited

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

FrankKai commented Mar 25, 2020

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

FrankKai commented Apr 28, 2020 • edited

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

FrankKai commented May 7, 2022

文字截断换行

FrankKai commented Aug 17, 2022

匹配后3个child div

FrankKai commented Feb 9, 2018 •

edited

FrankKai commented Feb 9, 2018 •

edited

FrankKai commented Feb 9, 2018 •

edited

FrankKai commented Mar 8, 2018 •

edited

FrankKai commented Apr 17, 2018 •

edited

FrankKai commented May 7, 2018 •

edited

FrankKai commented May 21, 2018 •

edited

FrankKai commented Jul 3, 2018 •

edited

FrankKai commented Sep 20, 2018 •

edited

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

FrankKai commented Apr 13, 2019 •

edited

FrankKai commented Dec 30, 2019 •

edited

FrankKai commented Mar 19, 2020 •

edited

FrankKai commented Apr 28, 2020 •

edited