《一起学前端 之 HTML / CSS 篇》是记录从 2020.3.31 开始，学习 HTML / CSS 的收获与感悟。
2020.3.31
HTML（超文本标记语言），超文本指的是什么？
超文本有两层含义，第一层是指：超越了文本限制，即用HTML写出来的页面，除了包含文本外还可以包含图片、声音、动画及多媒体等。第二层是指：超级链接文本，指可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。
2020.4.2
关于几个特殊的标签或属性
<!DOCTYPE html> 是用于指明当前代码使用的html的版本的，这个标签表示使用的是H5。
<html lang="en"> 其中的“lang” 指的是该页面是是用什么语言，“en”指的是英语，“zh-CN”指的是中文，比如，如果我的页面是使用<html lang="en"> 的，那么浏览器有可能会询问是否需要翻译该页面。
<meta charset="UTF-8"> 其中的“charset”是指该HTML页面所使用的字符集，“UTF-8”被称为万国符，即包含了所有国家的语言符号。如果不标注UTF-8，有可能会导致编辑器打开HTML文件的时候出现乱码。
常用HTML标签
<h1> - <h6>，表示一级到六级标题，双标签。
<p>，表示段落，双标签。
<br>，表示换行，且换行产生的间距不大，单标签。
<strong>，文本格式化标签，用于加粗，双标签。
<em>，文本格式化标签，用于倾斜，双标签。
<del>，文本格式化标签，用于添加删除线，双标签。
<ins>，文本格式化标签，用于添加下划线，双标签。
<span>，“小盒子”，一行能放多个，双标签。
<div>，“大盒子”，独占一行，双标签。
<img>，放置图像，宽高属性一般设置其中一个即可，双标签。
<a>，放置超链接。链接分为：外部连接（网址）、内部链接（本站网页）、下载链接（.exe或压缩包形式）、空链接（用于待定占位）、网页元素链接（音频图像等）和 锚点链接（用于定位该网页中的某个元素，用元素 id 作为关联，class不行）。跳转方式分为：新窗口打开(_blank) 和 原窗口打开(_self)。
<table>，表格标签，用于展示数据或布局，配合<tr>（表格行）、<td>（表格行中的单元格）、<th>（表格行中且作为表头的单元格）使用，然后配合使用<thead>和<tbody>可以更好地表示表格的语义。此外，注意合并单元格的方法：首先确认是列合并还是行合并单元格，然后给目标单元格（列合并设置左边的，行合并设置上边的）设置colspan/rowspan属性，最后删除多余的单元格。
<ul>，无序列表，用于整齐划一清晰地布局，配合<li>标签使用。
<ol>，有序列表，用于整齐划一清晰地布局，配合<li>标签使用。
<dl>，自定义列表，用于整齐划一清晰地布局，配合<dt>（项目名）、<dd>（项目名的描述）使用，一般是一个<dt>对应多个<dd>。注意，有一些布局看起来既可以用列表，也可以用表格，那就需要从语义方面去考虑使用哪一种了。
<form>，表单域，有action、method和name属性，它们分别表示交递表单的url，提交方式和该表单的名称。
<input>，根据type属性的不同，会有很多不同的表现形式，如下图：
其次，给不同形式的input表单控件设置name属性，可以唯一地标识每一个表单项目，比如给用户名输入框设置name=“username”。注意，同一项目的单选框或复选框需要设置相同的name。比如，性别这一项，单选框的name都要设置成sex，让用户只能选择其中一个选项，这样就可以达到单选且唯一标识的目的了。然后，每个input控件还有value属性，除了文本框的value是用户可见，其他的都是隐藏的，比如可以给性别项的单选框“男”设置value=“男”，这样表单提交过去之后，服务器后台就能知道表单上面每一项的具体内容了。此外，对于checkbox和radio，如果想要设置默认勾选，可以设置它的checked属性值为checked。
<label>，标签，用于绑定一个表单的控件，提升用户体验。
<select>，下拉表单，配合<option>使用，至少包含一个<option>，<option>的值是写在两个标签之间。
<textarea>，文本域，用于多行文本的输入。
相对路径与绝对路径
相对路径 是从当前文件的位置出发的，“../”表示 上一级目录，“/”表示下一级目录
绝对路径 通常是从盘符开始的，比如 D:\Eclipse\img.jpg 或 一个完整的网址 http://www.itcast.cn/images/log.gif
HTML中的特殊字符
比如 在 div 里面敲下多个空格，但页面也只会显示一个空格的效果。所以我们可以用多个“ ”，来得到多个空格的效果。
2020.4.3
css代码风格与规范
选择器与大括号之间需要有一个空格，属性对中冒号与属性值之间也需要有一个空格。比如
div {
margin: 10px;
}CSS引入方式
css引入方式有三种，分别为 行内样式表、内部样式表 和 外部样式表。
行内样式表：写在需要设置样式的标签内部，比如<p style="color:red;">
内部样式表：写在html页面的<style>标签里，通常再将<style>标签放在<head>标签中。
外部样式表：在html页面的<link>标签引入.css文件，比如 <link rel="stylesheet" href="style.css"> ，再将它放在<head>标签中。
css选择器
css选择器分为 基础选择器 和 复合选择器 。
1、基础选择器
基础选择器 分为：标签选择器、类名选择器、id选择器和通配符选择器。
其中通配符选择器使用 “ * ” 定义，它表示选取页面中所有元素标签。比如：
* {
padding: 0;
margin: 0;
}2、复合选择器
复合选择器是建立在基础选择器之上的，对基础选择器进行组合所形成的，它包括：后代选择器、子选择器、并集选择器 和 伪类选择器 等。
（1）后代选择器
后代选择器可以选择父元素里面的子元素，格式为 元素1 元素2 { 样式声明 } ，元素之间用空格隔开，后代元素包括儿子和孙子等，并且元素可以是任意的基础选择器。比如：
/* 这里是使class为nav的元素的子元素li内的a元素 变为黄色 */
/* .nav的后代包含li和a，其中li是儿子，a是孙子；a是li的儿子 */
.nav li a {
color: yellow;
}（2）子代选择器
子代选择器只能选择某元素最近一级的后代元素，即只能选择其亲儿子元素，格式为 元素1>元素2 { 样式声明 }，元素之间用大于号隔开，元素2指向会是其亲儿子元素，而不包括孙子元素重孙元素等。比如：
.nav>a {
color :red;
}（3）并集选择器
并集选择器可以选择多组标签，通常用于集体声明，为多个标签定义相同的样式，格式为 元素1,元素2{ 样式声明 }，比如：
/* 此处将所有div p 以及 class为pig的元素内的li 颜色设置为pink */
div,
p,
.pig li {
color: pink;
}（4）交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，语法如
h3.class{color:redd font-size:25px;}
（5）伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，特点为用冒号（：）表示，比如:hover，:first-child。伪类选择器包括：链接伪类选择器、结构伪类选择器等。
链接伪类选择器
跟链接相关，用法如下：
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接，即鼠标已按下但未弹起时的链接
注意：
此处的a标签可以用它的其他选择器来替代，比如类选择器 .nav:hover{ }。
为了确保生效，一定要按照LVHA的顺序去声明，即 :link/ :visited/ :hover/ :active 的顺序，否则有可能会达不到预期效果。
a标签具有默认样式，所以在实际开发中，需要单独给a标签设置样式。
:focus伪类选择器
跟表单相关，用于选取获得焦点（光标）的表单元素，一般情况下<input>类表单元素才能获取光标。用法如下：
点击文本框，文本框会变红
input:focus {
background-color: red;
}
css字体属性
font-family ：用于设置字体系列，比如 如下代码对 body 标签设置字体系列，并且会优先使用 Times New Roman 这个系列的字体，如果该字体不能生效，则使用 Times 字体，以此类推。
body {
font-family: 'Times New Roman', Times, serif;
}font-size: 设置字体大小。
font-weight：设置字体的粗细，属性如下图所示，推荐使用number作为属性值。
font-style：设置字体的风格，属性有 normal 和 italic ，分别表示 正常 和 倾斜。
另外，还有一个 font 复合属性，用于节省代码量。其中如果 line-height 是不带单位的，则代表行高为当前元素字体大小的数字倍。用法和作用如下图所示：
css文本属性
color：设置文本的颜色，属性值分为 预定义的颜色值、十六进制颜色、RGB代码。
text-align：设置某元素内文本内容的水平对齐方式，属性值有 left、right 和 center。
text-decoration：设置文本装饰，属性有 none、underline、overline 和 line-through，分别表示 默认、下划线、上划线 和 删除线。
text-indent：指定文本的第一行的缩进，通常是将段落的首行缩进，属性值的单位可以是px、em等。如：
p {
text-indent: 2em;
}line-height：设置文本行间距，但注意行间距的定义，行间距包含 上间距 + 文本高度 + 下间距。如果 字体大小为16px，而行间距为16px，则上间距和下间距都为0；如果 字体大小为16px，而行间距为26px，则上间距和下间距同为5px。如图：
另外，测量间距的一个小技巧是：测量上一行的最底部到下一行的最底部的间距，然后减去文本字体的大小并将结果除以二，就可以得到上间距/下间距了。
相对长度单位 em
em是一个相对单位，1em相当于当前元素一个文字的大小（font-size）。如果当前元素没有设置字体大小，1em会等于其父元素一个文字的大小。
单位 rem
rem 与 em 的区别是，前者是相当于 html 标签的字体大小，后者是相当于其父元素的字体大小。
Emmet语法
Emmet语法的前身是Zen coding，它使用缩写来提高 html/css 的编写速度，能快速生成 html/css 的结构。
2020.4.4
css的元素显示模式
HTML元素一般分为块元素和行内元素两种类型，另外还有行内块元素。
注意：
1 对于块元素，不论是否设置过宽高，它都会独占一行。对于行内元素，设置的宽高是无效的，默认宽度就是它本身内容的宽度，但要注意区分行内块元素（如 img），这类虽然算是行内元素，但是又有块元素的特性，可以设置大小。
2 文字类的元素内不能使用块级元素，比如<p>、<h1>-<h6>内部不能放置<div>标签，因为文字类的元素会被内部的块级元素所“割裂”，会变为两个文字类元素，如图：
3 行内元素只能容纳文本或其他行内元素。
4 <a>里面不能够再放<a>，可以放块级元素，但把<a>转换块级元素更安全。
5 行内块元素既有块元素又有行内元素的特点，比如有 <input> <img> <td> ，一行可以放多个行内块元素，且它们的宽高与内外边距都是可以控制的。
css元素显示模式的转换
当一个模式的元素需要另一种模式的特性时，可以进行元素模式的转换。比如想要增加<a>的触发范围。
display: block; 转换为块级元素
display:inline; 转换为行内元素
display:inline-block; 转换为行内块元素
背景相关样式
background-color，设置背景颜色，默认值为 transparent，背景图片与背景颜色可以同时设置。如果想要给背景颜色设置半透明效果，可以使用 rgba 来设置颜色，其中 a 指的是 alpha 透明度，取值范围在 0 - 1 之间，取小数的话，可以把0去掉，比如0.3可以写成 .3。再次强调，背景颜色与背景图片的设置不冲突。
background-color: rgba(0,0,0,.3);background-image，设置背景图片，并且非常便于控制位置，默认值为none，放置图片可以设置url，比如
div {
background-image: url(xxx);
}backgroung-repeat，设置背景图片平铺属性，默认值为repeat，其他属性有no-repeat、repeat-x 和 repeat-y，分别指不平铺，向上平铺，向下平铺。
background-position，设置图片在背景中的位置，格式为： background-position：x y； 其中 x，y代表 x坐标 和 y坐标，可以使用方位名词和精确单位，它们可以混合使用。
使用方位名词时：
x处 可以填 left | center | right
y处可以填 top | center | bottom
如果指定的两个值都是方位名词，则两个值前后顺序任意。比如 left top 和 top left 效果一致。
如果只指定了一个方位名词，另一个值省略，则第二个值默认为 center。
使用精确单位时：
第一个指的是x坐标，第二个指的是y坐标。
如果至指定了一个数值，那该数值一定是指x坐标，另一个默认垂直居中。
方位名词与精确单位混合使用时：
第一个值一定是x坐标，第二个值一定是y坐标。
background-attachment，设置背景图像是否固定或者随着页面其余部分滚动，可设属性有 scroll | fixed ，可用于制作视差滚动效果。
背景属性的复合写法
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background：背景颜色 背景图片url 背景平铺 背景图像滚动 背景图片位置；
background: transparent url(image.jpg) repeat-y fixed top ;2020.4.5
CSS的三大特性
CSS三大特性分别为 层叠性、继承性、优先级。
层叠性：相同的选择器设置相同的样式，后面的样式会覆盖（层叠）先前设置的样式。但若样式不冲突，不会层叠。
继承性：子标签会继承父标签的某些样式，一般是文本类样式。恰当使用继承可以简化代码，降低CSS样式复杂性。
优先级：决定了选择器的权重，选择器选择的范围越小权重越大。权重如图：
注意：
1 继承下来的权重都是最低的。如图，p 标签的字体颜色会被设置为 pink 色。
<head>
<style>
#father {
color: red!important;
}
p {
color: pink;
}
</style>
</head>
<body>
<div id="father">
<p>内容</p>
</div>
</body>2 如果是复合选择器，会有权重的叠加，需要计算权重，如下为复合选择器及其权重：
div ul li -----> 0,0,0,3
div ul li li li li li li li li li -----> 0,0,0,11（注意 这里的权重是不会进位的）
.nav ul li -----> 0,0,1,2
a:hover -----> 0,0,1,1
3 下图所示的第一个 li 的颜色为红色
<head>
<style>
/*权重为0,0,1,1*/
.nav li {
color: red;
}
/*权重为0,0,1,0*/
.pink{
color: pink;
}
</style>
</head>
<body>
<ul class="nav">
<li class="pink">第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
</ul>
</body>盒子模型
边框（boder）
border 有三个属性，border-width、border-style 和 border-color，分别指边框粗细（单位px）、边框样式 和 边框颜色。
1 border的复合写法，比如 border： 1px solid red； 没有顺序要求。也可以分开设置，border-bottom： 1px solid red；
2 border-collapse是设置表格边框的方式，可以设置表格相邻边框合为一条。
border-collapse: collappse;3 从无到有设置border，会使盒子“变大”。
内边距（padding）
1 分开设置有padding-top、padding-right、padding-bottom 和 padding-left。
2 复合属性如下所示
3 给盒子指定 padding ，会使得盒子“变大”。下图为给一个内部盒子设置padding前后的变化，外部盒子同理。
外边距（margin）
1 与padding相似
2 与padding相似
3 块级盒子水平居中条件：盒子必须设置了宽度，盒子的左右margin都设置为auto，一般写作：margin：0 auto；
4 行内元素和行内块元素水平居中：给其父元素添加 text-align：center 即可。
5 给一个盒子设置 margin ，不会撑大盒子，顶多就是内嵌盒子跳出容器盒子的范围。
外边距合并
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。
注意
1 对于嵌套块元素垂直外边距的塌陷，如果嵌套盒子与父盒子的上方不是紧挨着的，就不会有塌陷问题。如图，外部盒子包含一个img和一个内部盒子，此时没有出现塌陷问题，外部盒子的 margin-top 仍为10px，内部盒子的 margin-top 仍为20px。
2 盒子内部浮动的盒子不会产生外边距合并的问题。
3 垂直方向上会有相邻块元素的外边距合并问题，且取两个元素的相关外边距的最大值作为两个元素间的外边距。
4 水平方向上，不存在相邻块元素的外边距合并问题。
清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清除掉网页元素的内外边距。
* {
padding: 0;
margin: 0;
}2020.4.6
ps基本操作
圆角边框
语法为 border-radius：length； length的单位为 px 或 %（相对于矩形短边）。设置圆角的原理其实就是，一个半径为 length px 的圆，与矩形盒子的各个角内边相切的时候，得到一段切点之间的圆弧，这就是最终会得到的效果。
圆角边框的应用
如果想要把矩形盒子修改成圆矩形，只要把 border-radius 的数值设置为短边的一半即可。另外，矩形盒子的四个角是可以分别设置角度的。
盒子阴影效果
文本阴影
2020.4.7
网页布局的三种方式
分别为 标准流（ 普通流 / 文档流 ）、浮动 和 定位。
标准流
所谓的标准流，就是标签按照规定好默认方式排列。即 block 、 inline 、 inline-block。
浮动
有很多布局效果，标准流没办法完成，而浮动可以改变元素标签的默认排列方式，所以此时就可以用浮动完成布局。
浮动的典型应用有：
1 让多个块级元素一行内排列显示（ 如果用inline-block，元素间会有难以控制的间隙 ）
2 一行中，一个块元素在最左边，一个块元素在最右边。
所以说，多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
设置需要改变位置的块即可，而且不需要设置display。
选择器 { float: none/ left/ right ;}浮动特性及用法
1 浮动元素会脱离标准流（即 脱标）
但是注意，浮动的元素不会去“主动遮盖”头上标准流，而标准流会“主动”到自己头上浮动元素的下方，即只有标准流才会去“占位置”，浮动的盒子只会影响浮动盒子后面的标准流，不影响前面的标准流。如图所示，两个div，修改相关的浮动属性后，变化如下：
2 浮动的元素会行内显示并且元素顶部对齐，元素间不会有间隙，并且会自动换行，注意下一行不会“顶上”上一行底部。
3 浮动的元素会具有行内块元素的特性
4 浮动元素经常和标准流父级搭配使用，让浮动元素在一个父容器里面浮动，而不是让其直接在浏览器上浮动。
5 一般情况下，一个容器中的元素，如果有一个浮动了，其他的也要设置浮动。
清除浮动
为什么？
当父级盒子没有设置高度，而子盒子设置了浮动，父盒子高度可能会变为0，以至于后面跟父盒子同级的盒子会“顶”上来，进而影响后面的布局，如果设置了高度则不需要清除浮动。如图：
本质
清除浮动元素脱离标准流造成的影响
解决方法
1 额外标签法（隔墙法）
w3c推荐做法，书写简单，但是添加了无意义的标签，结构化比较差。
做法是 在末尾浮动元素后添加一个块级的空标签，如<div>，并且给其设置 clear：both
2 父级盒子设置 overflow：hidden
书写简单，但是会隐藏溢出部分。
做法是 给父盒子添加 overflow 属性，并将其设置为 hidden、auto 或 scroll。
3 父级盒子使用after伪元素
结构语义化正确，需要考虑兼容。
做法是 给父盒子添加这段样式：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /*兼容IE6、7*/
*zoom: 1;
}4 父级盒子使用after、befor伪元素
结构语义化正确，需要考虑兼容.
做法是 给父盒子添加这段样式：
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}定位
为什么?
实现标准流和浮动无法实现的效果
定位的组成
定位 = 定位模式 + 边偏移
定位模式
定位模式决定元素的定位方式，通过css的 position 属性来设置，其值主要分为四个：
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
边偏移
边偏移就是定位的盒子移动到最终位置，有 top、bottom、left、right 4个属性，分别指顶端偏移量、底部偏移量、左侧偏移量、右侧偏移量。
静态定位
静态定位是元素的默认定位方式，即无定位。它按照标准流特性摆放位置，没有边偏移，较少使用。
相对定位
相对定位是指 元素在移动位置的时候，是相对它原来的位置来说的，俗称自恋型定位。
注意：不脱离标准流，即元素原本在标准流中的位置会继续保留，后面的盒子仍然以标准流的方式对待它。
绝对定位
绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的，俗称拼爹型。
注意：
1 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
2 如果祖先元素有定位（ relative / absolute / fixed），则会相对最近一级的有定位祖先元素来移动位置，即可能会相对于父亲元素或爷爷元素等。
3 绝对定位不再占有原先的位置，即 绝对定位会脱标
4 在定位中最常用的是 “子绝父相”，即子级用绝对定位，父级用相对定位；
父盒子需要有定位，才能限制子盒子在父盒子内显示；
因为子级用绝对定位不会占有位置，可以放在父级内的任何一个地方，不会影响其他兄弟元素；
如果父盒子不是相对定位，就没有占有位置，会被后方同级元素占掉位置；
5 有些情况父元素不需要占有位置，就会用到“子绝父绝”
技巧：
固定定位
固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
注意：
1 固定定位以浏览器的可视窗口为参照点移动元素
2 跟父元素没有任何关系，固定定位不占有原先的位置，即脱标。实际上，固定定位可以看做一种特殊的绝对定位。
3 固定定位的元素因为与父元素没有关系，所以一定要设定宽高。
4 不随滚动条滚动
技巧：
粘性定位（了解）
目前存在兼容问题，所以相关效果可以用js实现
定位拓展内容
绝对定位 / 固定定位和浮动类似。
1 如果行内元素添加绝对或者固定定位，可以直接设置高度和宽度
2 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3 脱标的元素（包含浮动元素 / 绝对或固定定位元素）不会产生外边距合并的问题
4 不同之处 绝对 / 固定定位会完全压住其下方的盒子，而浮动元素虽然也会压住下方的盒子但是不会压住盒子里面的文字与图片。原因是，浮动最初的用处是做文字环绕效果的，使文字围绕浮动元素排布。
定位叠放次序
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序（ z轴 ），z轴从屏幕内指向电脑外。
注意：
1 属性值可以是正整数、负整数 或 0，默认为auto，数值越大，盒子越靠上。
2 如果属性值相同，则按照代码书写顺序，后来居上。
3 属性值后不带单位。
4 只有定位的盒子才有 z-index属性
常见图片格式
1 JPG（JPEG），对色彩信息保留较好，高清且颜色多。
2 GIF ，最多只能存储256色，通常用来显示简单图形及字体，但可以保存透明背景和动画效果，实际经常用于一些图片小动画效果。
3 PNG ，结合了 GIF 和 JPG 的优点，存储形式丰富，可以保持透明背景。
4 PSD ，PS的专用格式，里面可以放图层、通道、遮罩层等。方便前端人员获取文字、图片、长度等。
2020.4.8
css书写顺序
2020.4.10
const变量可以修改吗？
const定义的基本类型不能改变，但是定义的对象是可以通过修改对象属性等方法来改变的。
2020.4.11
元素的显示与隐藏
主要有 display 、visibility 和 overflow 三种方式。
display 设置显隐
使用 display 隐藏元素后，元素不占有原来的位置。
display：none； 隐藏对象
display：block； 转换为块元素且显示元素
visibility 设置显隐
使用 visibility 隐藏元素后，元素依然占有原来的位置。
visibility：visible； 元素可视
visibility：hidden；元素隐藏
注意：
虽然元素依然占有原来的位置，但不代表它隐藏时还会响应hover：伪类。比如下图效果必须把hover：设置给底部盒子，而不能设置给遮罩层。
overflow 设置显隐
overflow 是设置元素中的内容溢出时的表现效果。
overflow：visible；不剪切内容也不添加滚动条
overflow：hidden；超出部分隐藏
overflow：scroll；不管内容是否有溢出，都会显示滚动条
overflow：auto；内容溢出自动显示滚动条，否则不显示
精灵图
目的
有效减少服务器接受和发送请求的次数，提高页面加载速度
特点
1 精灵图主要针对小背景图片的使用
2 借助 background-position 实现，一般情况下属性值都是负的，因为移动的是图片而不是盒子（向左向上移动）
3 注意 background-position 先写x偏移量，再写y偏移量
div {
width: 50px;
height: 50px;
background: url(../images/icons.png) no-repeat;
/*这里写的两个值分别为x和y的偏移量*/
background-position: -253px -3px;
}字体图标
可以去 iconfont 下载字体图标，相关用法可以下载图标的代码之后查看到，按照相关步骤即可使用图标，具体有 unicode 和 symbol等方式，前者只能是单色的，类似于用css画图标，后者相当于是一张svg图片。
2020.4.12
css画三角形
因为在盒子宽高不为0的时候，盒子边框各边为梯形；盒子宽高为0的时候，盒子边框各边为三角形。所以可以通过设置透明色，来让盒子只显示其中的几条边，来达到画三角形画梯形的目的。
注意：画三角形时，盒子宽高必须为0
应用：价格样式及其代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.price {
width: 200px;
height: 40px;
line-height: 40px;
/* background-color: pink; */
margin: 0 auto;
border: solid 1px red;
}
.current {
float: left;
position: relative;
margin-right: 10px;
width: 110px;
height: 100%;
background-color: red;
font-weight: 700;
text-align: center;
color: white;
}
i {
position: absolute;
top: 0px;
right: 0px;
width: 0;
height: 0;
line-height: 0px;
font-size: 0px;
border-bottom: 40px solid white;
border-top: 0px solid transparent;
border-left: 20px solid transparent;
border-right: 0px solid transparent;
}
.origin {
position: relative;
text-decoration: line-through;
color: grey;
}
</style>
</head>
<body>
<div class="price">
<span class="current">$1600<i></i></span>
<span class="origin">$5580</span>
</div>
</body>
</html>鼠标样式
取消表单文本输入框的轮廓
给 input 和 textarea 设置样式 outline:none，就可以去掉输入聚焦时的蓝色轮廓。
取消textarea的输入框拖拽
给 textarea 设置样式 resize：none 即可去掉文本框右下角的拖拽标记。
使用textarea标签时注意
如果textarea标签换行写的话，会默认在文本框内有一两行多余空格。
所以一般是把textarea的始末标签写在同一行，然后通过padding设置内边距。
vertical-align属性
使用 vertical-align 来让图片与文本对齐，同时因为图片这类行内块元素是默认与父盒子基线对齐的，所以也可以用 vertical-align 来去除行内块与父盒子底部的空白。此外，把行内块元素转换为块元素也可以去除。
文本显示省略号
单行文本
给文本设置样式
input {
white-space: nowrap;/*默认为normal自动换行，nowrap可以强制一行内显示文本*/
overflow: hidden;/*溢出内容隐藏*/
text-overflow: ellipsis;/*溢出部分用省略号表示*/
}多行文本
给文本设置样式
textarea {
overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;
}margin负值的应用
当盒子紧密排布，紧挨着的盒子的边框会叠在一起，会变得更粗，可以使用 margin-left: -1px; 来解决这个问题，数值是边框厚度。
但是如果还要给盒子添加 hover 样式，使得鼠标放在盒子上会改变边框颜色，则会出现如下情况，被遮盖的一边会没有变化，如下左图。解决的办法就是通过 hover 给盒子改变颜色的同时，让它变为相对定位，这样就可以在标准流盒子的上方了。但是如果同类的所有盒子都有相对定位，那就提升它的层级，设置 z-index：1；即可，如下右图。
布局技巧
利用文字围绕浮动元素的特性，可以完成一些布局。类似下面的布局，既可以用两个内部盒子分别设置左右浮动，也可以只设置左边图片左浮动，右边文字不用设置，因为浮动元素虽然会压住标准流的盒子，但是不会压住盒子里面文字。
2020.4.13
css初始化
为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，需要对css初始化，即重设浏览器的样式。
HTML5新增语义化标签
实际上这些标签相当于是<div>标签加上一些基本样式，但是这些标签更加有语义，这种语义化标准主要是针对搜索引擎的。另外，这些标签可以使用多次
<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section> 定义文档某个区域
<aside> 侧边栏标签
<footer> 尾部标签
HTML5新增多媒体标签
HTML5不是用插件的情况下，也可以原生地支持视频格式文件的播放，但是支持格式有限。
<video> 视频标签，主流浏览器一般都会支持MP4格式
<audio> 音频标签，主流浏览器一般都会支持MP3格式
HTML5新增input类型
HTML5新增表单属性
CSS3新特性
原来的选择器配合使用这些新的选择器使用会让修改样式更方便，另外属性选择器、伪类选择器的权重跟类选取择器一样都为10。比如：section div:nth-of-type(1){} 的权重为12。
属性选择器
如果省略了E，则不限制元素的类型。下图为选择 .loacal-nav li 内符合条件的元素。
属性选择器的应用
对于这些非兄弟关系且样式较为统一，但各自又略有不同的元素，可以给它们的 class 设置相同的前缀，然后用属性选择器进行统一的样式的书写，后面再单独用各自的 class 进行特别的描述。
如下图，给各个图标的 class 命名为 local-nav-icon-iconx（x为1/2/3/4...），这样可以通过 class^="loacal-nav-icon"对它们进行统一样式的编写。后面再单独对各自样式进行编写，.loacal-nav-icon-icon1{} .loacal-nav-icon-icon2{} ....
结构伪类选择器
/*把 ul 父元素的第一个子元素的背景颜色改为粉红色*/
ul :first-child {
background-color：pink;
}
/*把 ul 父元素的第一个li子元素的背景颜色改为粉红色*/
ul li:first-child {
background-color：pink;
}其中的 E:nth-child(n) 选择器强大，其中 n 如果是公式的话，会随特定子元素数量递增而递增。E:nth-of-type(n) 也是可以的，但要注意两者区别。
伪元素选择器
伪元素选择器可以帮助我们利用CSS新建标签元素而不需要HTML标签，从而简化HTML结构。
注意：
1 伪元素是插入父盒子内部的，before是插入到父盒子内部的前面，after是后面。
2 伪元素是行内元素，设置宽高需要转换模式。
3 样式div::before { } 的权重为2。
伪类和伪元素的区别
伪类用单冒号（:）表示，伪元素用双冒号（::）表示。
1 伪元素用于将特殊的效果添加到某些选择器，代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
2 伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
盒子模型优化
css3中可以通过 box-sizing 来指定盒模型，有两个值：content-box 和 border-box。
1 box-sizing：content-box 默认方式，盒子实际大小为 width + padding + border，所以盒子有可能会 paddng 和 border 被撑大。盒子向外“扩展”。
2 box-sizing：border-box 盒子的大小为width。在 padding 和 border 不超过width的前提下用这种方式，padding和border 不会撑大盒子，盒子向内“扩展”。
CSS3滤镜filter
filter 属性将模糊或颜色偏移等图形效果应用于元素
例如：filter: blur(5px); blur将图像模糊处理，数值越大越模糊。
CSS3 calc函数
calc（） 此CSS函数让你在声明CSS属性值时执行一些计算。
例如：width: calc(100%-80px); 可以让宽度永远比其父盒子小80px。括号里面可以使用 + - * / 来进行计算。
CSS3过渡
语法： transition: 属性 花费时间 运动曲线 何时开始 , ...... ;
1 属性：指的是要变化的css属性，可以是宽度高度、背景颜色、内外边距等。如果想要所有属性都变化过渡，可以写一个 all 。
2 花费时间：单位是秒，如 0.5s
3 运动曲线：默认为ease，可省略
4 何时开始：即延迟触发时间，单位是秒，默认为0s，可省略
div {
height: 100px;
width: 200px;
background-color: red;
transition: width 0.5s,height 0.5s;/*逗号后面可以继续添加其他变化*/
}
div:hover {
height: 200px;
width: 300px;
}transition 使用方式：哪个元素过渡就给哪个元素加，并且设置其变化的属性。
transition 应用：
鼠标经过时切换图标，配合精灵图可以实现。
鼠标经过时，进度条增加，套两个盒子可以实现，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
.bar{
display: inline-block;
width: 150px;
height: 16px;
border: 1px solid red;
border-radius: 8px;
overflow: hidden;
}
.bar-in{
width: 20%;
height: 16px;
background-color: red;
border-radius: 0 8px 8px 0;
transition: width 0.5s;
}
.bar-in:hover{
width: 100%;
}
</style>
</head>
<body>
HP
<div class="bar">
<div class="bar-in">
</div>
</div>
</body>
</html>关于初始化CSS样式的方法
初始化页面CSS的方式又如下两种，第一种是使用通配符，代码简洁，但是因为涉及标签过多，效率偏低。第二种是列举需要初始化样式的标签，代码较繁杂，但是涉及标签较少，效率偏高。
图片如何转为ico格式
从ps导出bmp格式的图片，然后修改拓展名为ico即可。
引入网站favicon图标
在 html 页面里面 <head> 标签内引入代码即可。另外，一般把 ico 文件放在根目录下。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">网站SEO搜索引擎优化
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>品优购商城-正品低价、品质保障、配送及时、轻松购物！</title>
<meta name="description"
content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购">
</head>
5. 但类似于注册页面这种需要保护隐私的，就不需要seo优化了。
2020.4.20
移动盒子位置的方法
定位 、 调整盒子的外边距 、2D转换移动
2D转换
移动 translate
translate 可以改变元素在页面中的位置，类似于定位。
/*x y 轴的变化一起写*/
transform: translate(x,y);
/*x 轴的变化*/
transform: translateX(n);
/*y 轴的变化*/
transform: translateY(n);
特点：
1 定义2D转换中的移动，沿着X和Y轴移动元素。
2 translate最大的优点，不会影响其他元素的位置。定位会脱标，因而定位是会影响其他元素的。
3 translate中的百分比单位是相对于自身元素的宽高而言的。所以，以前在定位中如果要让内部盒子居中，需要先偏移50%，再偏移自身宽高的一半。现在可以这么做，先偏移50%，再用transform：translate(-50%,-50%)。这样，即使盒子的宽高变了，也不会影响盒子的位置，不需要去改第二次偏移的数值。
4 对行内标签没有效果。
旋转 rotate
2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转，旋转的度数是相对于原正常位置而言的，而非当前位置。
/*
单位为deg
角度为正，顺时针；度数为负，逆时针；
默认旋转中心为元素的中心点
*/
transform: rotate(46deg);案例：
鼠标放在盒子内，内部的小箭头会转向。
案例相关其他知识：
CSS三角的写法（图片，字体图标，大于小于号替代，边框）/
通过父盒子hover伪类可以改变伪元素样式
div {
position: relative;
width: 200px;
height: 50px;
background-color: pink;
}
div::after {
position: absolute;
content: "";
top: 13px;
right: 13px;
height: 10px;
width: 10px;
border-right: 2px black solid;
border-bottom: 2px black solid;
transform: rotate(45deg);
transition: all 0.5s;
}
div:hover::after{
transform: rotate(-135deg);
}缩放 scale
可以放大和缩小元素
transform: scale(x,y);特点：
1 x 与 y用逗号隔开
2 transform: scale(1,1); 宽高为原来的一倍，即没有放大
3 transform: scale(2,2); 宽高为原来的两倍；transform: scale(0.5,0.5); 宽高为原来的0.5倍。
4 transform: scale(2); 若只写一个参数，第二个参数和第一个参数一样，相当于（2，2）
5 scale 可以设置转换中心点缩放，缩放时中心点“不动。默认以中心点缩放，且不影响其他盒子。
转换中心点 transform-origin
设置元素转换的中心点
transform-origin: x y;特点：
1 x 和 y 使用空格分开
2 x y 默认值为50% 50% ，即元素中心点
3 x y 值为像素 或 方位名词 （top bottom left right center）
2D转换综合写法
div:hover {
transform: translate(300px, 0) rotate(100deg) scale(1.1, 1.1);
}CSS3动画 animation
animation 可以通过设置多个节点（%）来精确控制一个或一组动画，可以结合transform使用，来实现复杂的动画效果。
相比较 transform+transition ，动画可以实现更多的变化，更多的控制，连续自动播放等。
使用方法大概为，先用 @keyframes 定义动画，然后给需要变化的元素设置动画 animation-name 以及动画时长 animation-duration 。
/*用keyframes定义动画*/
/*
0%是动画的开始，100%是动画的完成
百分比是用来规定变化发生的时间，
用 from to 可以替代 0% 和 100%
*/
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(300px, 0) rotate(360deg);
background-color: lawngreen;
}
50% {
transform: translate(300px, 300px) rotate(-360deg);
background-color: indigo;
}
75% {
transform: translate(0, 300px) rotate(360deg);
background-color: hotpink;
}
100% {
transform: translate(0, 0);
}
}
/* div调用move动画*/
div {
width: 200px;
height: 200px;
animation-name: move;
animation-duration: 2s;
}其他属性如下所示：
其中 animation-timing-function 又有如下属性：
使用 steps 属性，可以模拟一种打字效果。
animation的复合写法
虽然复合写法不便于理解，但是复合写法可以为元素添加多个动画，动画之间用逗号分隔。
animation: bear 1s steps(8) infinite,move 1s;
css3 opacity
opacity 用于设置div元素的不透明级别，0为透明，1为不透明
div
{
opacity:0.5;
}2020.4.22
3D转换
移动 translate3d
透视 perspective
给body加透视，会让页面内3D效果更明显
body {
perspective: 500px;
}
旋转 rotateX / Y / Z / 3d
旋转左手准则
适用于 x y z 轴旋转，注意大拇指指向正方向
3D呈现 transform-style
默认值为 flat，为不开启3d立体空间
浏览器私有前缀
浏览器现状
移动端浏览器我们主要针对webkit内核进行兼容
视口 viewport
视口（viewport）就是浏览器显示页面内容的屏幕区域，分为布局视口、视觉视口和理想视口
meta视口标签
物理像素和物理像素比
为什么？
多倍图
因为用css像素设置大小的图片，被放到移动端有可能会被放大，会变得模糊，所以可以采取多倍图策略，图片与背景图片处理思路相同，但背景图片是用 background-size 处理。
二倍精灵图
背景缩放 background-size
background-size 规定背景图像的尺寸
ps切图扩展工具cutterman切多倍图
移动开发选择
移动端开发主要有两种方案：单独制作移动端页面（主流） 和 响应式页面兼容移动端（其次）
单独移动端页面
响应式页面
移动端初始化
可以使用normalize.css https://necolas.github.io/normalize.css/8.0.1/normalize.css
移动端需要特殊处理的样式
2020.4.23
流式布局（百分比布局）
一般流式布局需要设置最大最小宽高来进行控制。
flex弹性布局
与传统布局比较
布局原理
注意，一旦父容器设置了flex布局，父容器内的元素便不再区分行内元素/块元素等。
常见的父项属性
flex-direction
justify-content
区分 flex-end 和 flex-direction 中的 row-reverse / column-reverse ，前者是按照主轴方向排列好元素后，统一把它们放到主轴逆方向的一侧；后两者只是改变了主轴的方向。但要注意，flex-direction 和 justify-content 的设置并不冲突。
flex-wrap
align-items
align-content
划重点！ 用于换行的情况！
align-items 和 align-content 的区别
flex-flow
常见的子项属性
flex子项目占的份数
可以写数字，也可以写百分比
align-self
order
值越小越靠近初始位置
2020.4.25
背景线性渐变
2020.4.26
媒体查询
是什么
语法规范
使用案例1
根据屏幕宽度改变背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 如果宽度小于等于539px 则背景颜色变为蓝色 */
@media screen and (max-width:539px) {
body {
background-color: blue;
}
}
/* 如果宽度大于等于540px，则背景颜色变为绿色 */
@media screen and (min-width:540px) {
body {
background-color: green;
}
}
/* 如果宽度大于等于970px，则背景颜色变为红色 */
@media screen and (min-width:970px) {
body {
background-color: red;
}
}
</style>
<title>Document</title>
</head>
<body>
</body>
</html>
使用案例2
根据屏幕宽度改变页面字体大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
/* 如果宽度小于等于539px 则背景颜色变为蓝色 */
@media screen and (max-width:539px) {
html {
font-size: 100px;
}
}
/* 如果宽度大于等于540px，则背景颜色变为绿色 */
@media screen and (min-width:540px) {
html {
font-size: 150px;
}
}
/* 如果宽度大于等于970px，则背景颜色变为红色 */
@media screen and (min-width:970px) {
html {
font-size: 200px;
}
}
.top {
width: 100%;
height: 2rem;
background-color: green;
color: white;
line-height: 2rem;
text-align: center;
}
</style>
<title>Document</title>
</head>
<div class="top">
购物车
</div>
<body>
</body>
</html>【拓展】媒体查询引入资源
在 link 中判断设备尺寸，然后引入不同的css文件，建议依然是按照从小到大的顺序写
<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">Less
css弊端
比如用媒体查询根据屏幕宽度改变 html 字体大小时，底下的各个元素的 rem长度 需要前端人员手动计算。
Less介绍
Less变量
//定义一个粉色的变量
@color: deeppink;
//定义一个14px的字体大小变量
@font14: 14px;
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}Less嵌套
/*
//定义一个绿色的变量
@color: green;
body {
background-color: @color;
div {
background-color: red;
}
}
*/
/* 上述less代码会被编译成如下css */
body {
background-color: green;
}
body div {
background-color: red;
}
Less运算
Less编译
新建一个 xxx.less 文件，里面可以用 less 的语法写样式，但是这些样式是不能直接在 html 中使用的，还需要经过编译。
通过 vscode 的 easy less 插件，在保存 xxx.less 文件的时候，会同时编译生成相对应的 xxx.css 文件，然后把这个 xxx.css 导入 html 即可，并且在每一次更新 xxx.less 的时候，xxx.css 也会同步更新/刷新。
rem 适配方案技术
技术方案1 less + 媒体查询 + rem
步骤：
1 一般先选择一套标准尺寸的设计稿（目前标准多为750px宽，此处px指css像素），把这个设计稿页面宽度等分为15份（或10 / 20 等亦可），得到标准尺寸的 html font-size
2 某个元素在标准尺寸下的长度除以 html font-size 得到一个rem值，实际上这个rem值就是它的宽或高所占页面的“比例”
3 其他非标准尺寸下的 html font-size 也是相同的计算方法
4 以后根据媒体查询动态改变 html font-size 即可让该元素等比例缩放。虽然写法比较复杂，但是因为可以对高度也进行控制，所以写出来的页面效果要比流式布局和flex布局要好看很多。
技术方案2（推荐）flexible.js + rem
flexible.js介绍：
技术方案 1 2 整体实现思路差不多，但是方案2使用js进行适配，使得代码更加简洁。flexible.js就是代替媒体查询，将页面宽划分为十等份，自动设置html字体大小。
vscode插件cssrem 可以使得 px 转换为 rem
因为vscode默认cssroot根字体大小为16px，所以要根据情况修改cssroot。相比于使用less计算，用插件更为方便，但是使用less的维护性更好。使用less的情况下，如果根字体发生了变化，所有使用rem单位的属性都会跟着变化；但是，使用插件换算的，则需要手动去逐个修改各个使用rem单位的属性。
2020.4.27
将一个样式文件导入另一个样式文件里
@import "xxx.css";
@import "xxx.less";响应式开发的原理
2020.4.28
bootstrap
bootstrap简介
bs是基于 jQ（js）的样式框架
bootstrap布局容器
栅格系统简介
栅格系统跟rem不同的是，rem是根据屏幕宽度划分的，而栅格系统是根据内容宽度划分的。
栅格选项参数
补充：
如果列小于12，则该行会有空白剩余。
指定多个类名，每一列将会根据内容宽度，改变自身占的份数。
<div class="container">
<div class="row">
<div class="col-g-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-g-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-g-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-g-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
</div>
栅格系统列嵌套
<div class="container">
<div class="row">
<div class="col-g-3 col-md-4 col-sm-6 col-xs-12">
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-g-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-g-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-g-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
</div>栅格系统列偏移
补充：col-md-offset-4 指的是 当容器宽度为md时，该元素需要有“4份”的左边距
<div class="container">
<div class="row">
<div class="col-g-3 col-md-4 col-sm-6 col-xs-12">1</div>
<!-- <div class="col-g-3 col-md-4 col-sm-6 col-xs-12">3</div> -->
<div class="col-g-3 col-md-4 col-sm-6 col-xs-12 col-md-offset-4">3</div>
</div>
</div>栅格系统列排序
补充： push是把元素往右边“推”多少份的距离，pull是把元素往左边“拉”多少份的距离。
<div class="container">
<div class="row">
<div class="col-g-3 col-md-4 col-sm-6 col-xs-12 col-md-push-8">左边</div>
<div class="col-g-3 col-md-8 col-sm-6 col-xs-12 col-md-pull-4">右边</div>
</div>
</div>
响应式工具
用于针对不同设备展示或隐藏页面内容
2020.5.7
取消文字选中的样式 user-select
如果鼠标双击文本内容，则会将文本内容涂黑。通过 user-select 属性可以去掉该样式。
默认效果如图：
去掉默认样式后效果如图：
代码如下：
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}2020.6.6
classList 属性
其中切换类的意思是，如果该 element 有某类名，则删去；若无，则添加。
2020.7.5
实现局部滚动
设置 高度 / 宽度 后：
overfolw:scroll;
/* 或者 overflow-y:scroll；之类的 */
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
