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.pswp.cn/news/251583.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/251583.shtml
英文地址,請注明出處:http://en.pswp.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