这是我参与「第四届青训营 」笔记创作活动的的第2天

一、继承

在 css 中，每个CSS 属性定义的概述都指出了这个属性是默认继承的("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。

graph TD
html --> head --> title
html --> body --> div --> img
body --> ul --> li

如图所示，能继承的属性从上往下，把能继承的属性值传递给子代，且只有在子代当前没有指定值的时候，才会继承父代的值。

继承的作用

对于一些能够继承的属性，我们往往可以只设置其父级的属性，而本身不设置，会自动继承此CSS属性，可以减少CSS代码，便于维护。

可继承属性

1. 字体属性
   font、font-height、fongt-family、font-weight、font-style等
2. 列表属性
   list-style-type、list-style-image、list-style-position、list-style-position等
3. 文本属性
   text-align、line-height、color、direction等
4. 表格属性
   empty-cells、caption-side等
5. 其他属性
   cursor、visibility、page等

所有元素都可继承的属性

1. 元素可见性：visibility
   
2. 光标属性：cursor

不可继承属性

1. display
   
2. 盒模型的宽高、外边距、内边距、边框等
   
3. 定位属性、浮动、层级z-index
   
4. 背景属性，图片、颜色等
   
5. 文本属性text-decoration、vertical-align、text-shadow
   
6. 内容属性content
   
7. 声音样式属性

关键字

在可以继承的属性值里面有一个关键字：inherit，代表该属性值继承其父元素，该值可以用于html里面任何一个元素的css属性。除了inherit关键字外，还有initial代表该属性值取默认值，unset代表该属性值如果是可继承的，就继承父元素，否则取默认值。

二、块级、行内元素

块级元素

块级元素特点

1. 块级元素会独占一行
2. 块级元素可以设置宽、高、内边距、外边距，且设置宽度后还是独占一行
3. 块级元素可以包含行内元素，行内元素不能包含块级元素

常见的块级元素

div、p、form、ul、ol、li、table、tr、td、th、hr、canvas、section、header、footer、audio、video、h1~h5等

行内元素

行内元素特点

1. 不会独占一行
2. 不可以设置宽、高，宽高由内容撑开
3. 行内元素不能包含块级元素

常见的块级元素

span、img、label、a、em、code、button、textarea、select、br、strong等

行内块元素

设置方式

通过css设置可以转化为行内块元素

display: inline-block

特点

1. 默认是内容宽高，也可设置宽高、内边距、外边距
2. 可以和其他行内块元素在同一行内