search
HomeWeb Front-endHTML Tutorial行内元素视觉格式化_html/css_WEB-ITnose

目录 [1]基本术语 [2]构造行框 [3]非替换元素 [4]替换元素

前面的话

  行内元素没有块级元素那么简单和直接,块级元素只是生成框,通常不允许其他内容与这些框并存。而控制行内元素视觉格式化的主要是font-size、line-height、vertical-align

 

基本术语

  在了解行内元素视觉格式化之前要先了解一些涉及到的基本术语

匿名文本

  匿名文本(anonymous text)是指所有未包含在行内元素中的字符串

em框

  em框在字体中定义,也称为字符框(character box)。实际的字形可能比其em框更高或更矮。在CSS中,font-size的值确定了各个em框的高度

内容区

  在非替换元素中,内容区可能在两种。内容区可以是元素中各字符的em框串在一起构成的框,也可以是由元素中字符字形描述的框;而在替换元素中,内容区就是元素的固有高度再加上可能有的外边距、边框或内边距。内容区类似于一个块级元素的内容框

行间距

  行间距(leading)是font-size和line-height之差。这个差实际上要分为两半,分别应用到内容区的顶部和底部

  [注意]行间距只应用于非替换元素

行内框

  行内框通过向内容区增加行间距来描述。对于非替换元素,元素行内框的高度等于line-height的高度;对于替换元素,元素行内框的高度则恰好等于内容区的高度

行框

  这是包含该行中出现的行内框的最高点和最低点的最小框。换句话说,行框的上边界要位于最高行内框的上边界;而行框的底边要放在最低行内框的下边界

 

构造行框

  1、替换元素:得到各元素的height、margin-top、margin-bottom、padding-top、padding-bottom、border-top-width、border-bottom-width值,把它们加在一起;非替换元素:得到各行内非替换元素及不属于后代行内元素的所有文本的font-size值和line-height值,再将line-height减去font-size,得到行的行间距,这个行间距除以2,将其一半分别应用到em框的顶部和底部

  2、对于各内容区,确定它在整行基线的上方和下方分别超出多少。替换元素:将其底边放在整行的基线上;非替换元素:确定各元素及匿名文本各部分的基线的位置,并知道该行本身基线的位置,然后将其对齐

  3、对于指定了vertical-align值的元素,确定其垂直偏移量。由此可知,该元素的行内框要向上或向下移动多远,并改变元素在基线上方或下方超出的距离

  4、既然已经知道了所有行内框会放在哪里,再来计算最后的行框高度。为此,只需将基线与最高行内顶端之间的距离加上基线与最低行内框底端之间的距离

 

行内非替换元素

内容区

  对于行内非替换元素或匿名文本某一部分,font-size值确定了内容区的高度。如果一个行内元素的font-size为15px,则内容区的高度为15px

行内框

  内容区加上行间距等于行内框。如果一个行内非替换元素的font-size为15px,line-height为21px,则相差6px。用户代理将这6像素一分为二,将其一半分别应用到内容区的顶部和底部,这就得到了行内框

 

  当line-height小于font-size时,行内框实际上小于内容区

 

行框

  行框定义为行中最高行内框的顶端到最低行内框底端之间的距离,而且各行框的顶端挨着上一行行框的底端

框属性

  内边距、外边距和边框不影响行框的高度,即不影响行高

  行内元素的边框边界由font-size而不是line-height控制

  外边距不会应用到行内非替换元素的顶端和底端

  margin-left、padding-left、border-left应用到元素的开始处;而margin-right、padding-right、border-right应用到元素的结尾处

div{    width: 200px;    border: 1px solid red;}    span{    border: 1px solid black;    background-color: yellow;    padding: 6px;        margin: 6px;    font-size: 30px;    line-height: 50px;}

<div><span>测试文字测试文字测试文字</span></div>

行内替换元素

框属性

  行内替换元素有固有的高度和宽度,替换元素的整体包括内容、外边距、内边距和边框来定义元素的行内框

  替换元素可以增加行框的高度,但不影响line-height值

div{    width: 300px;    border: 1px solid red;}    span{    border: 1px solid black;    background-color: yellow;    font-size: 30px;    line-height: 50px;}img{    height: 26px;    padding: 2px;    margin: 2px;}

<div><span>测试文字测试<img src="/static/imghwm/default1.png"  data-src="backup/lamp.gif"  class="lazy" alt="测试图片">文字测试文字</span></div>

行高

  行内替换元素需要使用line-height值,从而在垂直对齐时能正确地定位元素。因为vertical-align的百分数值是相对于元素的line-height来计算的。对于垂直对齐来说,图像本身的高度无关紧要,关键是line-height的值

基线

  默认地,行内替换元素位于基线上。如果向替换元素增加下内边距、外边距或边框,内容区会上移。替换元素并没有自己的基线,所以相对来说最好的办法是将其行内框的底端与基线对齐。因此,实际上是下外边距边界与基线对齐

  对于这种情况最常见的解决办法是使图像成为块级元素,这样它们就不会产生行框。另一种可取的办法是将图像的父级的line-height设置为0

 

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input?How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What are the best practices for cross-browser compatibility in HTML5?What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How to efficiently add stroke effects to PNG images on web pages?How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What is the purpose of the <datalist> element?What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element?What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

How do I use the HTML5 <time> element to represent dates and times semantically?How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <progress> element?What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)