内联元素

众所周知,css中可以将元素分成块级元素和行内元素。

对于块级元素可以通过margin、padding、border来设置盒子的样式。还可以通过box-sizing来设置盒子的类型。

但对于行内元素大部分人就知之甚少,这篇文章简单的谈一下我对行内元素的理解。

哪些元素是内联元素

就行为表现来看,“内联元素”的典型特征就是可以和文字在一行显示。因此,文字是内
联元素,图片是内联元素,按钮是内联元素,输入框、下拉框等原生表单控件也是内联元素。但是,这个说法有一个前提,元素没有脱离标准流。否则,像浮动和定位元素也可以和文字在一行显示,但他们不是行内元素。

内联盒模型

在页面中,块级元素负责布局,行内元素负责内容。一个块级元素中很可能不止有一个行内元素。

下面是一段普通的HTML

<p>我是普通的文字,这里有个 一<span>span</span> 标签。</p>

1. 内容区域

内容区域指一种围绕文字看不见的盒子,其大小仅受字符本身特性控制,我们可以把文本选中的背景色区域作为内容区域(::selection);但是有些元素,如图片这样的替换元素,其内容显然不是文字,不存在字符盒子之类的,因此,对于这些元素,内容区域可以看成元素自身。

2. 内联盒子

每一个内联元素都是一个内联盒子,内联盒子使元素排成一行,用来决定元素是内联还是块级。

该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类:

如果外部含内联标签(<span>、<a>、<em>等),则属于“内联盒子”;如果是个光秃秃的文字,则属于“匿名内联盒子”。

3. 行框盒子

实际中,一个块级元素可能有很多行的内容,类似小说网站。每一行就是一个“行框盒子”(实线框标注),每个“行框盒子”又是由一个一个“内联盒子”组成的。石家巷line-height就是作用在行框盒子上。

4. 包含块

此盒子由一行一行的行框盒子组成,在这个例子中<p>标签就是一个包含块。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,841评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,598评论 5 15
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,650评论 0 6
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,356评论 2 66
  • 魚子覺得,寫作是上天賜予人類最慷慨的禮物之一。閱讀則是打開世界之窗的另一扇大門。天賦有助,後天亦重要:部分來自大量...
    鱼子的叨叨阅读 73评论 0 0