1. 程式人生 > >CSS中一些不經意的細節問題1

CSS中一些不經意的細節問題1

    CSS這樣的語法,細節問題非常多,往往一些難以處理的問題,有可能是一些細節問題不到位,所以先記下一些,留給以後自己看看。

1.line-height:150%與line-height:1.5 的區別

 .main{
   font-size:12px;
   line-height:150%;
   margin:20px;
   border:1px solid #ccc;
 }
 
 .main p{
   font-size:20px;
 }
<div class="main">
    <p>This is a test!</
p> </div>

當父容器為line-height:150%時,子元素P的line-height是按父容器的font-size*line-height來計算得出的是為18px;

然後當父容器為line-height:1.5時

 .main{
   font-size:12px;
   line-height:1.5;
   margin:20px;
   border:1px solid #ccc;
 }
 
 .main p{
   font-size:20px;
 }

子元素P的line-height是按父容器的line-height*自己的font-size計算得出的,所以是30px;

雖然是一個小問題,但是在排版的時候,不注意的話,會有意想不到的效果的。

相關推薦

CSS一些不經意細節問題1

    CSS這樣的語法,細節問題非常多,往往一些難以處理的問題,有可能是一些細節問題不到位,所以先記下一些,留給以後自己看看。 1.line-height:150%與line-height:1.5 的區別 .main{ font-size:12px; line-heig

springset註入的一些細節錯誤

學習 細節 borde 集合 south let odi 桂林 代碼 這是小白偶爾一直null指針的錯誤,調試了好久,原來是自己對spring註入的不夠了解 我相信有很多跟我差不多的初學者會遇上,所以特地寫出來,防止有人跟我一樣。哈哈,也寫上去,以防自己下次還犯這樣的錯誤。

HTML和CSS的居中效果(1

htm inner height overflow n-1 txt posit splay read HTML和CSS中的居中效果 單行上下左右居中 Html: <div class=”container”></div> CSS:

j2se學習一些零碎知識點1(內容有些零散)

方法 封裝 對象 變量 繼承 1、java編譯和運行階段發生的事情,如下圖所示:- 編寫的java源文件,通過java編譯器編譯生成以.class結尾的字節碼文件(字節碼並不是二進制),生成的字節碼文件通過類裝載器裝載進java虛擬機中,再通過java虛擬機運行轉化成二進制文件與底層的操

【UE4實用技能】UE4藍圖開發一些細節

加載圖標 com ges 路徑 icons 就是 技能 9.png tab 1.加載圖標Icon路徑:/Game/Arts/UI/TableIcons/Task_Icon/Achievement/Task_icon_weixin.Task_icon_weixin(就是Con

css關於單位的一些問題

單位 字體 結果 大寫 roo bsp 自身 很多 最好 Css 單位 Px:像素或許被認為是最好的“設備像素”,而這種像素長度和你在顯示器上看到的文字屏幕像素無關。px實際上是一個按角度度量的單位。在web上,像素仍然是典型的度量單位,很多其他長度單位直接映射成像素,最

使用SKlearn的SpectralClustering 一些細節

在使用SKlearn中的聚類演算法時需要引入 cluster 模組,使用譜聚類時(或者其他任意一個聚類演算法,如KMeans)都需要先進行聚類演算法的一些必要的引數設定,這裡舉例的譜聚類就需要配置要聚類的簇數。即n_clusters,n_neighbors,eigensolve等引數雖然都有預設設定

J2EE一些常用的方法和細節整理

1.setAttribute、getAttribute方法 方法 描述 注意點 void setAttribute(String name,Object o) 設定屬性的名稱及內容

CSS常用到的一些解決問題方法(整理一些真正有效能夠使用到專案的方法)(等待不斷更新積累)

1.如何強制文字換行 {white-space:normal; width:200px; } 2.高度不固定的div,裡面的文字垂直居中 // 加在父級div中 垂直居中:align-items:center; display: -webkit-flex; 水平居中:justify-co

Go語言-型別一些細節

把平時的一些筆記放上來,主要是一些比較小的問題,這裡是關於golang中的型別中需要記錄的小知識點。 常量 【1】可以是某些編譯器能計算出結果的表示式 unsafe.Sizeof len cap const { ptrSize = unsaf

html標籤一些細節

有序列表:    type的作用:可以根據type做選擇前期的符號為數字 還是 a A字母 還是I符號   reversed ="reversed"  倒著排序    start=“” 做判斷從第幾個開始排序 無序列表  type值disc 為預設黑點

細節:css的的大小寫區分

前言: 這篇文章看起來可能沒有什麼技術含量,是對一個小細節的驗證。起因是讀《javascript權威指南》這本書時,裡面提到說js是大小寫敏感的語言,而html 不是,因此html中設定屬性時屬性名屬性值不限制大小寫,標籤名也不限制。由此想到,css中的屬性

cssflex:1彈性佈局例子

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #main { width: 220px; height: 300px;

Javasplit()函式的用法及一些注意細節

String.split("要切割的準側")返回的是一個String[ ]的首地址;String.split("要切割的準側").length 返回的是這個String被切割後的子字串的個數(及被切割成了幾個段);String.split(""),此時,切割後的第一個段是空

css一些小貼士

在html和Xhtml中有這樣的一條規則:對於html或者xhtml而言,行內元素可以巢狀在塊級元素中,對於css而言,卻沒有限制因為有display,反之不行(塊級元素不能巢狀在行內元素中),即便是

objc和java一些endian、byte轉換相關的細節

objc big-endian轉本地little-endian//objc big-endian轉本地little-endian unsigned short len; [data getBytes:

CSS一些屬性百分比值,相對於誰計算?

在css屬性中,很多屬性的取值可以是百分比,比如:width、height、padding、margin、font-size、line-height、background-position等,那麼這些百分比值的計算是相對於誰呢? 先來看幾個例子,分別是正常文件流中、浮動情況

webpack開發vue2專案一些坑(1、跨域 2、打包後後端訪問一片空白3、載入第三方庫的字型檔案出錯4、載入背景圖出錯)

1、在開發除錯過程中,解決跨域的問題 例:本地伺服器:localhost:3030  伺服器地址:192.111.1.1:4000(虛構) webpack配置: devServer: {

在Unity3D開發射擊遊戲的一些思路(1

最近有許多朋友問到我一個問題,如何實現像戰地,使命召喚那樣逼真的射擊體驗。首先我們要知道,在沒有動畫師的幫助下,要想實現人為模擬的後坐力,精準度偏移等等其實並不是什麼難事,今天我們就來用較簡短的程式碼來實現一個模擬的槍械後坐力。 首先是我們需要用到的工具類程式碼: publ

cssborder的一些知識

red 劃分 itl query title nbsp 部分 火狐瀏覽器 head 在編寫頁面代碼時,經常會用到元素的邊框 括弧:border 給某個元素增加一個1px的實線黑色邊框: html代碼部分1 <!DOCTYPE html> <htm