继承失效以及个人经验

默认样式列表完整版https://blog.csdn.net/weixin_39846191/article/details/117829525?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5-117829525-blog-80332266.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-5-117829525-blog-80332266.pc_relevant_default&utm_relevant_index=10目录

继承失效

标签的默认样式

精确排版中，line-height的继承问题

---

       在学习前端的时候，难免会遇到一些问题，以下我就来分享一下我在学习html过程中遇到过的一些问题，希望大家也能够注意这些点。

继承失效

标签的默认样式

首先，请先看如下的标签默认样式列表（此表不完整，完整的可以去网上搜索）

body{ margin: 8px;line-height: 1.12 }
ol, ul, dir,menu, dd{ margin-left: 40px }
i, cite, em,var, address{ font-style: italic }
   //标题
h1{ font-size:2em; margin: .67em 0 }
h2{ font-size:1.5em; margin: .75em 0 }
h3{ font-size:1.17em; margin: .83em 0 }
h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu { margin: 1.12em 0}
h5 { font-size:.83em; margin: 1.5em 0 }
h6{ font-size:.75em; margin: 1.67em 0 }
h1, h2, h3, h4,h5, h6, b,strong { font-weight: bolder }
   //表格
th{font-weight: bolder; text-align: center }
caption{ text-align: center }
table{ border-spacing: 2px;}
thead, tbody,tfoot { vertical-align:middle }
td, th { vertical-align:inherit }

可以看到，html标签有着许多的默认标签样式，

对不可继承的属性，直接对对应标签设置样式清除即可。

对可继承的属性而言，

因为默认样式的优先级高于继承，所以，

无法通过继承覆盖默认样式，需要利用其他选择器对这些子标签直接赋值

观察列表可得，常见标签中包含有以下会导致继承失效的属性

i、em的font-style

a的color

h1-h6、b、strong的font-size、font-weight

caption以及th的font-weight、text-align

除了覆盖em、i的font-style，覆盖strong、b的font-weight这种意义不明的操作，要注意

a的color不能继承；

h的font-size、font-weight不能继承；

caption以及th的font-weight、text-align不能继承。

精确排版中，line-height的继承问题

以此作为基础，在对页面精确排版时，要设置line-height：1；

* {
	/* 去除默认的内、外间距 */
	margin: 0;
	padding: 0;
	/* 使用C3盒子自动内减 */
	box-sizing: border-box;
    /* 去除上下间隙 */
    line-height：1；

}

此时要注意，如果要修改标签的line-height，必须直接赋值给子标签，

例如li里的a，直接赋给a

div里的p，直接赋给p

不要像我，傻傻地赋值给作为父标签的li，对着浏览器调试看了半天才发现a的行高为什么不生效，悲    |*´Å`)ﾉ