回归CSS

Nangxif
233 阅读13分钟

回归CSS

虽然说是工作了这么长时间了，但是在这段工作经历中，对CSS的应用还算不上全面覆盖，有些属性没怎么重视所以不太清楚功能是什么，所以今天我抽了点时间翻了翻，顺便总结一下。
以下的css属性只是我觉得对我来说可能理解有误的，或者是之前没怎么用过的，我把它们列出来，没有所谓的先后顺序。

1.背景属性

background-attachment

指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动），适合用来做水印。
属性详情

background-blend-mode

用了这么久的css都不知道background-image是可以同时设置多张的，该属性定义每个背景层（颜色和/或图像）的混合模式。
属性详情

background-clip

该属性规定背景的绘制区域。
属性详情

background-origin

background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。 这个属性一般会跟background-position一起出现
PS：这个属性的可选参数看着跟background-clip一样，那么两个属性使用起来有什么区别呢？
background-clip的clip顾名思义裁剪，background-origin顾名思义起源。
1.clip是定义背景的裁剪范围，origin是定义背景的渲染范围。
2.clip对background-color和background-image都有效，background-origin只对background-image有效。
属性详情

backface-visibility

该属性可以隐藏被旋转的div元素的背面，这个属性可以用在实现卡片翻转的效果上。
属性详情

object-fit

该属性用于指定应如何调整img或video的大小以适合其容器。这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。
PS：这个属性只对img和video标签生效，使用这个属性偶尔会有误区，可能会被用在设置了background-image的div上面，或许有可能被用在包裹着img标签的div上面，但是在这些上面设置都是无效的。
属性详情

2.边框属性

border-radius

该属性用于向元素添加圆角边框，这个肯定经常用，但是可能会忽视的一个点是什么呢？如果border-radius的值设置成百分比，那么这个百分比是基于什么来计算的呢？答案是宽高！我是这么理解的，如果有一个长宽相等的正方形，我设置圆角为

border-top-left-radius: 20%;
border-top-right-radius: 30%;
border-bottom-left-radius: 40%;
border-bottom-right-radius: 50%;

那么也就是设置左上角的弧度是从宽度的20%开始的，长度的20%开始的，右上角的弧度是从宽度的30%开始的，长度也是从30%开始的以此类推。

微信截图_20220410212129.png 最后的效果为

微信截图_20220410212427.png

border-collapse

该属性为表格设置合并边框模型。
属性详情

border-spacing

该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。

border-image

该属性是个复合属性，它可以同时设置以下属性

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat PS:我刚接触这个属性的时候，一开始发现无论我怎么设置都没有效果，其实是陷入了一个误区，border-image是基于border的属性，所以必须要有border，这个属性才能生效。我们来仔细讲解一下这几个属性。
    border-image-source是边框图片资源；border-image-slice规定图片的裁剪位置，没有单位，默认单位就是px了； border-image-width规定图像边框的宽度；border-image-outset指定在边框外部绘制区域的量；border-image-repeat这个是和background-repeat基本差不多，但是它只有三个值可以用，重复（repeat）、拉伸（stretch） 铺满（round）。
    属性详情
    也可以参考链接

box-decoration-break

该属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。直接看这段描述有点难以理解，点击属性详情可以查看这个属性带来的一些效果。
PS:这个属性只会影响元素以下属性的表现background、border、border-image、box-shadow、clip-path、margin、padding。
属性详情

3.边距属性

在默认的水平文档流方向下，CSS margin和padding属性的垂直方向的百分比值都是相对于父元素宽度计算的。

4.轮廓

outline

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。那么，我们先来说说它究竟跟边框有什么区别呢？
轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。
关于border的属性有border-width，border-style，border-color
关于轮廓outline的属性也有outline-width，outline-style，outline-color
除非设置了 outline-style 属性，否则其他轮廓属性都不会有任何作用！
属性详情

outline-offset

该属性可以在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
属性详情

5.文字、行属性

text-align

这个属性有一个值不经常用，justify，其实效果就是两端对齐。

vertical-align

该属性设置元素的垂直对齐方式。
该属性有个值是baseline（基线），点击这里可以了解一下基线的定义。
该属性还有个值是middle，该值使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。
如果我们要实现数学上的次方运算符，或者是对数运算符，那么我们除了使用<sup>和<sub>，还有什么方法可以实现呢？那就是vertical-algin属性的super和sub。同时该属性还支持百分比，它是相对于line-height来计算的，比如指定line-height：30px；vertical-align：-10%；那么实际上vertical-align的值就是-3px，也就是在基线对齐的基础上，下移3px。
PS：该属性只对于inline，inline-block，table-cell  （td标签） 元素生效，对div标签或者p标签元素不会有任何作用，除非你设置了display更改了它们的模型。
属性详情

text-transform

英文首字母大写和大小写的转换也可以不用js的toUpperCase或者toLowerCase。
该属性用于指定文本中的大写和小写字母。它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写。
属性详情

line-height

该属性的取值可以是关键词normal（取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为1.2，这取决于元素的 font-family）、数字（计算值是数字乘以该元素的字体大小，这是设置line-height的推荐方法）、长度、百分比（计算值是给定的百分比值乘以元素计算出的字体大小，感觉跟数字有点类似）
属性详情

text-indent

该属性用于指定文本第一行的缩进，这个属性我是知道的，我一般用text-indent:2em来段落缩进首字缩进两字符，感觉有些开发同学没注意到，我就写进来了。

letter-spacing

该属性用于指定文本中字符之间的间距。

word-spacing

该属性用于指定文本中单词之间的间距，跟letter-spacing有区别的。该属性对于中文和英文都是生效的，但是要用空格隔开才能生效，因为单词之所以会生效并不是css能够很智能地识别英文语义，而是我们人工给这些单词赋予了空格。
属性详情

white-space

该属性设置如何处理元素内的空白。
不知道各位有没有注意到，如果我们直接书写这种手动换行的代码，页面会怎么渲染？

<div>asd asd 
          asd</div>

如果不设置white-space的话那么换行符会被忽略，空格会被合并成一个。我们在实现一些业务需求的时候，难免会遇到直接渲染接口返回的标签字符串，有一些需要将换行符号，空格符号直接渲染出来，这时候我们可以直接用pre-wrap值，原封不动地渲染，而pre-line则是会合并空格成一个，但是还是保留换行符，该有多少个就显示多少个换行符。
属性详情

writing-mode

该属性规定水平还是垂直地排布文本行。
属性详情

6.列表属性

list-style-type

该属性可以设置有序列表和无序列表前面的小标记，有些值用于无序列表，而有些值用于有序列表。

list-style-image

改属性将图像指定为列表项标记。

list-style-position

该属性list-style-position指定列表项标记应显示在内容流的内部还是外部。
属性详情
以上三个属性可以用复合属性list-style一起设置

7.表格属性

caption-side

该属性规定表格标题的放置方式。
PS：这个属性只会对属于table的caption标签生效。
属性详情

8.位置属性

position

这个属性用到掉牙了，但是有一个值之前一直没怎么注意到——sticky 我们经常会碰到一些需求是，滚动页面，然后导航栏随着页面滚动到顶部之后要固定在页面顶部，我之前不知道这个值的时候经常用js的onscroll去监听滚动然后再设置导航条的position，确实没什么必要。 粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
属性详情

9.浮动属性

float

这个属性直接点击这个链接看就好了，写得很详细。链接

10.伪类

用途：定义元素的特殊状态。
伪类直接点这个链接查看就好了。链接
这里面有一点需要注意的是这句话：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。
这个就是我们说的“爱（love）恨（hate）原则”，记住这两个单词就能记住顺序了。

11.伪元素

用途：css伪元素用于设置元素指定部分的样式。
例如，它可用于：

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容 伪元素不多，只有几个::after，::before，::first-letter，::first-line，::selection

::first-line

该伪元素用于向文本的首行添加特殊样式，只能应用于块级元素。
以下属性适用于 ::first-line 伪元素

  • 字体属性
  • 颜色属性
  • 背景属性
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear 请注意双冒号表示法 - ::first-line 对比 :first-line
    在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。
    在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。
    为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

::first-letter

该伪元素也是只适用于块级元素
下面的属性适用于 ::first-letter 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • 外边距属性
  • 内边距属性
  • 边框属性
  • text-decoration
  • vertical-align（仅当 "float" 为 "none"）
  • text-transform
  • line-height
  • float
  • clear

::selection

::selection伪元素选择器匹配被用户选取的部分。 只能向::selection 选择器应用少量 CSS 属性：

  • color
  • background-color
  • cursor
  • caret-color
  • outline
  • text-decoration
  • text-emphasis-color
  • text-shadow

12.文章排版

有时候我们会遇到一些类似报纸的排版需求，以下这几个属性就可能会用到。

columns

该属性是一个简写属性，用于设置列宽(column-width)和列数(column-count)。
属性详情

column-width

该属性规定列的宽度。
属性详情

column-count

该属性规定元素应该被划分的列数。
PS：这一有一点需要注意column-count的值为数字的时候，元素内容将被划分的最佳列数。并不是说就一定是几列，毕竟浏览器的视口宽度有大有小，而且还可能设置了column-width。
属性详情

column-gap

该属性规定列之间的间隔。
PS：如果列之间设置了 column-rule，它会在间隔中间显示。
属性详情

column-rule

该属性是一个简写属性，用于设置所有 column-rule-* 属性（column-rule-color、column-rule-style、column-rule-width），它可以设置列只觉得宽度、样式和颜色规则。有点类似border。
属性详情

column-span

该属性规定元素应横跨多少列。（可以理解为报纸的标题）
属性详情

其他属性

resize

我们经常会使用到文本框textarea，我们会发现它有一个功能，就是可以伸缩，如果这时候有个需求，我们需要实现可以随意伸缩某个元素的功能，那么这个属性就可以派上用场了。
该属性规定是否可由用户调整元素的尺寸。
PS：如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。
属性详情

scroll-behavior

该属性规定当用户单击可滚动框中的链接时，是否平滑地（具动画效果）滚动位置，而不是直线跳转。
属性详情

caret-color

该属性规定 input、textareas 或任何可编辑元素中的光标（插入符号）的颜色。
属性详情

CSS 函数

我们经常会使用rgb()，rgba()，甚至是calc()这样的函数，像attr()这样的函数偶尔也会配合content属性一起使用，这里主要讲的是var()函数。
css里面也可以定义和使用变量，使用方式如下：

:root {
  --main-bg-color: coral; 
}

#div1 {
  background-color: var(--main-bg-color); 
}

#div2 {
  background-color: var(--main-bg-color);
}

属性详情

结语

看完这篇文章会不会感觉你其实有些css属性也不是很熟悉或者之前也没看得那么仔细，那么感谢你，很荣幸我这篇文章帮到了你一点点。你可以在上厕所的时候或者坐地铁的时候翻一翻~后续如果还有一些缺漏的话我会继续更新！

avatar
文章
阅读
粉丝