HTML/CSS一些需要注意的基础知识

一、边框相关样式

border:0;

此样式表示边框存在但不可见，不过它仍然会占用内存。

border:none;

该样式意味着边框未被渲染。

二、HTML书写规范

1. 标签换行：合理的换行能提升代码的可读性。
2. 标签缩进：通过缩进清晰展示标签的嵌套关系。
3. 标签关闭：所有标签都必须正确关闭，确保HTML文档结构完整。
4. 标签名属性不为空：标签名和属性值应具有实际意义，不能为空。
5. <!DOCTYPE>声明：文档开头需进行<!DOCTYPE>声明，告知浏览器文档类型。
6. 编码格式为UTF - 8：采用UTF - 8编码，避免字符显示乱码问题。
7. 标签使用半角英文小写：标签名和属性名统一使用半角英文小写，增强代码规范性。
8. 合理注释：在关键代码处添加注释，方便后续维护和他人理解。
9. 类名、id名添加语义注释：类名和id名要有明确的语义，并可添加注释说明其用途。
10. 合理嵌套：标签嵌套要符合HTML规范，避免出现混乱的嵌套结构。

三、定位相关知识

相对定位

相对定位需要有一个参照物，这个参照物是元素自身。也就是说，在未设置相对定位时，元素处于默认位置。只有设置了相对定位，top、left等属性才会生效，元素会相对于其原来的位置进行偏移，并且原来的位置会保留，偏移后可能会遮盖其他层。

绝对定位

在布局中不存在完全没有参照的绝对定位。绝对定位的参照位置取决于其上级或上上级元素是否设置了position: relative;。当要进行绝对定位的元素确定好参照位置的元素后，就可以使用top、left等属性来确定其位置。如果其上级或上上级元素都未设置定位，那么该元素会根据body的位置进行定位。需要注意的是，绝对定位会使元素脱离文档流。

四、padding和margin的使用场景

• padding：用于处理父元素与子元素之间的间距，它会对元素的边框产生影响。
• margin：常用于同级子元素之间的间距设置。

五、块元素和行元素的区别

1. 独占一行情况：块元素会独自占据一行，而行元素不会。
2. 宽高设置：块元素可以设置宽度和高度，行元素一般无法设置宽高。
3. margin和padding设置：块元素可以设置margin和padding值，而行元素只能设置水平方向的padding和margin值。

六、浏览器常见的hack

• -（减号）：是IE6专有的hack。
• \9：对IE6/IE7/IE8/IE9/IE10都生效。
• \0：对IE8/IE9/IE10生效，是IE8/9/10的hack。
• \9\0：只对IE9/IE10生效，是IE9/10的hack。

七、常用浏览器的内核及内核前缀

八、移动端相关问题处理

去除tap后半透明灰色背景

在手机端测试页面时，部分浏览器在元素被点击（tap）后会出现一个半透明的灰色背景。起初可能会认为是outline的问题，但添加相关样式后可能并无效果。实际上，这是tap后的背景高亮效果。要重设这个表现，可以设置-webkit-tap-highlight-color为所需色彩，若要直接透明，可使用以下代码：

a, img, button, input, textarea {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

去掉textarea和input的默认样式

在IOS上，textarea和input有默认的圆角及内阴影等样式。若要去掉这些默认样式（Android未测试），可使用以下代码：

input, textarea {
-webkit-appearance: none;
}

禁止清除input文本输入缓存

多数浏览器默认会缓存input的值，只有使用Ctrl + F5强制刷新才能清除缓存记录。如果不想让浏览器缓存input的值，有以下两种方法：

方法一

在不想使用缓存的input中添加autocomplete="off"，示例如下：

<input type="text" autocomplete="off" name="test" />

方法二

在input所在的form标签中添加autocomplete="off"，示例如下：

<form action="#" autocomplete="off">
<input type="text" autocomplete="off" name="test" />
</form>