HTML，css注意事项
页面部分
页面布局
1.主要内容写在main中
2.表单元素写在form中，label和input互相搭配
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<button type="submit">Submit</button>
</form>
css部分
css命名：
1.injected-text 注入的文本（可用于添加一个文本时命名）
2. box 填充内容的盒子
3. yellow-box 黄色的盒子
css小技巧
- type属性选择器
[type='checkbox'] {
margin: 10px 0px 10px 0px;
} //设置所有复选框的边距
2.表示颜色
(1) red
(2)#000
(3)rgb(0,0,0)
(4)rgba(0,0,0,0)（最后一个值，给定不透明度，范围可以在1纯色不透明到0，完全透明，加在文本上可以突出文本）
3.改变字体大小写 text-transform
| 值 | 结果 |
|---|---|
| lowercase | 全变小写 |
| uppercase | 全变大写 |
| initial | 使用默认值 |
| capitalize | 首字母大写 |
| inherit | 使用text-transform父元素中的值 |
| none | 默认值 |
4.font-weight :800 (不需要加px)
css规范
1.书写顺序
(1) 位置属性[position,top,z-index,display,float (position ,float同时使用，float失效)]
(2)大小(width,height,padding,margin)
(3)文字(font,line-height,letter-spacing,color-text-align)
(4)背景(background,border)
(5)其他(animation,transition)
2.优先级
！important>内联样式>id声明>class声明
（id命名优先级高于class命名，同一元素、同一类样式的id声明将覆盖class声明，与style内排列顺序无关）
（！important用于确保某个元素具有特定css，如使用css库导致自身样式被覆盖）
.pink-text {
color: pink !important;
} //注意！important 写在值后和分号结束内，否则无效
3.css变量（css自定义属性）
（1）赋值，给其前面加两个连字符的名称
--penguin-skin: gray;
（2）创建变量后，可以通过引用给定的名称将其值分配给其他属性
.penguin {
--penguin-skin:gray; //创建变量
}
.penguin-top{
background: var(--penguin-skin);//应用
}
.penguin-top{
background: var(--penguin-skin,black);//添加备用值black，当给定变量不生效时执行备用值
}
//变量名需要完全匹配，否则不会应用样式
（3）继承
:root {
/* Only change code below this line */
--penguin-belly: pink;
/* Only change code above this line */
}
body {
background: var(--penguin-belly, #c6faf1);//所有使用的子元素将都是粉色
}
：root与文档根元素匹配的选择器，通常是html元素，它们将全局可用，并且可以从样式表中的任何其他选择器访问。
（4）作用
支持继承可以说成级联或者层叠，将可复用部分合并，方便下一层级复用，减少代码量，增强可持续性。
解决部分兼容问题，给浏览器提供回退机制
"red-box">
（5）简化媒体查询的方式
CSS变量可以简化您使用媒体查询的方式。
例如，当屏幕小于或大于媒体查询断点时，您可以更改变量的值，并且无论使用什么位置，变量都将应用其样式。
:root {
--penguin-size: 300px;
--penguin-skin: gray;
}
@media (max-width: 350px) {
:root {
/* Only change code below this line */
--penguin-size: 200px;
--penguin-skin: black; //缩放后这里的值会覆盖上面的值
/* Only change code above this line */
}
}
对齐
1.text-align
text-align: justify; 使除最后一行以外的所有文本行与行框的左右边缘相交。
text-align: center; 使文本居中
text-align: right; 右对齐文本
并且text-align: left;（默认）将文本左对齐。
css特效
1.box-shadow
box-shadow: offset-x offset-y blur spread color inset;
[X轴偏移量] [Y轴偏移量 ][阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];
// x右边偏移 y向下偏移 blur color
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
属性将一个或多个阴影应用于元素
offset-x：必需，取值正负都可。offset-x水平阴影的位置。
offset-y：必需，取值正负都可。offset-y垂直阴影的位置。
blur:可选，只能取正值。blur-radius阴影模糊半径，0即无模糊效果，值越大阴影边缘越模糊。
spread：可选，取值正负都可。spread代表阴影的周长向四周扩展的尺寸，正值，阴影扩大，负值阴影缩小。
color:可选。阴影的颜色。如果不设置，浏览器会取默认颜色，通常是黑色，但各浏览器默认颜色有差异，建议不要省略。可以是rgb(250,0,0)，也可以是有透明值的rgba(250,0,0,0.5)。
inset:可选。关键字，将外部投影(默认outset)改为内部投影。inset 阴影在背景之上，内容之下。
2.opacity
调整不透明度
opacity: 0.7;
值1是不透明的，根本不是透明的。
值为0.5是透视的一半。
值0是完全透明的。