2019 年知识总结-css 篇

​ 19年，学习了很多的css的知识，特别是张鑫旭老师的css世界、css选择器世界这两本书真的受益匪浅，以至于颠覆了我对css的认知，不禁感叹 ，css真的太深了；什么样的情况该用什么方式去处理？那种处理方式合理？怎样才能加快浏览器的渲染性能？都没有肯定的答案，这就是css的魅力；除了积累大量的知识外，个人感觉想象力也很重要

在这里整理了一部分，主要是我觉得算比较有用的一些知识点跟技巧

1.user-select: all

user-select 支持哪些属性，点击链接查看

在网页中，可能会遇到这种情况，用户希望便于复制网页中的内容，此属性可以作为增强用户体验写在 css里，只需要单击行为即可选中，也可以作用于table 中

<table>
  <tr>
    <td>我有一头小毛驴</td>
    <td>从来也不骑</td>
    <td>11111</td>
    <td>11111</td>
    <td>11111</td>
  </tr>
</table>

table {
  border: 1px solid;
  width: 400px;
}
td {
  border: 1px solid;
  user-select: all;
}

2.scroll-behavior（让滚动更平滑）

当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，css 属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

支持两个值：

auto //立即滚动，默认值

smooth //平滑滚动

上面是 MDN 上对scroll-behavior的定义，简单解释一下；手动导航：很容易想到的是锚点跳转

CSSOM：例如scrollX、scrollTop、scrollLeft等 Dom 属性发生改变的时候也会受到影响

兼容性：一般，可以作为一个增加用户体验写到需要平滑滚动的容器上，对于不支持的浏览器也不影响

...{scroll-behavior:smooth;}

3.attr()函数

用法: 通过 css 属性获取 html 标签中的类容，attr 的值只能接受字符串，所以目前主要的用途就是提示类容

<div data-tooltip="你是猪">
  你是猪吗？
</div>

div {
  position: relative;
  width: 100px;
}
div:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  width: 200%;
  line-height: 30px;
  left: 100%;
  top: 0;
  border: 1px solid;
}

4.伪类选择器

先区分一下伪类跟伪元素，在 css 规范中，伪元素使用的是两个冒号（::）,伪类是一个

4.1 :empty

选择没有子元素的元素，而且该元素也不包含任何文本节点（包括空格）；在网页中有时候我们希望没有类容就不显示，或者显示其他的样式，之前都是 v-if、条件判断

<p class="text"></p>
<p class="text">此处有文字。。。。。。</p>

.text {
  font-size: 24px;
  border: 1px solid;
  margin-top: 20px;
}
.text:empty {
  display: none;
}

4.2 :focus-within

表示一个元素获得焦点或该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus

<div class="content">
  <input type="text" />
</div>

.content:focus-within {
  background-color: pink;
}

4.3 :valid(实现一个谷歌账号登录框的效果)

:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式，结合required="true"

还有一个相反的选择器 :invalid

<div class="password">
  <input type="password" required="true" />
  <div class="place">输入您的密码</div>
</div>

.password {
  border-radius: 4px;
  color: #202124;
  font-size: 17px;
  border: 1px solid #999;
  display: inline-block;
  padding: 1px;
  position: relative;
}
.password input {
  width: 200px;
  height: 28px;
  outline: none;
  border: none;
  padding: 12px 14px;
}
.password .place {
  background-color: #fff;
  font-size: 16px;
  position: absolute;
  left: 8px;
  top: 15px;
  color: #80868b;
  transition: all 0.2s;
  pointer-events: none;
}
.password input:focus ~ .place {
  top: -10px;
}
.password input:valid ~ .place {
  top: -10px;
}

除了:valid，:placeholder-shown 这个选择器也可以实现这个效果，这个选择器在input或textarea显示placeholder text 的时候生效

另一个适用场景：当输入框的字段为非空的时候显示搜索按钮

pointer-events为none时，任何事件都可以从该容器穿透过去

4.4 :focus-visible

一个比较新的选择器，目前只有谷歌浏览器支持

当元素匹配:focus伪类并且客户端，也就是浏览器的启发式引擎决定焦点应当可见时，:focus-visible伪类将生效

在input、button、textarea等元素使用鼠标点击的时候会有焦点轮廓，一般的处理方式是设置outline: none，但是会把键盘访问时出现的焦点轮廓也隐藏掉，会影响网页的无障碍访问

:focus-visible可以让我们知道元素的聚焦行为到底是鼠标触发还是键盘触发。所以，如果我们希望去除鼠标点击时候的outline轮廓，而保留键盘访问时候的outline轮廓

:focus:not(:focus-visible) {
    outline: 0;
}

5.等高布局

5.1 padding&margin

<div class="wrap">
    <div class="leftbox">leftBoxleftBoxleftBoxleftBoxleftBoxleftBoxleftBoxleftBoxleftBoxleftBoxleftBox</div>
    <div class="right-box">很过分很过分很过分很过分很过分</div>
</div>

.wrap{
    overflow: hidden;
    width: 400px;
}
.wrap div{
    float: left;
    width: 50%;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    word-wrap: break-word;
}
.left-box{
    background-color: pink;
}
.right-box{
    background-color: #476EAF;
}

知识点：padding-bottom会改变元素自身的高度，同时外层盒子的高度也会跟着改变；margin-bottom不会改变元素自身的位置，可以改变外层盒子的高度；父元素需要设置overflow: hidden

5.2 table-cell

它会作为一个表格单元格显示，类似于td、th，表格本身就有等高的特点

兼容性ie8+

回顾一下table-cell,可以说是一个很神奇的属性，为什么这么说，它能解决很多布局问题

1、多列文字垂直居中

2、自适应布局

3、元素垂直居中

5.3 flex

默认值就是等高布局，主要的两个属性

1、flex-direction：定义主轴方向，默认值为row

2、align-item：定义侧轴对齐方式，默认值stretch，元素拉伸以适应容器

5.4 grid

网格布局（跟flex有点类似）

6.nofollow

nofollow 是HTML页面中a标签的属性值。这个标签的意义是告诉搜索引擎"不要追踪此网页上的链接或不要追踪此特定链接"，用于网站seo优化

比如在href值为电话号码的时候

<a href="tel:138888888" rel="nofollow">138888888</a>

7.一个盒子实现三横杠效果

<div class="lines"></div>

.lines{
    width: 60px;
    height: 10px;
    background-color: #000000;
    background-clip: content-box;
    padding: 10px 0;
    border-top: 10px solid;
    border-bottom: 10px solid;
}

知识点：background-clip，该属性有三个值，border-box、padding-box、content-box；

border-box：背景被裁剪到边框盒

padding-box：背景被裁剪到内边距框

content-box：背景被裁剪到内容框

8.垂直居中之伪元素

<div class="vertical-middle">
    <span>你是猪吗</span>
</div>

.vertical-middle{
    height: 400px;
    width: 100%;
    border: 1px solid red;
    font-size: 40px;
}
.vertical-middle::before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.vertical-middle span{
    background-color: #0099FF;
    font-size: 40px;
}

9.border-radius的8个值

border-radius:10px 10px 10px 10px/10px 10px 10px 10px;
/* x轴 上  右  下  左 / y轴 上 右 下 左

有一个很好用的可视化调试网站，border-radius

10.q标签给文本添加前后引号

<q>文字文字文字</q>

q{
    quotes: '"' '"'
}

浏览器节点实际是添加了::before和::after这两个伪元素

11.外部链接css中::seleection为空会导致文本或元素无法选中

.select::selection{}/* 链接导入css */

<div class="select">123456</div>

应该是css中的一个bug，一般不会出现这种情况，注意一下就好

12. margin或padding百分比

当margin或padding设置百分比时，其值是相对于最近的块级父元素的百分比，为什么呢，在css权威指南中的解释：如果是相对于父元素的高度，其高度计算会导致死循环，子元素的高度有可能会改变父元素的高度

具体用处

让盒子的高度等于宽度，并跟随宽度变化

.container{
    background-color: pink;
    width: 100%;
    padding-top: 100%;
}

一点猜想：

元素的高度百分比是相对于父元素的height的，那么高度为什么不会出现死循环，尝试了一下，在父元素高度不固定的情况下，就是其值为auto的时候，子元素的百分比就不起所用了，高度为0，设置min-height的时候也没用

13.css的另一个函数calc()

定义：calc() 函数用于动态计算长度值

用法：运算符前后都需要保留一个空格；任何长度值都可以使用calc()函数进行计算；calc()函数支持 "+", "-", "*", "/" 运算；calc()函数使用标准的数学运算优先级规则

兼容性很好，支持ie8+，主流浏览器基本都支持

应用比较灵活，列举几个比较常用到的地方

1、自适应布局，比如左边固定右边自适应

2、在不依靠box-sizing的情况下，设置元素的margin，达到盒子自适应宽度的作用

3、垂直或者水平居中

。。。等等等

14.clip-path

创建一个只有元素的部分区域可以显示的剪切区域，区域内的部分显示，区域外的隐藏

语法就不详细介绍了

有一个网站可以制造很多好看的图形，clip-path

15.自定义变量var()

基本用法：

element {
  ba-color: #fff;
}

作用在当前的层级，若没有定义，则从其父元素继承其值

使用：

element {
  background-color: var(ba-color);
}

主要能解决什么问题？

1、可以减少重复性的css

2、提高可维护性

3、网站换肤功能

......

例子：

a {
  --link: hsl(230, 60%, 50%);
  --link-visited: hsl(290, 60%, 50%);
  --link-hover: hsl(230, 80%, 60%);
  --link-active: hsl(350, 60%, 50%);
}

a:link {
  color: var(--link);
}

a:visited {
  color: var(--link-visited);
}

a:hover {
  color: var(--link-hover);
}

a:active {
  color: var(--link-active);
}

16.利用伪元素扩大可点击区域

<div class="card">
    <h1>title</h1>
    <p>蚊子蚊子蚊子蚊子蚊子蚊子蚊子蚊子蚊子蚊子蚊子蚊子蚊子</p>
    <a>more</a>
</div>

.card{
    width: 300px;
    height: 400px;
    background-color: #000;
    color: #fff;
    padding: 20px;
    position: relative;
}
.card a{
    width: 80px;
    line-height: 40px;
    display: inline-block;
    border: 1px solid;
    padding: 0 20px;
    text-align: center;
    cursor: pointer;
}
.card a::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

17.一个很友好的效果

<div class="text">
    安东尼18分 甜瓜<a>手刃火箭</a>旧主毫不手软高效迎掌声
    1月16日讯 NBA常规赛，开拓者客场117-107战胜火箭。
    此役，前锋安东尼面对旧主<a>毫不手软</a>，他10投7中，高效贡献18分12篮板。
</div>

.text{
    width: 300px;
    font-size: 20px;
    line-height: 30px;
}
.text a{
    box-shadow: inset 0 -0.07em 0 #A2A9B6;
    transition: all .2s;
    cursor: pointer;
}
.text a:hover{
    box-shadow: inset 0 -0.8em 0 #A2A9B6;
}

18.text-align: justify实现两端对齐

<div class="textAlign">
    <span class="list"></span>
    <span class="list"></span>
    <span class="list"></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

.textAlign{
    width: 800px;
    height: 200px;
    text-align: justify;
    background-color: #BBBBBB;
}
.textAlign span{
    width: 200px;
    display: inline-block;
}
.textAlign .list{
    height: 100px;
    background-color: #0099FF;
}

text-align对最后一行不会产生效果；所以只有在list后面添加足够多的占位标签

19.通过object-fit控制图片的显示方式

contain

缩放以保持原比例

cover

保持原比例的同时，填满容器，会出现被剪裁的情况

fill

不保持原比例，填满容器，会被拉伸

none

保持其原有的尺寸

scale-down

内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些

20. css中的四个角度单位

1、deg

度，一圈是360度

2、grad

梯度，一圈是400梯度

3、rad

弧度，一圈是2π弧度

4、turn

一圈

换算公式

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad