前端瞎几把记 HTML、CSS 篇

生化环材，得趁早润；有用没用，随便写写。

JavaScript、TypeScript 篇没写（完）呢。

个人瞎几把记，内容不靠谱，看个乐呵。

Visual Studio Code

Alt + Shift + F 格式化代码。
! 自动生成 HTML 模板。
使用 CSS 选择器规则生成 HTML 代码——试试 ul>li*2。
lorem 生成乱数假文。

HTML

<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<meta name="keywords" content="blabla,blabla">
<meta name="description" content="blabla">
<meta http-equiv="refresh" content="3;url=https://www.bing.com"> 3 秒后重定向至必应。
<h1> 只有一个。
<hgroup> 标题组。
<em> 强调文本，行内元素，建议使用 CSS。
<strong> 加粗强调，建议使用 CSS。
<blockquote> 块引用，块元素。
<q> 短引用，行内元素，使用时浏览器可能会自动添加双引号伪元素。
<br> 换行。
一般用块元素布局，用行内元素包裹文字。块元素内放行内元素，行内元素内不放块元素，<p> 内不放块元素。
<header> 网页头部；<main> 网页主体，只有一个；footer 网页尾部。
<nav> 导航栏；<aside> 类似边栏；<article> 文章；<section> 独立区块。
上面两条包含的元素是 HTML5 新增的，不常用，主要还是用 <div>（块元素）和 <span>（行内元素）。
<ul> Unordered List，无序列表。
<ol> Ordered List，有序列表。
<li> List Item，列表项目
列表可嵌套。
<dt> Description Term，术语定义，效果见 MDN 。
<dd> Description Details，术语描述。
<a> 超链接，href 属性指定 URL，使用 # 回到顶部或特定位置，使用 javascript:; 实现无超链接的效果，target 属性指定打开方式，_self 在当前页面打开，_blank 在新标签页打开，还有其他值，见 MDN 。
相对路径 ./ 表示本目录，可省略，../ 表示上级目录。
<img> 属于替换元素，它的 src 属性指定图片 URL，alt 属性（应始终提供）为图片添加描述文本，可能在图片加载失败时显示，同时支持读屏器阅读。alt 文本应是一种描述性文本，不应被滥用来显示图片的标题，为图片添加标题可使用 <figure> 或 <figcaption>，详见 MDN 。
在以像素为单位设置 height 和 width 属性时，可直接写成 height="100" width="100" 的形式，也可以写成 height="100px" width="100px" 的形式。
<iframe> 内联框架，使用 JavaScript 操作 iframe 内元素见《JS操作iframe元素》。

<audio> 的 controls 属性控制播放器控件的显示与隐藏，autoplay 属性控制是否自动播放，虽然不太好使，loop 控制是否循环播放。
老旧浏览器兼容方案：

<audio controls>
  <!-- 浏览器不支持该音频。 -->
  <!-- 上面这条和下面 <embed> 选一个即可 -->
  <source scr="./audio.mp3">
  <source scr="./audio.ogg">
  <embed scr="./audio.mp3" type="audio/mp3" width="300" height="200">
</audio>

<video> 类似于 <audio>。
<table> 表格，<tr> 表格行，<td> 表格列，colspan="2" 合并横向两个单元格（合并列），rowspan="2" 合并纵向两个单元格（合并行），<thead> 表头，<th> 表头单元格，<tbody> 主体，<tfoot> 表尾。

表单

CSS

使用 CSS 的三种方式：内联、写在 <head> 的 <style> 中、在 <head> 中通过类似 <link rel="stylesheet" href="./styles.css"> 的语句引入。

选择器

常用选择器

类型选择器：
1
div {}
Id 选择器：
1
#id {}
类选择器：
1
.class {}
通配选择器：
1
* {}

复合选择器

交集选择器，直接写在一起：
1
2
3
div.class {}

.class#id {}
并集选择器，用逗号分隔：
1
h1, span, div.class {}

关系选择器

子代选择器：
1
div > span {}
后代选择器，用空格分隔：
1
div span {}
相邻兄弟选择器：
1
p + span {}
通用兄弟选择器：
1
p ~ span {}

标签属性选择器

/* 选择有 title 属性的 <p> */
p[title] {}
/* 选择有 title 属性为 Paragraph One 的 <p> */
p[title="Paragraph One"] {}
/* 选择有 title 属性以 Para 为开头的 <p> */
p[title^="Para"] {}

/* 选择有 title 属性以 One 为结尾的 <p> */
p[title$="One"] {}

/* 选择有 title 属性含有 graph 的 <p> */
p[title*="graph"] {}

伪类选择器

/*
  blabla-child: 以所有子元素计算
  blabla-of-type: 以同类型子元素计算
*/

ul > li:first-child {}
ul > li:first-of-type {}

ul > li:last-child {}
ul > li:last-of-type {}

ul > li:only-child {}
ul > li:only-of-type {}

/* “我全都要！” */
ul > li:nth-child(n) {}
ul > li:nth-of-type(n) {}

/* 选鸡数 */
ul > li:nth-child(odd) {}
ul > li:nth-of-type(odd) {}

/* 选藕数 */
ul > li:nth-child(even) {}
ul > li:nth-of-type(even) {}

/* 选择妹有子元素弟 <div> */
div:empty {}

:not(p) {}

伪元素选择器

p::first-letter {}

p::first-line {}

p::selection {}

div::before {
  content: "⌈";
}

div::after {
  content: "⌋";
}

样式和选择器的权重

!important 样式 > 内联样式 > Id 选择器 > 类和伪类选择器 > 类型选择器 > 通配选择器 > 继承的样式

存在多个选择器时，权重相加计算，但并集选择器的权重单独计算。

选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
如果优先级计算后相同，此时则优先使用靠下的样式

见视频。

布局

元素在文档流中的特点：

块元素
块元素会在页面中独占一行(自上向下垂直排列)
默认宽度是父元素的全部（会把父元素撑满）
默认高度是被内容撑开（子元素）
行内元素
行内元素不会独占页面的一行，只占自身的大小
行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素
则元素会换到第二行继续自左向右排列（书写习惯一致）
行内元素的默认宽度和高度都是被内容撑开

盒子模型

border-width、boder-color、border-style 四个值 上右下左，三个值 上左右下，两个值 上下左右，一个值 上下左右。
边框样式可简写，如 border: orange 3px solid。
默认情况下盒子可见部分大小由内容区、内边距和边框共同决定，设置 box-sizing: border-box 后，width 和 height 指定内容区、内边距和边框总大小。
外边距影响盒子所占空间大小。
一个子元素在其父元素中，外边距大小 + 边框大小 + 内边距大小 + 宽度 = 父元素内容区宽度，如果不满足该等式（称为“过度约束”）且这几个值没有被设为 auto 的，浏览器会调整 margin-right，但如果有 auto 项（auto 对于 width、margin-left 和 margin-right 是合法的），则会调整 auto 项，而 width 的值默认是 auto。
子元素高度超过父元素内容区高度时会溢出，为父元素设置 overflow 控制溢出处理方式，默认为 visible，还可设置为 hidden、scroll 和 auto，其中 auto 为“根据需要显示滚动条”。
兄弟元素相邻垂直外边距的重叠：若符号相同，间距取绝对值最大值，否则取和——假设上方 <div> 设置了 margin-bottom: 100px，下方 <div> 设置了 margin-top: 200px，那么它俩的间隔是 200px 而不是 100px + 200px = 300px。
子元素具有 margin-top 时会影响父元素的布局，可以为父元素设置 padding-top 并修改其高度（或使用浮动中“清除浮动并取消外边距重叠”的代码）以达到想要的效果。
行内元素设置宽度、高度无效，内外边距和边框大小可设置，但垂直方向上不会影响网页布局，另外，外边距不会重叠。

浮动

浮动的特点：
1、浮动元素会完全脱离文档流，不再占据文档流中的位置
2、设置浮动以后元素会向父元素的左侧或右侧移动，
3、浮动元素默认不会从父元素中移出
4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
脱离文档流的特点：
块元素：
1、块元素不在独占页面的一行
2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开
行内元素：
行内元素脱离文档流以后会变成块元素，特点和块元素一样
脱离文档流以后，不需要再区分块和行内了

清除浮动（解决浮动导致的高度塌陷问题）并取消外边距重叠：
可利用 BFC 特性——现在可使用无副作用的 display: flow-root，优于有副作用的 overflow；
也可利用伪元素：

/*
  after 伪元素配合行 1、行 2、行 3 清除了浮动（解决了浮动导致的高度塌陷问题），
  而 before 伪元素配合行 1、行 2 取消了外边距重叠。

  另外，假设 <div> 有 clearfix 类，
  伪元素会在 <div> 的所有内容之后，而不是在 <div> 本身之后
*/
.clearfix::before,
.clearfix::after {
  content: ""; /* 行 1 */
  display: table; /* 行 2 */
  clear: both; /* 行 3 */
}

定位

position: relative 相对定位会提升元素的层级，不会使元素脱离文档流，不会改变元素的性质（块是块，行内是行内）。
position: absolute 绝对定位会提升元素的层级，会使元素脱离文档流，会使行内元素变成块元素，被内容撑开。
- 绝对定位的元素参照其包含块定位。
- 包含块正常情况下是离当前元素最近的祖先块元素，在开启绝对定位的情况下是离当前元素最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则为根元素。
- 绝对定位元素的布局：
  水平布局
  left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度
  当我们开启了绝对定位后:
  水平方向的布局等式就需要添加left 和 right 两个值
  此时规则和之前一样只是多添加了两个值：
  当发生过度约束：
  如果9个值中没有 auto 则自动调整right值以使等式满足
  如果有auto，则自动调整auto的值以使等式满足
  可设置auto的值
  margin width left right
  因为left 和 right的值默认是auto，所以如果不指定left和right
  则等式不满足时，会自动调整这两个值
  垂直方向布局的等式的也必须要满足
  top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度
position: fixed 固定定位的大部分特点同绝对定位，唯一的不同是固定定位的元素参照浏览器的视口定位。
position: sticky 粘滞定位的大部分特点同相对定位。粘滞定位可使元素在到达某个位置时固定。
z-index 设置元素显示的层级，如果层级一样，则优先显示靠下的元素，祖先元素的层级再高也不会盖住后代元素。

弹性布局

设置弹性容器用 display: flex 或 display: inline-flex。
主轴：弹性元素排列的轴，交叉轴：与主轴垂直的轴。
作为弹性元素的行内元素的宽高生效。
弹性容器样式的属性：
- flex-direction 指定弹性元素的排列方式，可选 row（默认）、row-reverse、column、column-reverse。
- flex-wrap 设置弹性元素的换行方式，可选 nowrap（默认）、wrap（沿交叉轴正方向换行）、wrap-reverse（沿交叉轴负方向换行）。
- flex-flow 是 flex-direction 和 flex-wrap 的简写属性。
- justify-content 指定弹性元素在主轴上的对齐方式，flex-start 默认，首端对齐，flex-end 末端对齐，center 居中，space-around 空白分布到弹性元素两端，space-evenly 空白分布到弹性元素单侧，space-between 空白只分布到弹性元素之间。
- align-items 指定弹性元素在交叉轴上的对齐方式，stretch 默认，同一行的弹性元素高度相同或同一列的弹性元素宽度相同，flex-start 首端对齐，flex-end 末端对齐，center 居中，baseline 沿基线对齐。
- align-content 指定弹性元素在多轴线情况下的对齐方式（说人话就是各行或各列如何对齐），可选 stretch（默认）、flex-start、flex-end、center、space-between 和 space-around，详见示例（会有吧……算了，看《Flex 布局教程：语法篇》吧）。
弹性元素样式的属性：
- flex-grow 决定弹性元素如何分配弹性容器的剩余空间，设为 0（默认）时，弹性元素不伸展，否则按比例占用空间。
- 与之类似的是 flex-shrink，决定弹性元素收缩的方式。
- flex-basis 指定弹性元素在主轴上的基础长度，默认 auto，使用弹性元素自身的宽度或高度。
- flex 是 flex-grow、flex-shrink 和 flex-basis 的简写属性，默认 initial，等同 0 1 auto，auto 等同 1 1 auto，none 等同 0 0 auto。
- order 指定弹性元素的排列顺序。
- align-self 会覆盖弹性容器的 align-items;

字体与背景

Font Awesome 的使用方式见官方文档。

使用自定义字体：

@font-face {
  font-family: myfont;
  src: url("blabla");
}

p {
  font-family: myfont;
}

字体的简写属性：font: 字体样式字重字体大小/行高字体族，有些项可省略，但这样会使用缺省值，从而覆盖掉前面相关的样式。
text-align 可选 left（默认）、right、center 和 justify（两端对齐）。
vertical-align 可选 baseline（默认）、top、bottom 和 middle（中线对齐），也可直接设置数值。

文本溢出显示省略号：

div {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

background-image: url("blabla") 设置背景图像。
background-repeat 可选 repeat（默认）、repeat-x、repeat-y、no-repeat。
background-position: right center 设置背景图像位置在元素右上角，也可以通过数值设置。
background-clip 设置背景裁剪：
- border-box 默认，背景会出现在边框、内边距、内容区下方。
- pedding-box 背景会出现在内边距、内容区下方。
- content-box 背景会出现在内容区下方。
background-origin 设置背景偏移量计算原点，可选 border-box、pedding-box、content-box，默认值为 pedding-box。
background-size: cover 设置背景图片比例不变，将元素铺满，content 设置背景图片比例不变，完整显示，另外，background-size 可通过宽高设置。
background-attachment 设置背景是否跟随元素移动，scroll 默认，跟随元素移动，fixed 不跟随元素移动，设置 fixed 后背景图像相对窗口定位。
背景的简写属性：background，background-size 必须写在 background-position 后边，用 / 分隔，background-clip 必须写在 background-origin 后边。
渐变：

动画

transition-property 指定欲添加过渡效果的属性，多个属性之间以 , 隔开，如果所有属性都需要过渡效果，则可以使用 all，但属性的值如果是 auto，就无法添加过渡效果。
transition-duration 的单位是秒或毫秒。
transition-timing-function 可选值 ease（默认，慢速开始，先加速后减速）、linear、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）、cubic-bezier()（贝塞尔曲线）、steps()（分步，第一个参数为步数，第二个参数可选 start 或 end，表示在时间段开始或结束时添加过渡效果）。
transition-delay 延时。
使用简写属性 transition 即可，如果同时指定 duration 和 delay，则第一个数值为 duration。
animation：
沿 X 轴正方向平移 100 像素：translateX(100px)，沿 Y 轴负方向平移 50%：translateY(-50%)。
要让 Z 轴的平移显示出效果，给 <html> 设置 perspective，背面是否显示由 backface-visibility 控制。
transform-style: preserve-3d 启用 3D 变形效果。
缩放：scale()、scaleX()、scaleY()、scaleZ()。
transform-origin 设置变形原点。

Less

// 双斜杠注释回来了！！！但它不会保留在生成的 CSS 文件中
/* 这样的会保留 */

// 支持嵌套
.box-1 {
  background-color: red;

  .box-2 {
    background-color: green;

    .box-3 {
      background-color: blue;

      &:hover { // 表示 hover 状态下的 box-3 元素，& 为父选择符
        background-color: dodgerblue;
      }
    }
  }
}

// 变量
@hw: 600px;
@theme-color: dodgerblue;
@class-name: box-1;

// 变量在这种情况下使用时需添加花括号
.@{class-name} {
  width: @hw;
  height: $width; // 使用 width 的值
  background-color: @theme-color; //这里不用加花括号
}

// 扩展（extend）
.box-1 {
  width: 200px;
  height: 100px;
}

// 在 box-1 元素样式的基础上扩展
.box-2:extend(.box-1) {
  color: red;
}

// 实现相同效果的另一种方式——混合（mixin），此时无法在 CSS 文件中找到 box-mixin 元素样式，因为它是专门用来混合的
.box-mixin() {
  width: 200px;
  height: 100px;
}

.box-1 {
  .box-mixin;
}

.box-2 {
  .box-mixin;
  color: red;
}

// 混合可以这么用
.box-mixin(@w, @h, @bg-color: red) {
  width: @w;
  height: @h;
  background-color: @bg-color;

  &:hover {
    height: (@h / 2); // 运算符两端加空格，使用除法时应加括号。如果有单位符号，单位符号也要包含在括号内，如 height: (175rem / 40)
    background-color: darken(@bg-color, 30%); // 加深颜色
  }
}
  
.box-1 {
  .box-mixin(200px, 100px); // 背景颜色使用默认值
}
  
.box-2 {
  .box-mixin(@bg-color: blue, @h: 100px, @w: 200px); // 不用按顺序写
}

// 引入其他 Less 样式，相当于 C++ 的 #include？
@import "some.less";

移动端适配

默认情况下，CSS 像素与物理像素的比值是 1，这个比值可通过改变视口大小改变。
移动端默认的视口宽度是 980px。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 设置完美视口。
100vw = 1 视口宽度。

为元素设置宽高：

html {
  // 设置 1rem 大小，其中 750 是设计图宽度，40 是一个系数，确保最终的 font-size 大于 12px，750 和 40 可设置为变量
  font-size: (100vw / 750) * 40;
}

.some-ele {
  // 240 是设计图中该元素的宽度，这里除以 40 以抵消上文 font-size 乘以 40 的影响
  width: (240rem / 40);
  height: (80rem / 40);
}

响应式布局

@media 媒体查询，媒体有四种类型：all、print、screen、speech，可用 ,（“或”）连接，媒体类型前方可加 only 兼容老旧浏览器。

媒体查询的常见写法：

/*
  超小屏幕：max-width: 768px
  小屏幕：min-width: 768px ……
  中屏幕：min-width: 992px ……
  大屏幕：min-width: 1200px
*/

@media only screen and (min-width: 500px) and (max-width: 700px) {
  html {
    background-color: dodgerblue;
  }
}

杂项

em 单位使用元素字体大小（font-size）计算，rem 单位使用根元素（<html>）字体大小计算。
字体大小除 0 外，最小值是 12px。
<p> 中插入 <img>，<img> 会沿基线对齐，导致它与 <p> 底部存在空隙，可对 <img> 设置 vertical-align: top 解决。
使用 object-fit 使图片宽高适应。
RGBA 颜色 rgba(0–255, 0–255, 0–255, 0–1)。
十六进制颜色“两两重复”时可简写，如 #ffff00 可简写为 #ff0。
HSL 颜色：Hue（色相）、Saturation（饱和度）、Lightness（亮度），hsl(0–360, 0–100%, 0-100%)。
无法单独设置 a:visited 字体大小。
display 可选值有 inline、block、inline-block、table 和 none。
outline 设置元素轮廓，用法与 border 相同，但不影响元素大小。
圆形：border-radius: 50%。
给 <body> 设置背景颜色实际上是给 <html> 设置背景颜色。如果要看到 <body>，可以设置边框。

原生 CSS 变量与计算函数（兼容性差）：

html {
  --theme-color: dodgerblue;
  --hw: 600px;
}

div {
  width: calc(var(--hw)/2);
  height: calc(var(--hw)/3);
  background-color: var(--theme-color);
}

表格样式：

table {
  width: 50%; /* 表格默认由内容撑开。这里不使用默认行为，指定 50% 宽度 */
  border: 1px black solid;
  border-collapse: collapse; /* 使表格边框重叠 */
}

td {
  border: 1px black solid;
  /*
    <td> 中的元素（不只是文本）受到 vertical-align 的影响，
    并且 vertical-align: middle 采用实际的垂直居中而不是中线对齐
  */
  vertical-align: middle;
  text-align: center;
}

/* 交错行颜色 */
tr:nth-child(odd) {
  background-color: #cff;
}

/*
  如果表格没有使用 <tbody> 而是直接使用 <tr>，浏览器会自动创建 <tbody>。
  使用子代选择器时应这样写：
  tbody > tr {}
  而不是这样写：
  table > tr {}
*/

小三角：

div {
  width: 0;
  height: 0;
  border: 10px transparent solid;
  border-top: none;
  border-bottom-color: green;
}

各种使元素居中对齐的方法：

/* 水平居中 */
.center {
  /* 设置宽度后，左右外边距设为 auto */
  width: 200px;
  margin: 0 auto;
}

/* 单行文字在父元素内垂直居中 */
.parent {
  height: 40px;
  line-height: 40px; /* 与 height 一致 */
}

/* 水平、垂直居中（利用绝对定位） */
.ele {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* 水平、垂直居中（利用绝对定位与平移） */
.ele {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* 水平、垂直居中（利用表格单元格） */
.box-1 {
  display: table-cell; /* 使 .box-1 元素以表格单元格的形式显示 */
  vertical-align: middle; /* 垂直居中 */
  width: 300px;
  height: 300px;
  background-color: orange;
}

.box-2 {
  width: 100px;
  height: 100px;
  background-color: yellow;
  margin: 0 auto; /* 水平居中仍需使用 margin */
}

/* 水平、垂直居中（利用弹性布局） */
.box-1 {
  display: flex;
}

.box-2 {
  justify-content: center;
  align-items: center;
}

未完待续……？