跟着书本重学CSS（1）
生活随笔
收集整理的這篇文章主要介紹了
跟着书本重学CSS（1）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
css的單位：
css里面有絕對單位和相對單位，絕對單位是固定長度的，不受任何東環境影響的；而相對單位則是相對于其他長度而言的。
這里詳細了解一下相對單位：px,%,em和rem
px：像素。屏幕分辨率的不同，1px 的大小也是不同的，如果不考慮屏幕分辨率，我們也可以認為px是絕對單位。
%：百分比。支持百分比作為單位的屬性很多，大致分為三類：
（1）width、height、font-size的百分比是相對于父元素“相同屬性來計算的
（2）line-height的備份比是相對于父元素的font-size值來計算的
（3）vertical-align的百分比是相對當前元素的line-height的值來計算的
即，如果父元素的width為200px，子元素width為50%，那么子元素的width值就是100px，類推height和font-size
如果父元素的font-size為60px，子元素line-height的值為50%，vertical-align的值是50%，那么子元素的line-height就是 30px，vertical-align的值是15px
em是相對于當前元素的字體大小而言的，其中1em等于當前字體的大小。常用點：
（1）用于文本縮進，text-indent：2em
例如：
<html><head><title>test</title><meta charset='utf-8'></head><style>p{text-indent: 2em;}</style><body><p>Python具有豐富和強大的庫。它常被昵稱為膠水語言，能夠把用其他語言制作的各種模塊（尤其是C/C++）很輕松地聯結在一起。常見的一種應用情形是，使用Python快速生成程序的原型（有時甚至是程序的最終界面），然后對其中[3] 有特別要求的部分，用更合適的語言改寫，比如3D游戲中的圖形渲染模塊，性能要求特別高，就可以用C/C++重寫，而后封裝為Python可以調用的擴展類庫。需要注意的是在您使用擴展類庫時可能需要考慮平臺問題，某些可能不提供跨平臺的實現。</p></body> </html> 在這里用em就用得很好，因為它不會隨字體的大小（px）改變而改變（2）使用em作為統一單位
添上一句
body{font-size: 62.5%;} 因為瀏覽器默認的font-size大小是16px，這樣body就是10px了，然后我們就可以使用em作為單位輕松進行轉換了。這里有一個很好的學習em的例子：
設置一個p元素的width為150px，height為75px，font-size為15px，text-indent為30px
<html><head><title>test</title><meta charset='utf-8'></head><style>html{font-size: 62.5%;}#p1{font-size: 1.5em;text-indent: 2em;width:10em;height: 5em;}#p2{font-size: 15px;text-indent: 30px;width: 150px;height: 75px;}</style><body><p id='p1'>Python具有豐富和強大的庫。</p><p id='p2'>Python具有豐富和強大的庫。</p></body> </html> 這兩段話的格式沒有任何差別。rem相對于根元素即HTML元素的字體大小
總結
以上是生活随笔為你收集整理的跟着书本重学CSS（1）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学习Pygame和巩固Python——画
- 下一篇： 跟着书本学习CSS(2)