css --- 行内框和内容区

css规定font-size的大小实际上是字体的高度
可以将内容区理解为font-size的大小.
行内高可以理解为 ( (line-height) - (font-size) ) /2 然后再font-size 的上下加上前面的值
看下面的例子

	<p style="font-size:12px;line-height:12px;">this is text, <em>some of which is emphasized</em>, plus other texr <br>that is <strong style="font-size:24px;">strong</strong>and<span style="vertical-align:top;line-height:18px;">tall</span> and that is<br>larger than the surrounding text.</p>

效果如下:
在这里插入图片描述
可以看到strong明显的高于上下文
分析下strong元素,其font-size为24px,因此可以认为它的内容区的高度是24px,它的line-height继承于父节点p(line-height: 12px),所以其半行间距为(12px-24px)/2 = -6px , 它的行内高是内容区的高度 加上 上行间距 和 下行间距为,24px-6px-6px =12px

对于span元素,
其font-size继承父节点p(font-size:12px),line-height:18px;故半行边距为(18px-12px) /2 = 3px, 所以其内容区为12px, 其行内框为
12px + 3px(上行边距) + 3px(下行边距). =18px ,
可以注意到,span 还有一个vertical-align:top 属性, 改属性是指,span的垂直对齐方式是其行内框的顶端与行框的顶端对齐,
而行框是(所以行内框中)最高行内框的顶端.

具体参考《CSS权威指南》(第3版) P192~P194

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251583.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DotNetTextBox V3.0 所见即所得编辑器控件 For Asp.Net2.0(ver 3.0.7Beta) 增加多语言!

英文名&#xff1a;DotNetTextBox V3.0 WYSWYG Web Control For Asp.Net2.0 中文名&#xff1a;DotNetTextBox V3.0 所见即所得编辑器控件 For Asp.Net2.0 类型: 免费控件(保留版权) 作者: 小宝.NET 2.0(Terry Deng) 主页&#xff1a;http://www.aspxcn.com.cn 控件演示页面: h…

phantomjs

npm 安装 phantomjs失败&#xff0c;解决办法是到http://phantomjs.org/download.html 下载需要的压缩包&#xff0c;然后放到%appData%\Local\Temp\phantomjs\下&#xff0c;重新执行npm i 转载于:https://www.cnblogs.com/tellme/p/7777626.html

js动态删除行错误

Uncaught TypeError: Failed to execute removeChild on Node: parameter 1 is not of type Node. js中出现如上错误&#xff0c;检查验证document.getElementById&#xff08;&#xff09;中的参数是否传递正确&#xff0c; 例&#xff1a; var textnumber parseInt(docume…

css --- 浮动元素与 块框/行内框重叠时的细节

块框,可以认为是块级元素(如div、h1)的内容区 内边距 行内框可以认为是行内元素(如span)的内容区 内边距 当 块级框/行内框 和一个浮动元素重叠时&#xff0c;行内框的边框、背景和内容都在幅度元素之上&#xff0c;块级框的边框和背景都在浮动元素的下面&#xff0c;但内容在…

Android 禁止Viewpager左右滑动功能

做项目要求某种情况下ViewPager不能滑动 百度后发现重写ViewPager&#xff0c;覆盖ViewPager的onInterceptTouchEvent(MotionEvent arg0)方法和onTouchEvent(MotionEvent arg0)方法&#xff0c;这两个方法的返回值都是boolean类型的&#xff0c;只需要将返回值改为false&#x…

error C1853: “Debug\BigBuffer.pch”预编译头文件来自编译器的早期版本,或者预编译头为 C++ 而在 C 中使用它(或相反)...

<pre id"best-content-1299104064" mb-10""" style"font-size: 14px; line-height: 28px; ">该错误是因为当项目中混合了 .cpp 和 .c 文件时&#xff0c;编译器会对它们采取不同的编译方式&#xff08;主要是因为对函数声明的处理方式…

6.13的练习

#&#xff01;Usr/bin/env python # -*- coding:utf-8 -*- # Author:Alex Li 一个整数&#xff0c;它加上100后是一个完全平方数&#xff0c;再加上268又是一个完全平方数&#xff0c;请问该数是多少&#xff1f;&#xff1a;for i in range(1,1000):for j in range(1,1000):i…

npm --- 包的发布与导入

安装好NODE后,下面演示如何编写一个包,并将其发布到NPM仓库中,最后通过NPM安装回本地. 以下例子是在windows*64环境下运行的. 1.编写模块 exports.sayHello function(){return Hello World; }将上述代码保存在hello.js中 2.初始化包描述文件: 使用npm init指令,快速生成包…

账号注册的form

class RegForm(forms.ModelForm):password forms.CharField(widgetforms.PasswordInput, label密码, min_length6) # 重写默认字段re_password forms.CharField(widgetforms.PasswordInput, label确认密码, min_length6) # 新增字段class Meta:model models.UserProfile …

servlet面试常考 (转载)

编辑 删除 1、说一说Servlet生命周期&#xff08;非常重要&#xff09; Servlet生命周期包括三部分&#xff1a; 初始化&#xff1a;Web容器加载servlet&#xff0c;调用init()方法…

XPath 的使用

XPath 的使用 XPath&#xff0c;全称XML Path Language&#xff0c;即XML路径语言&#xff0c;它是一门在XML文档中查找信息的语言&#xff0c;最初用于搜寻XML文档&#xff0c;但是也同样适用于HTML文档的搜索。前面我们在解析或抽取网页信息时&#xff0c;使用的是正则表达式…

Node --- EventProxy的原理

EventProxy来自于Backbone的事件模块,Backbone的事件模块是Model、View模块的基础功能&#xff0c;在前端有广泛的使用。它在每个非all事件触发时都会触发一次all事件&#xff0c;相关代码如下: // Trigger an event, firing all bound callbacks. Callbacks are passed the /…

spring项目启动执行特定方法

1. 方法上加注解PostConstructCompantpublic class InitDemo{ PostConstruct public void init(){ //项目启动就会执行这个方法 doSomething(); }}2.xml配置init-method<bean id"InitDemo" class"com.xxx.InitDemo" scope"singleton" init-me…

WinCC归档数据报表控件

1、背景 WinCC实现报表历来是老大难&#xff0c;自带的报表功能不好使&#xff0c;又没有好用的第三方控件。虽然网上也有很多实现报表的方法&#xff0c;但是毫无例外的要求使用者具有脚本编程功底&#xff0c;HwDataReport的出现将终结这一现象。您无需一行脚本即可完成…

vue数组操作不更新视图问题

vue 观察数组的变异方法 更新视图 push&#xff08;&#xff09; pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.push({ name:css, author:lee }) 有些方法不会改变数组 filter() concat() slice() 返回新数组 需要用 新返回的数组 更新原数组 ap…

java中如何计算两个时间段的月份差

直接计算&#xff0c;先取得两个日期的年份和月份&#xff0c;月份差&#xff08;第二年份-第一年份&#xff09;*12 第二月份-第一月份转载于:https://www.cnblogs.com/pretty-guy/p/3284593.html

Node --- Promise中的多异步协作

当我们需要处理多个异步调用时,应该如何处理呢? //首先假设有2个读取文件的异步调用,promise1和promise2 var promise1 readFile ("foo.txt", "utf-8"); var promise2 readFile ("bar.txt", "uft-8");//然后,我们可以使用all()方法…

Software-OO 面向对象思维

2017-11-06 11:02:50 所有编程语言的最终目的都是提供一种“抽象”方法。 解决问题的复杂程度直接取决于抽象的种类及质量。这儿的“种类”是指准备对什么进行“抽象”&#xff1f; 汇编是对基础机器的少量抽象。“命令式”语言是对汇编语言的一种抽象。 &#xff08;Alan Kay …

Go Python 7: 2-Layer Neural Network

转载于:https://www.cnblogs.com/wordchao/p/9182511.html

LiveWriter测试

test livewriter 转载于:https://www.cnblogs.com/wujun/archive/2006/11/21/567052.html