CSS之元素显示模式的分类（块元素、行内元素、行内块元素）及转换 Height和Weight的继承问题

元素显示模式概述

• 定义：元素显示模式就是元素以什么方式进行显示，比如：< div >独占一行，而< span >一行可以放多个。
• 元素显示模式的分类：

1. 块元素
2. 行内元素
3. 行内块元素

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块元素的特点：
1、独占一行；
2、可以设置高度、宽度以及内外边距；
3、宽度默认是父级宽度的100%；
4、块级元素可以看作是一个容器或盒子，里面可以放行内元素或块元素
注意：
1、文字类的元素内不能使用块级元素，比如：<h1>~<h6>和<p>等都是文字类块级元素，里面都不能放其他块级元素

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>以及<span>等，其中<span>标签是最典型的行内元素。
行内元素的特点：
1、一行可以显示多个行内元素；
2、不能设置宽度和高度；
3、默认宽度就是本身内容的宽度；
4、行内元素只能容纳文本或其他行内元素
注意：
1、链接里面不能再放其他链接；
2、特殊情况，<a>里面可以放块级元素，但是还是转换为块级元素是最安全的；
3、行内元素水平方向的内外边距可以生效，但竖直方向则没有效果

行内块元素

常见的行内块元素有<img />、<input />以及<td>等。
行内块元素的特点：
1、一行可以显示多个，但相邻行内块元素之间会有空白缝隙；
2、默认宽度是本身内容的宽度；
3、可以设置高度、宽度以及内外边距

元素显示模式的转换

• 转换为块元素：display:block
• 转换为行内元素：display:inline
• 转换为行内块元素：display:inline-block

---

注意点

1.height继承问题

1、height是不能继承的；
2、元素height的取值情况：
（1）可以不设置。它的高度将由它的子元素来决定
（2）可以设置为100%。它的高度将由该元素的有确定高度的父级元素来决定
（3）可以设置为固定的px
（4）可以设置为auto。它的高度也将由它的子元素来决定

2.weight继承问题

1、常见的拥有继承性的属性有：以text-、font-、line-开头的属性；
2、当元素满足以下条件，就可以默认继承weight：
（1）该元素是块级元素
（2）该元素没有设置定位
（3）该元素没有设置浮动
3、当使用width：100%时，其基准点的确定分为以下几种情况：
（1）对于使用position:relative的子元素或浮动的子元素，其基准点始终是基于其直接父元素而言，跟其父元素是否有定位无关
（2）对于绝对定位postion:absolute的子元素，其基准点是相对于离其最近的一层定位父元素而言。如果其所有父级元素均无定位，则是相对于body而言
（3）对于使用postion:fixed的子元素，其基准点就是body，跟父元素无关

---

微信公众号定期更新，有兴趣的朋友也可以加个关注！谢谢！