整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS中的單位你知多少?

          為一個小前端,最基本的布局應該已經是手到擒來的事情,但是在布局過程中,你是不是經常就使用px、%或者rem?其他的呢?你是否又熟悉?

          下面就為同學們說一下css中可能會遇到的單位。

          首先就從熟悉的開始:

          第一種:px

          px(像素)是CSS中最為常用的一種單位,傳統上一個像素對應計算機屏幕上的一個點,對于高清屏則對應更多。

          第二種:%

          百分比也較為常用。其中對font-size設置百分比值時,是以瀏覽器默認字體大小16px為參照計算的。

          第三種:em

          em是一種計算方式為相對于父元素的字體大小的單位,1em等于父元素設置的字體大小,如果父元素沒有設置字體大小,則繼續往父元素查找,直到有設置大小的,若都沒有設置大小,則使用瀏覽器默認大小。

          CSS中常用屬性里使用em這樣計算方式的屬性有:

          • border

          • width

          • height

          • padding

          • margin

          • line-height


          第四種:rem:

          別看rem和em只有一個字母區別,而且也都是相對單位,其他兩個是完全不一樣的單位概念;rem的參照物是根元素HTML的font-size,因此,如果改變HTML的font-size值,那么所有使用的rem單位大小都會隨著改變,適用于移動端。(ps:不支持IE8以下,而且在移動端使用,如果代碼冗余,容易看到文字會變大或者變小哦,所以使用的時候一定要處理好。)

          第五種:v系單位

          v系單位常用于移動端,是基于瀏覽器用來顯示內容的區域大小,也就是視窗大小來就算的。

          具體分為4個:

          • vw:基于視窗的寬度計算,1vw等于視窗寬度的百分之一

          • vh:基于視窗的高度計算,1vh等于視窗高度的百分之一

          • vmin:基于vw和vh中最小值來計算,1vmin等于最小值的百分之一

          • vmax:基于vw和vh中最大值來計算,1vmax等于最大值的百分之一

          這類標簽至少我很少使用,所以也不能給同學們建議啦,不過至少以后看到了不用驚訝這個是啥昵

          最后單位運算

          CSS中可以使用CSS函數calc()來通過計算確定一個屬性的值。

          際開發中,喜歡用百分比但是發現自己對百分比掌握的不夠,經常會出現一些出乎意料的效果,今天整理了CSS中有關百分比單位知識,如果對你有幫助的話請多多支持下小編哈!

          效果:

          要想理解百分比這樣的相對單位,首先要做的事就是找到某個元素的參照物,比如絕對定位的位置參照是已有定位(相對于 static 定位以外的第一個父元素進行定位),下面我們通過參考物的分類來詳細說明css中的百分比應用。

          1.相對于參考物寬度的:A.[max/min-]widthB.paddingC.marginD.left(有定位情況)E.right(有定位情況)

          效果:

          寫這個例子的時候突然想試試border能不能用百分比,意料之中,不行。這里的.son元素的參考物是.parent1,而不是離她最近的.parent2。

          要成為一名合格的前端工程師,會寫頁面絕對不能少,而如果想要頁面寫得出彩,你必須要知道一些網頁常用的基本單位。

          在傳統的項目開發中,我們常常會用到px、%、em這幾個單位,因為它能適用于大部分的項目開發,而且擁有比較良好的兼容性。但素,你造嗎?從CSS3開始,瀏覽器對邏輯單位的支持又提升到了另外一個境界,增加了rem、vw、vh、vm等一些新的長度單位,我們可以用這些新的單位開發出比較良好的響應式頁面,以此可以覆蓋多種不同分辨率的設備,包括移動設備等。

          那么,接下來我們分別來分析下,這些常用到的單位分別是什么。

          1.px

          px就是pixel的縮寫,像素,相對長度單位,像素是相對于顯示器屏幕分辨率而言。比如常常聽到的電腦像素是1024x768的,表示的是水平方向是1024個像素點,垂直方向是768個像素點。再比如,px就可以認為是一張圖片最小的一個點,一張位圖就是千千萬萬的這樣的點構成的。

          2.em

          相對長度單位,參考對象是父元素的font-size,具有繼承的特點,如果當前行內文本的字體尺寸未被設置,瀏覽器使用默認字體尺寸(16px),整個頁面內1em也不是一個固定的值。

          3.%

          一般寬泛的講是相對于父元素,但是并不是絕對的。

          1)、對于普通元素就是我們理解的相對于父元素

          2)、對于position: absolute;的元素是相對于已定位的父元素

          3)、對于position: fixed;的元素是相對于ViewPort(可視窗口)

          4.rem

          rem是css3的新單位,相對于根元素html(網頁)的font-size,不會像em那樣,依賴于父元素的字體大小,而造成混亂。這個單位可謂集相對大小和絕對大小的優點于一身,通過它既可以做到只修改根元素就成比例地調整所有字體大小,又可以避免字體大小逐層復合的連鎖反應。目前,除了IE8及更早版本外,所有瀏覽器均已支持rem。對于不支持它的瀏覽器,應對方法也很簡單,就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

          例如:

          p{font-size:14px;?font-size:.875rem;}

          但是,需要注意的是:

          選擇使用什么字體單位主要由你的項目來決定,如果你的用戶群都使用最新版的瀏覽器,那推薦使用rem,如果要考慮兼容性,那就使用px,或者兩者同時使用。一般rem用在移動端可能更多些。

          5.vw

          vw是css3新單位,viewpoint width的縮寫,即視口寬度。何謂視口,就是根據你瀏覽器窗口的大小的單位,不受顯示器分辨率的影響,是不是很神奇,這就代表了,我們不需要顧慮到現在那么多不同電腦有關分辨率的自適應問題。視口寬度被均分為100單位的vw,1vw等于視窗寬度的1%。

          舉個例子:瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。和百分比不一樣的是,vw始終相對于可視窗口的寬度,而百分比和其父元素的寬度有關。

          6.vh

          與vw類似,vh就是可視窗口的高度了。視口高度被均分為100單位的vh,1vh就是高度的1%。看下圖:

          7.vm

          vm也是css3新單位,相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vm。

          舉個栗子:瀏覽器高度800px,寬度1000px,取最小的瀏覽器高度,1 vm = 800px/100 = 8 px。

          由于現在vm的兼容性較差,現在基本上很少有人用。

          除了上述7種單位,css還有哪些長度單位?

          例如:

          in 寸

          cm 厘米

          mm 毫米

          pt point磅,大約1/72寸

          pc pica派卡,大約6pt,1/6寸

          1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px


          主站蜘蛛池模板: 国产大秀视频在线一区二区| 国产日韩AV免费无码一区二区三区 | 国产午夜精品一区理论片| 日韩最新视频一区二区三| 一本AV高清一区二区三区| 人妻无码一区二区三区四区| 中文字幕乱码亚洲精品一区| 无码av免费一区二区三区| 国模精品一区二区三区| 日韩精品一区二区三区中文字幕 | 精品久久综合一区二区| 日韩一区二区在线视频| 少妇无码一区二区三区免费| 日韩免费视频一区二区| 久久精品免费一区二区三区| 久久精品一区二区影院 | 中文字幕VA一区二区三区| 国产99精品一区二区三区免费| 国产在线一区视频| 乱色熟女综合一区二区三区| 国产中文字幕一区| 日本一区视频在线播放| 亚洲av成人一区二区三区在线观看 | 国产精品av一区二区三区不卡蜜| 亚洲AV成人精品一区二区三区| 无码人妻精品一区二区蜜桃网站| 欲色aV无码一区二区人妻| 无码视频一区二区三区| 国产成人av一区二区三区不卡 | 亚洲AV无码一区东京热| 日韩最新视频一区二区三| 中文字幕精品一区二区| 国产凸凹视频一区二区| 久久AAAA片一区二区| 亚洲AV综合色一区二区三区| 激情亚洲一区国产精品| 精品久久综合一区二区| 在线观看国产区亚洲一区成人| 国产精品无码一区二区三区电影 | 色一情一乱一伦一区二区三区| 无码日韩精品一区二区人妻|