css_html_notes.md

CSS/HTML小知识(如CSS权重)

CSS权重

审查网页元素的css时, 常看到一些CSS属性有删除线

虽然知道这条属性不生效, 但具体原因一直没去研究

其实原因时该条属性被权重更高的同名属性覆盖了

比如 .text 里面的color属性会覆盖掉 p 里面的color属性

• important(CSS选择器权重值)/inline-styling: 1000
• ID: 100
• class: 10
• tag: 1

CSS Specificity - MDN

---

console.log输出添加颜色

console.log('%c green%c red', 'color:green', 'color:red')

文字间行距

常用 line-height: 100% 与margin/padding调整文字间行距

background-attachment

滚动时背景图固定

vw-vh单位

• 1vw = 1% of viewport width
• 1vh = 1% of viewport height
• 1vmin = 1vw or 1vh, whichever is smaller
• 1vmax = 1vw or 1vh, whichever is larger

viewport-sized css-trick

input失焦的onblur事件

onblur event - W3School

The onblur event is similar to the onfocusout event. The main difference is that the onblur event does not bubble

事件冒泡, 事件委托

Event.stopPropagation()停止事件触发往上冒泡传递

折叠功能:details-summary

summary折叠后显示

details被折叠内容...

marquee标签

marquee tag behavior="alternate"(往回弹),默认是scroll

滚动 效果 的CSS实现: animation: scroll 7s linear 0s infinite;

kbd标签

Ctrl + s : Save file // kbd tag

ruby标签显示拼音

拼音 pīn yīn

<ruby>
 拼音 <rt> pīn yīn </rt>
</ruby>

名词缩写(虚线下划线效果)

世界卫生组织WHO

abbr标签是个 border-bottom: 1px dotted 的样式

abbr常搭配dfn标签一起使用, dfn的样式是斜体

HTML is the standard markup language for creating web pages.

datalist

<form action="/action_page.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Firefox">
    <option value="Chrome">
  </datalist>
  <input type="submit">
</form>

表单的legend标签

userInfo UserName:
PawssWord:

legend标签在fieldset标签内才能生效

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

跨域

后端: nginx 或 web 框架加上 CROS

前端 ouath 需要弹窗无法做成内嵌，或者通过浏览器插件去请求绕开浏览器安全限制