CSS 知识杂谈每个前端人都是一步步从无到有地武装自己，其进阶道路或许顺畅，或许崎岖，但都无法阻止每一颗热爱的心。本文收

内联元素

内联元素及行内元素，行内元素不能使用边距的自动属性。eg: margin: auto;

margin-top 或 margin-bottom 使用 auto ，默认设置为 0。

margin-left 或 margin-right 使用 auto，默认占据所有空间。

文档流和文本流

文档流是对于文档的整个布局来说的，文本流对于文档中的文字元素来说的。float 元素和绝对定位、固定地位都脱离文档流，但 float 没有脱离文本流。绝对定位和固定定位是脱离文本流的。

水平居中、垂直居中

水平居中
text-align: center;
margin: 0 auto;
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
display:flex; justify-content: center;

垂直居中
设置line-height 等于 height;
position: absolute; top: 50%; left: 0; transform: translateY(-50%);
display:flex; align-items: center;
display: table; vertical-align:middle;

两行代码
dispaly: flex; -- 父元素设置
margin: auto; -- 子元素设置

属性单位

rem（root em)：相对于根元素(html)的大小进行倍数增减

em: 相对于当前元素字体大小的倍率

vw、vh: 相对于视窗大小的百分比

px: 像素单位，只能是整数，是显示器的相对单位

逻辑像素、物理像素

blog.csdn.net/weixin_3060…

media query 媒体查询

即视口设置，用于设置不同设备的渲染效果

<meta name="viewport" content="width=device-width, initial-scale=1.0">
引入资源，根据不同的设备，引入不同的css 样式
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

媒体查询条件: 设备宽高、设备像素比、设备类型

其媒体类型有：

all
screen
print 打印机
speech 朗读页面的屏幕阅读器

css 基线

字母 x 的下端沿，而不是汉字的文字的下端沿。

用 vertical-align 设置行内块（内联元素) 的对齐方式。

vertical-align：定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。可以使用负长度值和百分比值。

参数：top middle bottom text-bottom(文本底端对齐) text-top(文本顶部对齐) baseline(基线对齐，默认)

inline-block 内容基线对齐问题

元素设置为 inline-block 后，其内联内容呈现为块，本身呈现为 inline 元素。

www.cnblogs.com/jiangzilong…

外边距合并

普通文档流中块元素的垂直外边距会产生合并，合并后的高度等于较大者的外边距。

css 指定椭圆角

border-radius: 50px / 15px; (指代椭圆的x轴和y轴)

文本效果

text-overflow: 设置文本溢出的展示模式，通常为ellipsis;

word-wrap: 设置较长文本是否切断换行到另一行展示；

word-break: 文本切断换行展示的规则，与word-wrap 搭配使用。keep-all 和 break-all 选项。

white-wrap、word-wrap、word-break 所表示的换行和不换行的区别

使文本换行的方式有：

br 换行符，强制所在位置文本换行
p 元素，div 设定宽度，对文本内容实现自适应换行
长单词或者链接，默认不会断开换行，方式 2 便不能使其文本内换行，这时便需要 word-wrap: break-word 或 word-break: break-all 实现强制换行。

强制不换行：

white-space: nowrap。默认为 normal。pre 为换行和其他空白字符都将受到保护。nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。
强制文本换行。
word-break: normal; 允许在字内换行
word-break: break-all; 允许任意字内断开
word-break: keep-all。不允许字内断开
word-wrap: break-word。强制单词内或链接内断行

响应式图像

响应式图像会自动调整以适应屏幕尺寸

img {
	max-width: 100%;
	height: auto;
}

调整 img 图像或 video 适应容器

object-fit 属性

fill 默认，自动将图片进行调整以适应容器
contain, 以保持纵横比的方式调整
cover, 以剪裁的方式调整

css 变量

通过 :root 声明全局变量，通过 var (变量名) 使用

:root {
--color: red;
--fontsize: 16px;
}
div {
  color: var(--color);
}

设置用户无法复制

user-select: none;

设置文本换行规则和溢出省略号表示

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

设置 position 和 float

都会自动为元素设置 display: inline-block 的显示属性

overflow

overflow: -webkit-overlay 与 auto 方法类型，但滚动条的绘制覆盖内内容之上，不占用空间。存在较大兼容性，只能在 chrome 或 safari 浏览器使用。

line-height

line-height：1 相当于 line-height: 100%，根据当前字体大小设置 line-height 值。当 font-size 为 16px，则 line-height 值为16px。

client、offset 、scroll

client 和 offset 是包括不包括 border 的关系。

Width 和 Height:

blog.csdn.net/qq_42089654…

X 和 Y:

页面布局之bfc

定义：BFC(Block formatting context) 直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

blog.csdn.net/sinat_36422…

其中有个重要的规则，属于同一个 BFC 的两个相邻 box margin 值会发生重叠。

创建 BFC

float 值不是none
position 值不是static 或者relative
display 值是inline-block、table-cell、flex、table-caption 或者inline-flex
overflow 值不是visible

grid 网络布局

www.ruanyifeng.com/blog/2019/0…

终极无敌牛批之css 最强大布局。

grid 布局默认为块级元素
设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
设置行列属
grid-template-columns: repeat(n, ele-width)
grid-template-rows: repeat(n, ele-width)
确定每个单元格的宽度，数量自动填充
grid-template-columns: repeat(fill-auto, 100px)
fr 关键字（片段)
minmax 接受长度范围，限制单元格宽度变化
grid-rows-gap grid-columns-gap 设置行列单元格之间的间隔距离(最新标准删除了grid- 前缀)
复写 grid-gap
grid-template-areas 给单元格指定区域命名
grid-column/rows-start grid-column/rows-end 给单元格指定占位多少个，设置单元格起始和终止在哪个单元格边框。
grid-auto-flow 设置内容先填充rows 还是先填充columns.
rows-dence 和 columns-dence 会让余下的元素再对应的行列上紧密排列

b 标签的使用

根据 HTML5 规范，在没有其他合适标签使用时，才应该把 标签作为最后的选项。HTML5 规范声明：应该使用 h 来表示标题，使用 strong 标签来表示强调的文本，应该使用 em 标签来表示重要文本，应该使用

标签来表示标注的/突出显示的文本。

Css BEM 命名

block element modifier(修饰符)

常用链符形式 bb__ee--mm

CSS Modules

www.ruanyifeng.com/blog/2016/0…

css modules 使每个css 选择器都经过哈希编码成一个独一无二的值，避免的局部和全局的样式污染。

umi modules: dev下生成以 文件名_元素哈希 编码的表示方式。打包后以 纯的元素哈希编码表示。

react 使用多个 css modules 选择器，可借助 classNames 第三方包或者使用ES6的字符串模板。

特殊样式设置：

1. 全局作用域

:global(.title)，这是 js 只需要采用普通的 css 样式写法便可，使用括号和不使用括号的区别：是否只对其子代样式起作用。

2. 局部作用域

:local(.title)

3. css 组合

composes，选择使用嵌套的形式

.body {
	font-size: 12px;
}

.main {
	composes: body; | body from './another.css' // 继承其他文件里的样式
	font-style: normal;
}

cubic-bezier

用于定于动画的运动速度曲线。由四个值组成，分别是 cubic-bezier(x1,y1,x2,y2)

linear-gradient

创建一个颜色渐变的图像。repeating-linear-gradient 用于重复颜色。

/* 不设定角度或指定方向的情况下，默认从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

/* 从下到上的红白条纹 */
repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );

radial-gradient

创建一个发散的渐变图像

clip-path

www.jb51.net/css/641182.…

polygon: 左上角原点，右下角100% 100%

polygon(50% 0, 100% 100%, 0 100%) // 切割成一个三角形

circle: 一个坐标点(x at y)及半径

circle(50% at 50% 50%)

ellipse:椭圆 x 半径，y 半径以及圆心

ellipse(50% 40% at 50% 50%)

inset: 值为(距离上右下左边框的距离 round 左上角 radius 右上角 radius 右下角 radius 左下角radius)

round 前面的数值，表示的是距离，如果第一个值为 25%，则表示图像在上面从 25%开始绘制。

inset(25% 0% 25% 0% round 0% 25% 0% 25%)

设置高度动态随宽度变化

方案一：利用 padding

一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的

方案二：利用隐藏的图片

div 容器如果不给定高度，它的高度会随着容器内部的元素变化而撑大，这个时候，我们在容器内部添加一张符合我们宽高比例的图片，给图片设置宽度 100%；高度 auto，我们知道图片只设置宽度的话，高度会随宽度来进行比例变化，自动缩放，这样我们内部的子容器的高度也就会按照比例缩放了。当然这个 img 你可以设置隐藏，也可以用别的盒子覆盖上。

自定义 scroolbar

使用 webkit 内核的浏览器生效。

  ::-webkit-scrollbar { // 滑动框
    width: 10px;
    background-color: #eff1f5;
  }
  ::-webkit-scrollbar-track { // 滑动轨道
    border-radius: 3px;
    background-color: transparent;
  }
  ::-webkit-scrollbar-thumb { // 滑动拇指
    border-radius: 5px;
    background-color: #a8a8a8;
    border: 2px solid #eff1f5;
  }

attr

用于返回元素的属性值，常用于配合生成 tooltip.

//html,自定义属性需要在前面加上data-
<div class="tooltip" data-tooltip="提示信息"></div> 
//css
.tooltip::before {
	content: attr(data-tooltip);
}

自定义插入号颜色

caret-color: red;

drop-shadow

在图像的位置投下阴影，而非在盒子整个框后投下阴影。通常搭配 filter 滤镜属性一起使用。注意它没有阴影距离。

filter: drop-shadow(0 0 20px rgba(0 0 0 / 30%));

min-content、max-content、fit-content

作用在 width 和 height 上，前者文字随同级图片大小宽度进行换行，后者不换行（white-space: nowrap) 展示，fit-content 自带 margin:auo 居中效果。

属性选择器的匹配

[href*='http'] // 包含http的href属性
[href^='http'] // 以http开头的href属性
[href$='http'] // 以http结尾的href属性

clamp 函数

用于把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。

接收三个参数，最小值，首选在，最大值。

一般首选值为一个动态值（百分比）。

可视化特异性

对比元素的选择器层级时，按照（id选择器）-（类、伪类、属性）-（元素、伪元素）拼接。

常用可继承样式

border-collapse 边界内边距
border-space 边界外边距
caption-side 字幕侧，用于设置表格标题位于表格方位
color
cursor 光标
direction 方向，用于设置文本显示方向
font-family
font-size
font-style
font-variant 字体变体，常用于设置文本为小型大写字母的变体
font-weight
letter-spacing 字母间距
line-height
list-style-image 列表样式图像
list-style-position 列表样式位置
list-style-style 列表样式
text-align
text-indent 文本缩进
text-transform 文本转换
visibility 能见度
white-space 空白处理，常用属性：nowrap(同样合并，并且不换行)，pre(保留空格不换行)，pre-wrap(保留空格换行)，pre-line(合并空格换行)，normal(默认，合并空格)
| blog.csdn.net/qq_33706382…
widows
word-spacing 字词间距

ch 单位

为渲染字体“0”的宽度，常用于设置文本宽度。

margin、padding、transform 设置为百分比

无论方向如何，margin 和padding 都以父元素宽度作为参考对照。transform 以自身宽度作为参考对照。

角度单位turn

1turn = 360deg，表示一圈。

column-count 和 column-gap 设置多列布局

将显示内容分为 column-count 列，列间距为 column-gap。另外也可通过 column-width 设置动态列宽，随着父元素宽度的改变而改变 column-count 的列数。

flex-direction 和 gird 项目顺序

改变的是元素的视觉顺序而不是逻辑属性（DOM渲染顺序），对于使用键盘操控元素来说，遵循的是逻辑顺序。

space-evenly

flex 布局中 justify-content 设置均匀分布。

冷门伪元素

first-letter，作用于具有文本属性的第一个字母，只能对块容器作用。并非所有属性都可用，只有一些对文字起效果的 css 样式会起作用。
first-line，作用域块容器的第一行文本。同样只能使用一些对文字起效果的 css 样式。
backdrop，作用于全屏元素的背景。常用于全屏播放的视频，移动端全屏浏览内容等。
placeholder，作用于表单输入类元素的 placeholder 内容样式。
marker，用于给 list-item 自定义数字或项目符号。

冷门伪类

active, 元素活动时的样式
focus-within 子元素获得焦点
focus-visibel 通过键盘控制
empty 没有子元素

justify-content 和 align-content 复合写法

place-content 接收两个参数，第一个指代 align-content，第二个指代 justify-content。

align-items 和 align-content 的区别：前者针对每行元素进行排列，后者将多行 flex 看成一个整体处理。

writing-mode

更改文本的书写布局方向

filter

blur 模糊程度
brightness 亮度
contrast 对比度
drop-shadow 给图像设置阴影效果
grayscale 灰度滤镜，用于图像颜色设置
hue-rotate 色相旋转
opacity 透明度
saturate 图像饱和度
sepia 深褐色滤镜
url svg文件滤镜

自定义属性

以两个英文破折号开始（--）并且区分大小写。使用属性时通过var（）来使用。

animation 连写速记

animation: name duration(持续时间) time-function(运动曲线) delay(延迟) iteration-count(实现次数) direction(方向) fill-mode(最终状态) play-state(暂停控制)

fill

用于设置 svg 形状的颜色。

aspect-ratio

为元素设置宽高比。也常用于设置媒体查询条件。

rel 标签

用于说明引用外部资源与文档的关系。

picture

<picture>
  <source srcset="a.jpg">
  <source srcset="b.jpg">
  <img src="c.jpg" >
</picture>

网页布局应尽可能使用相对单位进行布局

常用的相对单位：

em 父元素字体大小
ex 当前元素字体 X 的高度
ch 一个字符"0"的高度
ic 一个字符"水"的宽度
rem 网页文档根字体大小
vw 客户端视口宽度的百分一
vh 客户端视口高度的百分一
vmin 最小视口的百分一
vmax 最大视口的百分一

css 应该注意避免的写法

juejin.cn/post/696325…

@supports

为浏览器兼容编写不同的css样式。

@supports (display: grid) {
    .site-content {
        display: grid;
    }
}

gap

用于设置 flexbox 布局的间隙。gap 为 row-gap 和 column-gap 的合写。

:is 和 :where

用于设置具有相同 css 属性的选择器，is 比 where 具有更高的权重，where 的权重为 0。兼容性尚未很可。

:is(.main, .sidebar, .site-footer) a:hover {
    /* 样式 */
}
:where(.main, .sidebar, .site-footer) a:hover {
    /* 样式 */
}

取代
.main a:hover {}
.sidebar a:hover {}
.site-footer a:hover {}

resize

给 div 元素设置是否可以调整其宽高。

none。宽高不可调整
both。宽高都可调整
vertical。可调整高度
horizontal。可调整宽度

堆叠上下文和z-index

当一个元素创建了堆叠上下文后，它及其子元素会形成一个组，同层之间的组进行 z-index 值比较。

能创建堆叠上下文的方式：

设置 position 定位
设置 opacity 值小于1
使用不是 normal 的 mix-blend-mode 模式
在设置 display:flex 或 dispaly:grid 的孩子上使用 z-index
使用 transform, filter, clip-path, perspective
设置 will-change 的属性为 opacity 或 transform
显式设置 isolation: isolate(设置堆叠上下文)。该方式创建的堆叠上下文无需规定 z-index值，并不会以任何方式影响孩子的渲染

z-index 的比较只与父级堆叠上下文有关，比较的是同一堆叠上下文下子元素的堆叠顺序，其 z-index 值与父级堆叠上下文的 z-index 不相关。创建了堆叠上下文会影响自身及子元素的布局。

transition

复合属性，依次是过渡属性（默认all），过渡时间（秒），运动速度曲线，延迟时间（秒）。

并不是所有的属性都可以过渡，具有中间形态的才可以。像display、position等属性就不可以。

需要初始属性便定义才能生效的属性：

border-color

transition能生效的属性：

常用：平时设置高度为 auto 的元素不能触发 transition，可考虑通过 max-height 设置一个大于原本元素高度来实现。

background-color color
background-image only gradients
background-position percentage, length
border-bottom-color color
border-bottom-width length
border-color color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length, percentage
color color
crop rectangle
font-size length, percentage
font-weight number
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number

font-stretch

用于拉伸文本。常用属性有 wider，narrower(更窄)，ultra-condensed(窄得不能更窄)

翻转网页颜色

filter: invert(1);

私有属性

-webkit chrome、safari
-moz firefox火狐
-ms IE
-o Opera

五种经典 CSS 布局

空间居中布局
并列式布局
两栏式布局
三明治布局
圣杯布局

冷门文字样式 css 设置

text-rendering 设置浏览器渲染文字的模式，主要考虑速度和精度清晰度两方面
auto 智能识别
optimizeSpeed 偏向速度，不能设置连字和字据调整
optimizeLegibility 侧重性能
geometricPrecision 侧重几何精度
font-feature-settings 控制 OpenType 字体中的高级印刷功能
font-feature-settings: "tnum"; // 字体更宽
font-feature-settings: "smcp", "zero"; // 产生0o 斜杆
font-kerning 是否应用字体本身储存的间距
font-variant 设置字母和数字变体，字母为小写显示为大写

css 改变图片颜色

使用混合模式。

mix-blend-mode

改变 img 下的图片颜色，常用设置 difference。

background-blend-mode

改变 background 背景颜色

单独设置 overflow-x 和 overflow-y

但分别设置 x 和 y 的值时，会受到对方的影响。eg: overflow-x 为 visible，设置 overflow-y 为 auto，则 overflow-x 也会为 auto。单独设置 overflow-x 或 overflow-y 相当于 overflow: auto。

解决方案：需要设置滚动的元素套两层父元素

使 div 宽度由内容撑开

display: inline-block 或 float。

use-select

用于设置页面内容能否被选中，常用属性为 none 和 atuo。在设置元素被拖拽移动时生效。

html 和 body 的高度问题

首先了解到，div 块元素没有主动为其设定宽度和高度，浏览器会为其分配可使用的最大宽度，但不会分配高度。块级元素的高度由子元素的内容堆砌起来，或者依赖父元素的定高起作用。如果中途有一个 height 为 auto 或是 height 没有设置，则高度百分比不起作用。给 html 设定高度 100% 会获得浏览器的定高。

当单单给 body 设置背景色，实际上不是其真正意义上的背景色起了作用，而是 body 作为根结点起作用（在 html 未被设置的情况下），其背景色被浏览器捕获，从而使浏览器的背景色为该设定的背景色。

当给 html 设定背景色后，body 设定的背景色才真正属于 body 的背景色。

总结：

当 html 标签无背景样式时，body 的背景色其实不是 body 标签的背景色，而是浏览器的。
一旦 html 标签含有背景色，则 body 的背景色变成了正常的 body 标签自己的背景色，而此时的 html 标签最顶级，背景色被浏览器获取，成为浏览器的背景色。

行内元素存在间隙

如 span，li，img 等行内元素去除 padding，margin 值任存在间隙。通过设置父元素的 font-size 为 0，再在自身设置字体大小。