font-size:100%有什麼作用

来源:http://www.cnblogs.com/shouce/archive/2016/03/17/5285965.html
-Advertisement-
Play Games

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} input,select,textarea,samp {font-size:100%;} 看到一些css重設,請問設置font-size:100%的目的和作用是什麼? 假如你設置body{f


 h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}

  input,select,textarea,samp {font-size:100%;}

  看到一些css重設,請問設置font-size:100%的目的和作用是什麼?

  ---------------------------------------------------------------------------------------

  假如你設置body{font-size:12px;}

  但h1是不會繼承這個12px,它會按照一定百分比增加字型大小,但如果給h1顯試指定font-

  size:100%;它就會繼承body設定的字體大小。

  1. 它改變了預設的大小。

  2. 這些元素本身不會繼承父體的字體大小,設置了font-size:100%後就能自動繼承。

 

  瀏覽器在給 hx 標題元素設定預設樣式時,使用的是 h1 {font-size: 200%;} h2 {font-size: 150%;} 等等這樣的規則來設定字體大小。瀏覽器通過這些樣式來確保各級標題文本可以與普通文本呈現字體大小的固定比例關係。

那麼瀏覽器為什麼要通過百分比來固定這個比例,而不是用固定的 px 值來確定相對的比例關係呢(比如這樣:h1 {font-size: 32px;} h2 {font-size: 24px;} p {font-size: 16px;} 等等)?

一方面,百分比顯然更適合用來設置比例, 另一方面,是因為幾乎所有瀏覽器通常都提供了文本縮放功能(註意:非整頁縮放),這是瀏覽器對網頁可訪問性提供的最基礎的支持。而瀏覽器(尤其是 IE)的文本縮放功能在原理上,通常是通過重設 body 元素的字體大小來實現的——當 body 的字體大小變化時,其後代元素通過 CSS 的層層繼承和百分比的換算來呈現字體大小的比例關係。

所以,瀏覽器自身的預設樣式中是不會使用 px 這樣的絕對單位的,否則文本縮放特性無法實現。(我們一定都有過這樣的經驗,一旦某個元素的字體大小使用了固定的 px 值,它就再也不受 IE 縮放設置的影響了。)

羅嗦完了,回到問題本身:

寫 CSS Reset 的目的,就是把瀏覽器的預設樣式覆蓋掉。我最早看到的 CSS Reset,確實就是這麼寫的:

h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}

甚 至可能第一個寫 CSS Reset 的人(Eric Meyer?)就是這麼寫的。這樣寫的“好處”在於,可以非常直觀地把瀏覽器的預設樣式(h1 {font-size: 200%;} 等)清零,用百分比干掉百分比,再合適不過。而後來人也一直沿用,可能是懶得去作改變,也可能是向前輩致敬。

重設瀏覽器預設字體大小

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}

假如你設置body{font-size:12px;}

但h1是不會繼承這個12px,它會按照一定百分比增加字型大小,但如果給h1顯示指定font-size:100%;它就會繼承body設定的字體大小。

1. 它改變了預設的大小。


當然除此以外,還有其它方法也可以實現 hx 字體大小清零的目的:

    • {font-size: inherit;} 可是 IE 6,7 不支持。
    • {font-size: 1em;} 這個貌似完美,且位元組數更少。

  line-height : normal | length

  參數:

  normal : 預設行高

  length : 百分比數字 | 由浮點數字和單位標識符組成的長度值,允許為負值。其百分比取值是基於字體的高度尺寸。請參閱長度單位 

 說明

  檢索或設置對象的行高。即字體最底端與字體內部頂端之間的距離。

  如行內包含多個對象,則應用最大行高。此時行高不可為負值。

  對應的腳本特性為lineHeight。請參閱我編寫的其他書目。

 示例

  div {line-height:6px; }

  div {line-height:10.5; }

 註意

  1.用line-height只對文字起作用 對於圖片時失效

  2.用dreamweaver 可以看到即時的line-height 的效果

  3.用line-height 時可以使用負值

  需要註意的是,在各瀏覽器下對於line-height的解決也是有細微的區別的,上下會有1px的差別,如果行高是偶數的話,大部分瀏覽器解釋還是比較正常,如果是奇數的話,有些瀏覽器會上比下多1px,而另一些瀏覽器會下比上多1px,對於有些要求比較嚴格的網站,建議行高設計時用偶數


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 裝飾者模式(Decorator):動態地為一個對象添加一些額外的職責,若要擴展一個對象的功能,裝飾者提供了比繼承更有彈性的替代方案。 結構圖: 下麵用一個實例來講解一下裝飾者模式《head first 設計模式》中的例子:比如在星巴茲咖啡館,人們需要根據自己的愛好來訂購咖啡,而具體的coffee種類
  • Spring載入XML配置文件
  • 500 500的錯誤通常是由於伺服器上代碼出錯或者是拋出了異常 解決方法:查看一下對應的代碼是不是有問題。 502 502即 Bad Gateway網關(這裡的網關是指CGI,即通用網關介面,從名字就能看出來是php的cgi的問題)錯誤,nginx發生這種錯誤通常是nginx與php(通常是php-
  • 簡介: 下載: 點擊這裡下載 討論: 點擊這裡討論 截圖: 簡介: 下載: 點擊這裡下載 討論: 點擊這裡討論 截圖:
  • 開始製作自己的個人簡歷啦,決定要使用固定導航欄,又打算使用fullpage.js做全屏滾動。 仔細看了fullpage文檔之後,發現不用額外寫js代碼就可以實現以下效果: 1.當滾動翻頁時,導航欄也自動定位到這一頁的標簽 2.當然點擊標簽時,也是滾動到那一頁而不是直接跳轉的。 一、準備工作肯定是要先
  • 所謂DOCTYPE,最初是XML的概念,即通過一種特定的語法,作為一種元數據,來描述XML文檔中允許出現的元素,以及各元素的組成、嵌套規則等。具體的概念可以在WIKI中中得到一個更詳細的結果。 但是在HTML中,DOCTYPE又有著一些不同的效果,其中之一就是著名的觸發瀏覽器標準模式的功能。即如果沒
  • 這個裡面主要有二點 1.如何大圖跟隨"放大鏡"的位置,同時移動大圖? 其實就是用到一個比例關係,當“放大鏡”移動多少比例(是比例,不是具體值),大圖也同時用這個比例去乘以大圖的寬和高,就可以算出大圖該移動多少距離了; 2.顯示區域和放大鏡的關係? 這裡的“放大鏡”應該和大圖的顯示區域的比例,應該是大
  • 有些網友時常問,我想根據點擊的按鈕的位置(下標)來執行相應的操作,但是最後總是無法獲取到下標,那是因為,在for迴圈中綁定的下標是是會變化的,當for迴圈執行完成後,下標的值總是等於 i+1。如: 利用javascript提供的閉包特性可以解決這個問題。 如果使用c作為構造函數,那麼cc實例的__p
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...