本文介绍了HTML和CSS中的一些实用技巧，包括p标签内不能嵌套div标签的原因、去除标签间回车产生的空白、DOCTYPE的作用及不同渲染模式的区别、contentEditable属性的使用，以及CSS中line-height的正确设置方法、calc()函数的使用、防止文字被选中的方法等。
HTML
- p标签里面不能写div标签，不然解析时会变成兄弟关系。
- 标签之间的回车在显示时会有8px的文字分割符，去掉的话会使代码阅读性很差，我们可以通过设置字体大小0，使间隔消除。
- html上最上面的一行代码<!DOCTYPE html>代表标准渲染模式，去掉后以怪异/混杂渲染模式（用于向后兼容之前的版本）。通过document.compatMode可以查看是哪种渲染模式，返回'CSS1Compat'为标准模式，'BackCompat'为怪异模式。
- html的元素上设置了contentEditable属性后，改元素下的内容会呈现可编辑状态，即可以对下面‘这是一个可编辑段落。’文字进行删减。
<p contenteditable="true">这是一个可编辑段落。</p>
CSS
- 定义line-height时一般用数字，因为子元素未定义line-height时会继承父元素的，这时它的大小是用父元素的line-height乘以当前的font-size的大小，而用其它的方法，是通过先计算父集的line-height大小后直接继承大小，这样可能会导致font-size大于line-height，而产生叠加效果。
- calc（）可以计算css中的数值，可以把百分比和px或其他单位之间直接运算，注意计算的符号前后之间要写空格。
- 文字不可选中user-select: none;
auto 默认：如果浏览器允许，则可以选择文本。none ：防止文本选取。text ：文本可被用户选取。all： 单击选取文本，而不是双击。
扫一扫
181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
