css布局中的百分比布局
生活随笔
收集整理的這篇文章主要介紹了
css布局中的百分比布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、在說到百分比是前，先簡單了解下基本的單位
英寸（inch） ：in 1 in=2.54cm
厘米（centimeter）：cm
毫米（millimeter）：mm
磅（point）：pt 1pt=1/72 in
皮卡（pica）:pc 1pc==12 pt
像素（pixel unit）：px 1px=0.75 pt
相對長度單位(相對于當前對象內文本的字體尺寸)：em 1em=16px
CSS3新增的一個相對單位root em: rem 1rem=16px
注意：如果是定位的元素，則是相對最近的定位父級元素
應用場景
1em和當前字體大小相等。在瀏覽器中默認的文字大小是16px。
因此，1em的默認大小是16px。可以通過下面這個公式將像素轉換為em：px/16=em
實例
?
h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */?
如果使用 em 單位，則可以在所有瀏覽器中調整文本大小。
不幸的是，仍然是IE瀏覽器的問題。調整文本的大小時，會比正常的尺寸更大或更小。
?
解決方法
使用百分比和EM組合
在所有瀏覽器的解決方案中，設置 <body>元素的默認字體大小的是百分比：
實例
body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;}我們的代碼非常有效。在所有瀏覽器中，可以顯示相同的文本大小，并允許所有瀏覽器縮放文本的大小。
方法二
瀏覽器默認字體16px，我們可以設置，body的字體大小為10px，然后1em就是10px，有利于換算
?
body{ font-size：62.5%；} //換算一下10px*100%/16px=62.5%===》》相當于10px,1em=10px h1 {font-size:4em} //40px h6 {font-size:1.2em} //12px?
轉載于:https://www.cnblogs.com/qdlhj/p/10508998.html
總結
以上是生活随笔為你收集整理的css布局中的百分比布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 规模-复杂世界的简单法则---熵
- 下一篇： eclipse解决maven编码UTF-