HTML/CSS 常见问题参考 - sky963-暗夜曙光

注：本页持续不定时更新

一.API/参考

官网-w3school-CSS 参考手册
 官网-w3school-CSS 选择器参考手册

二.常见问题

1. table 的 cellpadding cellspacing 属性失效 _{[1], [2], [3]}

table  { border-collapse:collapse; }
td, th { border:1px solid black; padding: 3px 10px; }

2. CSS 垂直居中对齐 _[1]

img    { vertical-align:middle; }

3. CSS 边框样式 _[1]

p      { border-style: solid; }

4. HTML行内元素、块状元素、行内块状元素的区别 _[1]

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：

(1)display:inline;转换为行内元素
  a.设置宽高无效
  b.对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
  c.不会自动进行换行

(2)display:block;转换为块状元素
  a.能够识别宽高
  b.margin和padding的上下左右均对其有效
  c.可以自动换行
  d.多个块状元素标签写在一起，默认排列方式为从上至下

(3)display:inline-block;转换为行内块状元素
  a.不自动换行
  b.能够识别宽高
  c.默认排列方式为从左到右

5. CSS 选择器 _{[1], [2]}

/* CSS 子元素选择器, */
h1 > strong { color:red; }

/* CSS3 :nth-child() 选择器, */
p:nth-child(odd) { background:#ff0000; }

6. 浏览器后退时清空表单数据, <input> 标签的 autocomplete 属性 _{[1], [2]}

<!-- autocomplete 属性规定输入字段是否应该启用自动完成功能 -->

<form autocomplete="off" >
    <input type="email" name="email" autocomplete="off" />
</form>