HTML+CSS+Less复习

1. vs code快捷键
   ctrl + 回车——可不影响后文换行
   alt + shift + 上下方向键——复制
   lorem + tab键——自动生成一段英文
2. <h1>标签一般只有一个
3. <blockquote>标签表示块引用
4. <q>标签表示行引用，自带引号
5. 一般来说块级元素可以存放任何元素，但是<p>标签中不能放块级元素；行级元素不能存放块级元素，但是<a>标签除了自身都能嵌套
6. 列表可以嵌套
7. <a href="#">回到顶部
8. <a href="javascript:;">占位
9. 搜索引擎会根据<img>标签的alt属性确定图片，alt是替换文字，title是解释文字
10. webp具有jpg、gif、png等格式的优点，但兼容性差
11. base64编码可以将图片转换为字符，用字符表示图片，当图片需要和网页一起加载的时候使用
12. 内联框架iframe的内容不会被搜索引擎检索
13. 将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，加快网页的加载速度
14. 伪类选择器中的:nth-child()，括号中如果写n表示全部子节点，2n（或者even）表示偶数子节点，2n+1（或者odd）表示奇数子节点；换成:nth-of-type()则根据同类型节点选择

ul > li:first-child {
	//这个选择器如果ul的第一个子元素不是li，而是span之类的，那么不会有任何元素被选中，换成:first-of-type就行
}

15. 否定伪类:not()，符合条件的元素从选择器中去除

ul > li:not(:nth-of-type(3)) {

}

16. <a>标签的伪类选择器，:link表示未访问的链接，:visited表示访问过的链接（只能修改颜色）；相关的还有:hover表示鼠标移入，:active表示鼠标点击
17. 伪元素选择器，::first-letter，::first-line，::selection，::before，::after

p::before {
	content: 'abc';// before和after必须结合content属性使用
}

18. 背景和布局相关的属性不会被子元素继承
19. 选择器的权重，内联1000，id100，类和伪类10，元素1，通配0，继承无；分组选择器单独计算，其他相加计算，但选择器的累加不会超过其最大的数量级；若优先级相同，最下面的代码生效
20. em是相对于自身字体大小的倍数，rem是相对于根元素html字体大小的倍数
21. 除了名字和rgba，还可以用hsla来指定颜色，H是色相（0-360），S是饱和度，表示颜色的浓度，百分比表示，L是亮度，百分比表示
22. border-width属性可以不指定；border-color可以不指定，默认为color属性的颜色
23. 以margin-top为例，正值表示向下移动，负值表示向上移动，top和left移动盒子自身，bottom移动其他盒子；子元素的左右margin、左右border、左右padding和width之和必须等于父元素的width，如果不满足则称之为过度约束，此时margin-right将被自动调整以满足等式，以上情况适用于margin-left、margin-right、width三个值不为auto时；有auto调整auto，width的默认值就是auto；width和外边距都为auto时，width自动变成最大值，外边距自动为0；如果两个外边距都为auto，则左右值相等
24. 垂直兄弟元素之间的边距（上放的margin-bottom和下方的margin-top）会取两者中的较大值；一正一负取和；都负取绝对值大的；垂直方向的父子元素的相邻外边距（比如子盒子和父盒子的上边重叠），子元素的会传递给父元素
25. 行级元素垂直方向的padding、border和margin不会影响布局
26. box-sizing属性设置盒子尺寸的计算方式，content-box为默认值，width和height设置内容区大小；border-box，width和height设置可见宽的大小
27. outline用法和border相同，但不会影响可见宽的大小
28. 如果浮动元素的上方是一个没有浮动的块级元素，则浮动元素无法上移
29. 文字不会因为浮动而被遮住，可以用浮动来做文字环绕
30. 脱离文档流的行级元素会变成块级元素（可以设置width和height）
31. 块级元素脱离文档流以后，宽度和高度默认被内容撑开
32. 开启块级格式化环境（BFC）的元素：（1）不会被浮动元素覆盖；（2）如果上边重叠，不会把外边距传递给父元素；（3）可以包含浮动的子元素
33. 开启BFC的方式：（1）float的值不是none；（2）position的值不是static或者relative；（3）display的值不是inline或者block；（3）overflow的值不是visible
34. BFC可以用来解决：（1）高度塌陷问题，清除浮动；（2）外边距重叠问题，设置不同的BFC；（3）制作自适用的右侧盒子
35. clear解决上边距重叠问题和清除浮动可以将::before和::after设置为dispaly: table，然后添加clear: both属性

.clearfix::before, .clearfix::after {
	content: '';
	display: table;
	clear: both;
}

display:table本身无法触发BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以触发BFC，简单说就是，触发块级格式化上下文的是匿名框，而不是display:table

36. 定位会提高元素的层级，相对定位没有脱离文档流，绝对定位会脱离文档流
37. 绝对定位根据其包含块定位，其包含块为其最近的开启定位的祖先元素，若没有，则相对于根元素html
38. 固定定位其实是一种绝对定位，参照的是视口
39. 粘滞定位和相对定位特点一致，但兼容性不好

.nav {
	position: sticky;
	top: 0;
}

40. 开启了绝对定位以后，之前的布局水平等式变为：left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区域宽度，此时过度约束时被调整的是right；可以设置为auto的值除了width和margin，增加left和right，这两个值为0时auto的规则和之前一样，不过他们的默认值是auto；垂直等式也要满足，过度约束时调整bottom；可以利用以下代码垂直居中

.box2 {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
}

41. background-clip可以改变背景作用的范围
42. background-origin可以改变背景图片偏移量计算原点
43. background-size除了设置数值以外，cover表示铺满，contain表示包含
44. background-attachment设置背景图片是否跟随元素移动，默认值为scroll，fixed固定
45. background-image: linear-gradient线性渐变；repeating-linear-gradient可以平铺的线性渐变；radial-gradient放射渐变
46. @font-face可以将服务器中的字体提供给用户使用

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

47. 行高不带单位表示字体大小的倍数，默认是1.333
48. <p>标签里放<img>标签，图片会与<p>标签之间存在缝隙，图片作为替换元素，对齐方式和文字一样，所以默认的vertical-align为baseline，改成top或者bottom就行
49. 设置文本溢出

.box {
	white-space: nowrap; // pre保留格式
	overflow: hidden;
	text-overflow: ellipsis;
}

50. autocomplete="off"关闭自动补全，可放在<input>标签或者<form>标签中
51. transition过度必须在有效值之间，比如auto就不行
52. 变形不会影响页面的布局
53. 居中可以利用变形设置

.box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

54. 使用translateZ必须先设置视距，一般给html元素

html {
	perspective: 800px;
}

55. 旋转和平移会改变坐标轴，因此先后顺序会导致结果不同
56. 3D的变形需要设置transform-style: preserve-3d
57. transform-origin设置变形的原点
58. CSS可以使用变量根元素中以--变量名: 属性值的方式定义，使用的使用用var(--变量名)；也可以使用calc()函数等，但兼容性不是很好
59. less中的样式可以嵌套着写，和CSS中.box1 .box2 {}效果一样

.box1 {
	.box2 {
	}
	>.box3 { // 也可以使用子元素选择器
	}
	&:hover { // &符表示外层的父元素，相当于.box1:hover
	}
}

60. less中的多行注释会被解析到CSS中，而单行注释不会
61. less的变量使用@变量名来定义和使用，作为类名或者属性名或者一个值的一部分使用@{变量名}

@a: 100px;
@b: box;
@c: test;
.@{b} {
	width: @a;
	height: $width; // 可以用$属性名的方式直接引用其他属性的值
	background-image: url("@{c}/bg.png"); // 引号必须 
}

62. 当一个选择器在另外一个选择器已有属性的基础上扩充时，可以使用

.box2:extend(.box1) {

}
// 或者
.box2 {
	.box1();// mixin混合，性能不如extend
}

63. mixin混合可以在一个选择器后加上括号使其不再是选择器，而只能被其他选择器使用的混合函数

.box1() {
}
.box2 {
	.box1(); // 括号可以省略
}
// 带参数，多个参数时按顺序对应，但使用时可以使用@x: 属性值的方式显示指定，此时可以任意顺序
.box1(@x) {
	width: @x;
}
.box2 {
	.box1(100px);
}

64. color: average(red, yellow);取颜色平均值；color: darken(red, 10%);加深颜色
65. less中的数值可以进行计算
66. 弹性容器的样式——display: flex;设置弹性盒子；flex-direction设置排列方向（主轴），默认横向；flex-wrap设置是否沿着辅轴方向换行；flex-flow是direction和wrap的简写属性；justify-content分配主轴剩余空间的方式；align-items设置元素在辅轴上如何对齐*（这两个可用于设置居中）；align-content分配辅轴剩余空间的方式（多行）；align-self覆盖当前弹性元素的align-items
67. 弹性元素的样式——flex-grow指定弹性元素伸展系数，父元素的剩余空间按照比例进行分配；flex-shrink收缩系数，当父元素的空间不足以容纳子元素时，对子元素进行收缩；flex-basis指定主轴上的基础长度，可能会和width和height冲突；flex可缩写以上三项；order值较大的项目，排在后面
68. 弹性元素的行级元素也可以设置宽高
69. 浏览器显示要先把CSS像素转换为物理像素，移动端视口默认是980的CSS像素
70. <meta name="viewport" content="width=device-width">设置视口大小，一般根据移动设备的最佳像素比设置，称之为完美视口
71. vw这个单位表示1%视口宽度，100vw表示一个视口宽度；给html设置vm单位的字体大小（适当扩大以大于12px），在其他地方就可以用rem来作为单位
72. 网页中字体大小最小是12像素
73. 响应式布局的关键是媒体查询@media 规则 {}，规则间逗号表或，and表与，not表取反；规则比如媒体类型only screen，all；比如媒体特性(min-width: 769px) and (max-width: 992px)，常用的断点有768px（超小屏幕），768-992px（小屏幕），992-1200px（中屏幕），1200px（大屏幕）