什么是行内元素?
我们都知道在html元素分为行内元素和块级元素。在实际开发中,会经常把他们弄混淆,而且很难记住。下面我们就来教会大家如何记住行内元素的
下面是我们常用的一些行内元
<a> |
锚点 |
<b> |
字体加粗 |
<big> |
大号字体 |
<br> |
换行 |
<em> |
定义为强调的内容 |
<i> |
斜体文本效果 |
<img> |
图像 |
<input> |
输入框 |
<label> |
标签为input元素的标注 |
<select> |
单选或多选菜单 |
<small> |
小号字体 |
<span> |
组合文档的行内元素 |
<strong> |
强调内容 |
<sub> |
定义下标 |
<sup> |
定义上标 |
<textarea> |
多行文本输入框 |
这里要强调一点,我们必须要记住这些行内元素,这里写下几句便于记忆行内元素的语句。
字体大小要加粗,
组合图像输入框,
锚准斜体的菜单,
强调换行上下标
那么行内元素该如何使用呢?
1.行内元素会在一条直线上排列,在同一行从左至右水平排列。直到一行排不下,才会换行。
2.行内元素设置宽、高、margin上下、padding上下无效(竖直无效)。
3.行内元素设置line-height,margin左右、padding左右有效(水平有效)。
4.行内元素的宽高随标签里的内容而变化。
行内元素转换为块级元素
display:block (字面意思表现形式设为块级)、
行内元素和块级元素区别是 行内元素设置宽高是没用的。 但是有些行内元素不是这样的。
inherit 属性
能够继承到子类的样式属性非常有限,仅是 文字、字体
、颜色
... 子类如果还想继承父类的属性,可以通过inherit
强制继承。