CSS教程

各种浏览器及系统的尺寸

长度单位

em: 如果是font-size，那么就是相对父元素的字体大小
rem: 跟元素的字体大小，r是root的意思
vw: 视窗宽度
vh: 视窗高度

浏览器兼容

首行的<!DOCTYPE html>很关键
谷歌浏览器或者新的浏览器支持在十六进制颜色后面加两位数来表示透明度，但是其他浏览器不支持，会直接不显示颜色

IE9以下需要专门调用这几个js

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

IE浏览器兼容模式，并且针对IE浏览器首先使用edge内核，对于多核浏览器，首先使用Chrome内核
1
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />

特殊函数

Calc

非常棒的函数，能够借助css直接对属性进行计算，例如width: cacl(50% - 4px)，表示宽度为父组件宽度的一半减4px，需要注意的时候中间计算符号的两边必须有空格，否则会被浏览器认为是一个错误的属性而被忽略
可以用于控制字体的缩放，例如font-size: calc(1.5rem + 3vw)，这样字体能跟随页面一同缩放
可以通过它实现简单的固定顶部和底部，而中间刚好撑满浏览器的布局:

各种属性

a链接

a:link：表示一个正常的未被点击过的a标签的属性

a:visited: 表示一个已经被点击过的a标签的属性

a:hover: 鼠标移动到a标签上面

a:active: a标签被点击的时候

如果href="javascript:void(0)"会不跳转并且保留鼠标的手势按钮

align-items

居中对齐弹性盒子的各项
元素，默认值是stretch(拉伸元素以适应容器)

background

可以同时设置背景图像的color、image、repeat、attachment、position属性，如.style1{background:beige url(mypic.png) no-repeat top center}

设置背景颜色渐变

.simple-linear {
  background: linear-gradient(blue, pink);	 # 至少需要指定两种颜色，也可以多个颜色
  background: linear-gradient(to right, blue, pink);	# 可以改变渐变方向，默认是从上到下
  background: linear-gradient(to bottom right, blue, pink);	# 对角线渐变色
  background: linear-gradient(70deg, blue, pink);	# 自定义渐变角度，to right=90deg
  background: linear-gradient(to left, blue 30px; pink 50%);	# 声明颜色渐变到哪个位置结束
}

background-color

设置透明
transparent: 直接设置
rgba(255, 255, 255, 0.5): 前三个是颜色，最后一个是透明度

background-image

设置背景图片，如background-iamge: url(mypic.png)
需要注意的是背景图片并不会撑起元素的高度，如果想要这种效果，可以参考图片做背景撑开div或者css背景图撑开盒子高度还有响应式背景图片

background-position

可以分成background-position-x和background-position-y
可以直接center表示居中

background-repeat

设置是否及如何重复背景图像
repeat(默认值，背景图像在摧之方向和水平方向重复)、repeate-x(水平方向重复)、repeat-y(垂直方向重复)、no-repeat(不重复)、inherit(继承父元素)

background-size

设置背景图片的大小
可选值：auto(以背景图片的比例缩放背景图片)、cover(缩放背景图片以完全覆盖背景区，可能背景图片部分看不见，宽高比例不变)、contain(缩放背景图片以完全转入背景区，可能背景区部分空白，宽高比例不变)、直接指定宽度(如50%、3em、12px、auto等)、指定宽度和高度(如50% auto、100% 100%等)
background-size: 0 0;可以实现隐藏背景图片

border边框

border-color: 设置4个边框的颜色
border-radius: 设置边框圆角大小
border-style: 设置4个边框的样式。可能的值有none(无边框)、hidden(对于表，用于解决边框冲突，和none一样)、dotted(点状边框)、dashed(虚线)、solid(实线)、double(双线)、groove(3D凹槽边框)、ridge(3D垄状边框)、inset(3D inset边框)、outset(3D outset边框)、inherit(从父元素继承)
border-width: 边框宽度
可以将三个属性一起定义:border: width style color，例如border-right: 10px solid black

box-shadow

给框添加阴影

box-shadow: h-shadow v-shadow blur spread color inset;，例如box-shadow: 10px 10px 5px #888888;

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

cursor

设置鼠标悬停效果
default(默认光标，一个箭头)、auto(默认值，浏览器自己设置)、crosshair(十字光标)、pointer(一只手、拖拽光标)、move(可被移动的光标)、e-resize/ne-resize/nw-resize/n-resize/se-resize/sw-resize/s-resize/w-resize(光标指示矩形框的边缘可往哪个方向移动，常用于往8个方向改变窗口大小)、text(文本)、wait(在忙，一只表或沙漏)、help(帮助，问号或气球)、no-drop/not-allowed(禁止，红色的圈加一个斜杠)
cursor:pointer在input type="file"的情况下可能会不生效，可以给input标签添加font-size: 0，这样就能实现鼠标移到input元素上变成手形了

display

规定元素应该生成的显示框的类型
none(不显示)、block(块级元素，前后会带有换行符)、inline(默认，内联元素，前后没有换行符)、inline-block(行内块元素)、list-item(会作为列表显示)、inherit(继承父元素display属性)
值为flex表示弹性布局

font-family

如果是内联样式inline-style，可以用单引号代替双引号，否则可能不会生效

font-weight

设置字体粗细
如果值为bold，表示直接加粗，相当于值为700

如果想要字体超过900，可以尝试这些方法

更换字体

尝试给字加阴影，加少一点也有一定的加粗字体的效果

text-shadow: 0px 1px, 1px 0px, 1px 0px;

// 或者几个属性配合
text-shadow: 1px 0;
letter-spacing:1px;
font-weight:bold;
letter-spacing: 0.5px;

input

text-align: 内容显示方式，center表示居中显示
如果direction属性是ltr，则默认值是left；如果direction是rtl，则为right
autocomplete="off": 关闭google浏览器等的自动填充功能

如果是number类型的input想要隐藏选择箭头可以这样做:

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

justify-content

用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式，align-content用于设置垂直轴
flex-start: 默认值，项目位于容器的开头
flex-end: 项目位于容器的结尾
center: 项目位于容器的中心
Space-between: 项目位于各行之间留有空白的容器内
space-around: 项目位于各行之前、之间、之后都留有空白的容器内
initial: 设置该属性为它的默认值
Inherit: 从父元素继承该属性

line-height

设置行间距

list-style

把图像设置为列表中的列表项目标记(就是每一行的头那个地方设置为圆点显示还是数字显示)
包括三个属性: list-style-type list-style-position list-style-image，默认值为disc outside none
list-style-type就是左边的样式，可选值有none(无标记)、disc(实心圆，默认)、circle(空心圆)、square(实心方块)、decimal(数字)、decimal-leading-zero(0开头的数字)等

margin

1	margin: 10px 5px 15px 20px; /上右下左/

object-fit

object-fit: fill可以让video在像素长款不够的情况依然拉大到整个组件那么大

opacity

透明效果，蒙板效果

outline

如果想要Button/Input等点击后(获取焦点时)不出现蓝色的边框，可以把该属性设置为none

overflow

当水平或垂直方向溢出时添加滚动条
visible: 内容不会被截断，且可以显示在内容盒之外
hidden: 内容会被截断，且不会显示滚动条
scroll: 总是显示滚动条，无论内容是否发生溢出
auto: 取决于浏览器本身

既要有滚动效果，又要隐藏滚动条，可以使用这种方法:

.hide-scrollbar{
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;	// 火狐需要添加这个

  &::-webkit-scrollbar {
    width: 0 !important
  }
}

overflow-x

当水平方向溢出时添加滚动条

overflow-y

当垂直方向溢出时添加滚动条
scroll: 可以用这个属性给单独的两列创建单独的滚动条

padding

如果仅提供两个参数，第一个表示垂直方向，第二个表示水平方向，例如padding: 20px 0等同于padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left:0px;

pointer-events

指定在什么情况下某个特定的元素可以成为鼠标事件的target
none: 可以实现某个元素仅仅能看，但是无法触发其事件。屏蔽掉某个元素上的所有的事件。屏蔽点击事件，不可点击/禁止鼠标点击/禁止点击，hove的时候也不会有任何的改变
这个属性的其他值都只适用于SVG

position

absolute: 绝对定位，相对于static定位以外的第一个父元素进行定位
fixed: 绝对定位，相对于浏览器窗口进行定位
relative: 相对定位，相对于其正常位置进行定位
static: 默认值。没有定位ie，元素出现在正常的流中
inherit: 从父元素继承position属性
如果父元素设置了margin auto且overflow-x:none，子元素如果想单独撑开(而不是所有子元素撑开)父元素且横屏占满，可以采取修改position的值为fixed然后width：200%，然后left一点到左边去即可

table

overflow:scroll：如果表格超宽，让页面自动出现滚动条
word-wrap:break-word，超过宽度自动换行
word-break: break-all，超过宽度，无论是不是一个单词都换行
如果table的border不显示可以尝试添加这个样式 border-collapse: collapse;

scroll-behavior

smooth: 使滚动变为平滑滚动，如果想要自己通过手动控制滚动，如scrollTo等，一定要加该参数，这样才能使滚动看起来平顺一点
auto: 滚动框立即滚动

text

text-indent: 段落缩进设置

text-align

text-align: center只能让inline元素剧中，而不能让block元素居中，而text-align: -webkit-center可以让其中的block元素也居中

text-decoration

text-decoration: underline添加下划线、下横线、删除线(line-through)

text-overflow

设置当文本溢出包含元素时怎么做
clip(直接截断文本)、ellipsis(截断文本并显示省略号)

如果text-overflow不能工作，可以尝试下这样：

{
  width: 80px;	// 元素宽度必须是px，不能是百分比%
  overflow: hidden; // 必须设置
  white-space: nowrap;
}

text-transform

控制文本的大小写，默认为none，可选capitalize(首字母大写)、uppercase(全部大写)、lowercase(全部小写)

top

如果top属性不起作用，可以尝试修改当前元素或者父元素或兄弟元素的position值试试

white-space

nowrap: 强制不换行

user-select

none(文本不能被选择)、text(可以选择文本)
需要注意的是在input上设置user-select: none可能导致safari的输入框无法输入任何内容，然而这个属性一般又是全局设置的，可以这样做:
1
2
3
*:not(input) {
user-select: none;
}

vertical-align

设置元素的垂直对齐方式，定义行内元素的基线相对于该元素所在行的基线的垂直对齐
参考值：baseline(默认，元素放置在父元素的基线上)、sub(垂直对齐文本的下标)、super(垂直对齐文本的上标)、top(把元素的顶端与行中最高元素的顶端对齐)、text-top(把元素的顶端与父元素字体的顶端对齐)、middle(把此元素放置在父元素的中部)、bottom(把元素的顶端与行中最低的元素的顶端对齐)、text-bottom(把元素的底端与父元素字体的底端对齐)、%(使用line-height属性的百分比值来排列此元素，允许为负)、inherit(继承父元素的值)

-webkit-text-fill-color

检索或设置对象中的文字填充颜色。如果同时设置了text-fill-color和color，text-fill-color定义的颜色将覆盖color属性；通常-webkit-text-fill-color与-webkit-text-stroke一起使用，能实现一些例如渐变文字和镂空文字的效果。
可以使用该参数来解决safari和firefoxinput框在disabled时颜色不一样的问题:
1
2
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */

white-space

nowrap: 强制不换行

width元素宽度

max-width设置最大宽度，默认为none，可选max-content(原素内容固有的合适的宽度)、min-content(元素内容固有的最小宽度)、fit-content

word-wrap

break-word: 强制换行(a标签太长强制换行)

@media

媒体查询，可以定义当满足某个条件时的css，例如

@media (max-width: 600px) {	// 当屏幕最大宽度小于600px的时候
  .tag {
    display: none;
  }
}

@media (min-width: 700px) and (orientation: landscape) {}	// 仅在横屏并且宽度大于700px的时候
@media tv and (min-width: 700px) and (orientation: landscape){}// 仅在电视上

CSS选择器

.class1.class2

表示既包含class1又包含class2的元素

.class1 .class2

表示class1下的class2的元素

element > element

例如div > p表示选择所有父节点为div 的p元素

element + element

例如div + p表示选择所有前面是div标签的p标签

element ～ element

例如p ~ ul表示选择所有p标签后的ul标签

[attribute]

例如a[target]表示选择所有含有target属性的a标签

[attribute=value]

例如a[target=_blank]表示选择所有target属性为_blank的a标签
div[style*=”display:block”]选择有指定inline style的元素

[attribute~=value]

例如[title~=flower]表示选择所有title属性里面包含flower的标签

[attribute|=value]

例如[lang|=en]表示选择所有lang属性以en开头的标签

[attribute^=value]

例如a[href^="https"]表示选择所有href属性以https开头的a标签

[attribute$=value]

例如a[href$=".pdf"]表示所有href属性以.pdf结尾的a标签

[attribute*=value]

例如a[href*="test"]表示所有href包含test的a标签

:active

例如a:active表示a标签被激活

::after

例如p::after表示在p标签后插入一些内容

// 这样每一个p标签后面都会跟上这个内容了
p::after { 
  content: " - Remember this";
}

::before

例如p::before表示在p标签前插入一些内容，和::after用法类似
::before/::after可组合实现一些绚丽的效果: 伪类光圈、伪类括号效果、丝带效果、几何图形(三角形、五角星)、水滴、流动边框、Tooltip提示、伪类盒子阴影、Tabs当前激活状态、伪元素模糊背景、蓝湖文字、主要标题、鼠标浮层、遮罩浮层、伪类美化文字、照片堆叠效果

:checked

例如input:checked表示选择所有checked了的input

:default

例如input:default表示选择所有默认状态下的input

:disabled

例如input:disabled表示选择所有禁用了的input

:empty

例如p:empty表示选择没有子元素的p标签

:enabled

例如input:enabled表示选择所有可用的input标签

:first-child

第一个子元素

::first-lettter

第一个字母

::first-line

第一行

:first-of-type

例如p:first-of-type表示全局所有的p标签里面的第一个

:focus

表示获得焦点的时候

:hover

鼠标浮动的时候

:in-range

当值在某个范围内的时候

<style>
input:in-range {
  border: 2px solid yellow;
}
</style>
// 下面的7在input的范围内，当值为7的时候就应用上面的样式
<input type="number" min="5" max="10" value="7">

:indeterminate

元素为不确定状态时

:invalid

当输入为不合法的时候input:invalid

:lang(language)

p:lang(it)表示选择所有lang属性为it的p标签

:last-child

最后一个子元素
慎用这几个相关的伪类选择器，因为不总是能达到预期的效果，可以参考选择某类的最后一个元素——CSS3伪类选择器走过的坑

:last-of-type

全局最后一个指定元素

:link

a:link表示所有为访问的a标签

:not(selector)

:not(p)表示所有不是p标签的标签

nth-child(n)

前n个子元素

nth-last-child(n)

表示倒数n个子元素
参数除了数字，还可以填入odd和even表示奇偶

// 表示该div标签下的最后2个元素的属性
div:nth-last-child(2) {
  background: red;
}

:nth-last-of-type(n)

最后n个元素

:nth-of0type(n)

前n个元素

:only-of-type

p:only-of-type选择所有的p标签为父元素的p标签

:only-child

p:only-child选择p标签为唯一子元素的父元素

例如

p:only-child
{
background:#ff0000;
}

<div> <!--这里选择到的是div元素-->
	<p>这是一个段落。</p>
</div>

<div> <!--不唯一，不选择该元素-->
<p>这是一个 span。</p>
<p>这是一个段落。</p>
</div>

:optional

input:optional表示输入框为非必选的时候

out-of-range

和in-range相反

::placeholder

input::placeholder

:read-only

input:read-only表示只读的input标签

:read-write

input:read-write表示可读写的input标签

:required

input:required表示必填的input标签

:root

选择文档的跟元素

::selection

用户当前选择的元素

:target

:valid

合法的输入框

:visited

访问过的连接

Flex布局

flex布局清单
注意flex是无法给容器设置height的，但是可以通过设置内部元素的height/max-height/min-height来间接控制其高度
如果flex的宽度较长，明明有剩余空间却自动换行了可能需要这样设置(flex布局的内容超出了盒子的宽度):
1
2
3
4
5
6
7
8
9
.content {
flex: 1;
width: 0;
}
// 或者
.content {
flex: 1;
overflow: hidden；
}

参考
Flex 布局教程：语法篇

Flex 布局教程：实例篇: 这里面可以看到居中对齐、右对齐、左对齐、上部居中对齐、下部居中对齐、右下对齐等，以及网格布局、圣杯布局(传统网页的布局方式)、输入框的布局、悬挂式布局、固定的底栏、流式布局

flex容器的属性

属性名	含义	可选值	默认值
flex-direction	决定主轴的方向（即项目的排列方向）	row \| row-reverse \| column \| column-reverse	row
flex-wrap	定义换行方式	nowrap \| wrap(第一行在上方) \| wrap-reverse(第一行在下方)	nowrap
flex-flow	flex-direction和flex-wrap属性的简写形式		row nowrap
justify-content	定义了项目在主轴上的对齐方式	flex-start(左对齐) \| flex-end(右对齐) \| center(居中) \| space-between(两端对齐，项目之间的间隔都相等) \| space-around(每个项目两侧的间隔相等)
align-items	定义项目在交叉轴上如何对齐	flex-start(交叉轴的起点对齐，上对齐) \| flex-end(交叉轴的终点对齐，下对齐) \| center(交叉轴的中点对齐，居中对齐) \| baseline(项目的第一行文字的基线对齐) \| stretch(如果项目未设置高度或设为auto，将占满整个容器的高度)	stretch
align-content	定义了多根轴线的对齐方式.如果项目只有一根轴线，该属性不起作用	flex-start(与交叉轴的起点对齐) \| flex-end(与交叉轴的终点对齐) \| center(与交叉轴的中点对齐) \| space-between(与交叉轴两端对齐，轴线之间的间隔平均分布) \| space-around(每根轴线两侧的间隔都相等) \| stretch(轴线占满整个交叉轴)	stretch

flex容器下项目的属性

属性名	含义	可选值	默认值
order	定义项目的排列顺序，数值越小，排列越靠前，默认为0		0
flex-grow	项目的放大比例	如果所有项目的`flex-grow`属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。这个就类似于element里面的xs了	0(如果存在剩余空间也不放大)
flex-shrink	项目的缩小比例	如果所有项目的`flex-shrink`属性都为1，当空间不足时，都将等比例缩小。如果一个项目的`flex-shrink`属性为0，其他项目都为1，则空间不足时，前者不缩小。	1(即如果空间不足，该项目将缩小)
flex-basis	在分配多余空间之前，项目占据的主轴空间.浏览器根据这个属性，计算主轴是否有多余空间	可以设为跟`width`或`height`属性一样的值（比如350px），则项目将占据固定空间	Auto
flex	是`flex-grow`, `flex-shrink` 和 `flex-basis`的简写		0 1 auto
align-self	允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性	auto \| flex-start \| flex-end \| center \| baseline \| stretch	auto(继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`)

Grid布局

grid布局效果清单: 非常直观地看到效果
参考底部推荐文章

.wrapper {
  display: grid;	/* 声明一个grid容器 */
  
  grid-template-columns: repeat(4, 25%);	/* 声明列的宽度，表示网格宽度为4列，每列25%的宽度，repeat是为了少写几个值，也可以这样写 grid-template-columns: 25% 25% 25% 25% */
  grid-template-columns: repeat(4, 1fr);	/* 最好使用fr单位，这样可以不用自己去计算百分比，它可以自动减去grid-column-gap的值，但是有个弊端是这样做如果某个列超出宽度后会把整个wrapper的宽度都撑大，就不止25%了 */
  grid-template-columns: 250px repeat(12, 1fr);	/* fr的好处又可以体现了*/
  
  
  grid-column-gap: 10px;	/* 每两列之间的间隔，*/
  grid-column-start: 1;	/* 设置当前格占用的起始列，从1开始*/
  grid-column-end: 3;	/* 设置当前格占用的结束列，左开右闭区间，这个表示占用了1和2两列，相当于两倍宽度*/
}

动画transitions/变化/变换/平滑移动

transitions允许我们平滑地改变属性值(而不是立马变更到某个值)
ease方法的在线示例: Easing Functions Cheet Sheet

注意值必须是个确定的值，不能是100%这种

// 最简单的例子，当鼠标移动到div上面的时候div的宽度由100px平滑变更为300px，总共耗时2秒
div {
  width: 100px;
  transition: width 2s;
}
div:hover {
  width: 300px;
}

transition-property表示绑定的属性名称，transition-duration表示属性变更的时间，transition-timing-function表示属性变更方式，transition-delay表示变更延迟，可以简写为
1
2
3
div {
transition: width 2s linear 1s;
}
transition-timing-function变更方式默认为linear表示匀速(cubiz-bezier(0,0,1,1))，ease表示中间快两头慢(cubiz-bezier(0.25,0.1,0.25,1))，ease-in表示先慢后快(0.42, 0, 1, 1)，ease-out表示先快后慢(0, 0, 0.58, 1)，ease-in-out表示中间慢两头快(0.42, 0, 0.58, 1)，cubiz-bezier(n, n, n, n)自定义快慢

内核前缀

-ms: ie内核识别码
-moz: 火狐内核识别码
-webkit: chrome/safari内核识别码
-o: opera内核识别码

TroubleShooting

元素居中方法

方法一：
<center>...</center>
方法二：
div {margin:0 auto}
方法三：
.Absolute-Center {
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}
# 方法四
.test {  
    float: none;  
    display: block;  
    margin-left: auto;  
    margin-right: auto;  
}
# 方法五，css3里面超级简单
.div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
# 方法六：让容器内部的元素垂直居中
.parent {
  display: flex; 
  align-items: center;
}
# 方法六：让标签中的文字剧中
div {
  text-align: center;
}
# 方法七：绝对定位元素的居中对齐
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%;>
content
</div>
</div>

将某元素置于底层，使用z-index属性，例如：

div {
    z-index; -100;   # 值越小，越底层，默认应该为0
}

文字模糊、阴影效果，使用text-shadow属性，例如：

.menu a:hover{
    text-shadow: 0 0 10px gray;
}

控制元素的隐藏：

# 这样不会占用位置
<div id="div1" style="display:block;">DIV 1</div>

文字环绕图片效果

<div class="wrap">
    文字的前半部分
    <img src="test.png" style="float: left; padding: 0; margin: 3px 5px 0px 0px;">
    文字的后半部分
</div>

固定网站底部信息栏，使得无论内容多少都始终正好显示在底部

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; // 这里负的是footer的高度
}
.footer {
    height: 100px;
}
# 然后，网页主体由以下部分组成：
<html>
    <head></head>
    <body>
        <div class="wrapper"></div>
        <div class="footer"><div>       // 这里也可以用footer代替
    </body>
</html>

以上，我的直觉告诉我会有更方便的方法，但是我居然没找到，谷歌上搜索出来几乎都是这个答案。

判断屏幕宽度

1
2
3

@media (min-width: 400px) {

}

各种情况的颜色渐变实现

http://www.w3cplus.com/content/css3-gradient

让任意的标签可点击

1	<div onclick="location.href='https://haofly.net'" style="cursor:pointer"></div>

底部居中对齐

.class {
  position:absolute;
  bottom: 30px;
  margin: auto;
  left: 0;
  right: 0;
}

在Chrome显示小于12px的字体

需要注意的是这个方法只是单纯地缩小了显示的字，并不是将字体变小了，换行那个地方可能有问题

.item {
	-webkit-transform: scale(.5);
  -moz-transform: scale(.5);
  transform: scale(.5);
}

让两个Div或其它元素始终并排显示

UI中可能会有将两个元素合并成一个元素，并且无论响应式如何改变，两个元素始终按原来的样式在一起
可以先调整两个元素的样式，让他们挨在一起，然后新建一个父类将他们包裹

.parent {
  min-width: 150px; // 父组件设置最小宽度，这样即使是响应式也不会影响父组件内部的元素了。剩下的就是让外部无论如何也不能让parent元素的宽度变小了
}
.leftElement {
  position: relative;
  display: inline-block;
  width: 100px;
}
.rightElement {
  position: relative;
  display: inline-block;
  left: -4px;	// 微调右边的元素
  top: 1px;
  border: 1px solid #e1e4e6;
  border-left: none;
  width: 50px;
}

子元素位于父元素底部

.parent{
  position: relative;
  height: 300px;
  width: 300px;
  margin:0 auto;
}
.child{
  position: absolute;
  bottom: 0;
  height: 80px;
}

多行文字截断/仅显示3行/实现see more/read more功能

// 方法一：文本设置固定高度，超过某个高度就隐藏
div {
  line-height: 20px;
  overflow: hidden;
  max-height: 60px; // 3行文本的高度
  
  .read-more {	// 当点击read more后最大高度就变大
    max-height: 9999px;
    transition: max-height 0.2s ease;
  }
}

// 方法二：使用-webkit-line-clamps，但是可能存在浏览器兼容问题，例如Firefox和IE浏览器不支持该属性，移动端浏览器一般都基于webkit内核，兼容性还行
div {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

// 方法三：通过伪元素绝对定位到行尾并遮住文字
p {
    position: relative;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

两个并排inline-block的元素一样的高度却不在同一水平线上，但又不是多余的属性导致的上下空白

这是一个比较奇怪的问题，甚至有时候在不同的浏览器里面会有不同的表现
这涉及到基准线的对齐方式，可以将两个元素都设置vertical-align: top;解决，具体的可以参考上文vertical-align属性的设置

火狐浏览器input的placeholder不再同一水平线上

尝试设置如下伪类，来源

::-webkit-input-placeholder {
   color: brand-blue;
}

:-moz-placeholder { /* Firefox 18- */
   color: brand-blue;  
   line-height 60px;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: brand-blue;  
   line-height 60px;
}

:-ms-input-placeholder {  
   color: brand-blue;
}

设置密码输入框的显示于隐藏

通过修改type属性

const password = document.querySelector('#password');

$('input#password').on('click', function(e) {
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // 通过修改右边小眼睛的类来切换眼睛的展示
    this.classList.toggle('fa-eye-slash');
})

防止元素多次点击出现蓝色边框

body{
	-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; 
}

// 方法二：用js，需要在点击事件中return false

滚动时隐藏菜单栏

position: absolute不起作用

尝试把当前元素设置为position: absolute，父级元素设置为position: relative

旋转background-image/旋转背景图片

.div:before {
  content: attr(bgImg);
  position: absolute;
  width: 300%;
  height: 200%;
  top: -480px;
  opacity: 0.3;
  left: 70%;
  z-index: -1;
  background-image: var(--bg-image);
  background-position-x: 0;
  background-position-y: 0;
  background-repeat: no-repeat;
  transform: rotate(270deg);
  overflow: hidden;
}

Selector “:global .class” is not pure (pure selectors must contain at least one local class or id)

:global语法必须在某个类下，不能在顶级使用

.root {
  :global(.myClass) {
    
  }
}

实现图片的等比例自动缩放

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

让video的控制栏一直显示

video::-webkit-media-controls-panel {
   display: flex !important;
   opacity: 1 !important;
}

动态导入的font-family对动态的文字居然不起作用

我的场景就是在canvas中添加文本，但是文本的字体在firefox中却不起作用。首先，如果只是在css中设置了font-face，那么只有在使用的时候才会去获取字体，可以尝试预加载，<link rel="preload" as="font" href="/...ttf" type="font/ttf" crossorigin="anonymous"，如果仍然不行，那么可以尝试在页面中添加一个使用该字体的文本，而且必须是显示的，不能隐藏，我不得不把的高度这些设置为0，然后颜色设置为背景色才做到。

扩展阅读

Flex 布局教程

CSS Viewport 视口单位: 一种新的单位vw/vh/vmin/vmax，这篇文章中有很多应用案例，例如: 响应式字体大小、全屏、粘性布局、响应式元素、垂直和水平间距、模态框、页面头部、纵横比、顶部边框、移动端滚动等

最强大的 CSS 布局 —— Grid 布局

CSS灵感：CSS的原生效果大全

animista: 非常多的原生CSSanimation效果大全