奇酷教育-Python培训|UI培训|WEB大前端培训|Unity3D培训|HTML5培训|人工智能培训|JAVA开发的教育品牌

您現(xiàn)在所在的位置:首頁(yè) >關(guān)于奇酷 > 行業(yè)動(dòng)態(tài) > CSS基礎(chǔ)篇 網(wǎng)頁(yè)基本單位知多少

CSS基礎(chǔ)篇 網(wǎng)頁(yè)基本單位知多少

來(lái)源:奇酷教育 發(fā)表于:

網(wǎng)頁(yè)基本單位知多少?

  想要成為一名合格的前端工程師,會(huì)寫(xiě)頁(yè)面絕對(duì)不能少,而如果想要頁(yè)面寫(xiě)得出彩,你必須要知道一些網(wǎng)頁(yè)常用的基本單位。
 
  在傳統(tǒng)的項(xiàng)目開(kāi)發(fā)中,我們常常會(huì)用到px、%、em這幾個(gè)單位,因?yàn)樗苓m用于大部分的項(xiàng)目開(kāi)發(fā),而且擁有比較良好的兼容性。但素,你造嗎?從CSS3開(kāi)始,瀏覽器對(duì)邏輯單位的支持又提升到了另外一個(gè)境界,增加了rem、vw、vh、vm等一些新的長(zhǎng)度單位,我們可以用這些新的單位開(kāi)發(fā)出比較良好的響應(yīng)式頁(yè)面,以此可以覆蓋多種不同分辨率的設(shè)備,包括移動(dòng)設(shè)備等。
 
  那么,接下來(lái)我們分別來(lái)分析下,這些常用到的單位分別是什么。
 
  1.px
 
  px就是pixel的縮寫(xiě),像素,相對(duì)長(zhǎng)度單位,像素是相對(duì)于顯示器屏幕分辨率而言。比如常常聽(tīng)到的電腦像素是1024x768的,表示的是水平方向是1024個(gè)像素點(diǎn),垂直方向是768個(gè)像素點(diǎn)。再比如,px就可以認(rèn)為是一張圖片最小的一個(gè)點(diǎn),一張位圖就是千千萬(wàn)萬(wàn)的這樣的點(diǎn)構(gòu)成的。
 
  2.em
 
  相對(duì)長(zhǎng)度單位,參考對(duì)象是父元素的font-size,具有繼承的特點(diǎn),如果當(dāng)前行內(nèi)文本的字體尺寸未被設(shè)置,瀏覽器使用默認(rèn)字體尺寸(16px),整個(gè)頁(yè)面內(nèi)1em也不是一個(gè)固定的值。
 
  3.%
 
  一般寬泛的講是相對(duì)于父元素,但是并不是絕對(duì)的。
 
  1)、對(duì)于普通元素就是我們理解的相對(duì)于父元素
 
  2)、對(duì)于position: absolute;的元素是相對(duì)于已定位的父元素
 
  3)、對(duì)于position: fixed;的元素是相對(duì)于ViewPort(可視窗口)
 
  4.rem
 
  rem是css3的新單位,相對(duì)于根元素html(網(wǎng)頁(yè))的font-size,不會(huì)像em那樣,依賴(lài)于父元素的字體大小,而造成混亂。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身,通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小,又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前,除了IE8及更早版本外,所有瀏覽器均已支持rem。對(duì)于不支持它的瀏覽器,應(yīng)對(duì)方法也很簡(jiǎn)單,就是多寫(xiě)一個(gè)絕對(duì)單位的聲明。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。
 
  例如:
 
  p{font-size:14px;?font-size:.875rem;}
 
   但是,需要注意的是:
 
  選擇使用什么字體單位主要由你的項(xiàng)目來(lái)決定,如果你的用戶(hù)群都使用最新版的瀏覽器,那推薦使用rem,如果要考慮兼容性,那就使用px,或者兩者同時(shí)使用。一般rem用在移動(dòng)端可能更多些。
 
  5.vw 
 
  vw是css3新單位,viewpoint width的縮寫(xiě),即視口寬度。何謂視口,就是根據(jù)你瀏覽器窗口的大小的單位,不受顯示器分辨率的影響,是不是很神奇,這就代表了,我們不需要顧慮到現(xiàn)在那么多不同電腦有關(guān)分辨率的自適應(yīng)問(wèn)題。視口寬度被均分為100單位的vw,1vw等于視窗寬度的1%。
 
  舉個(gè)例子:瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。和百分比不一樣的是,vw始終相對(duì)于可視窗口的寬度,而百分比和其父元素的寬度有關(guān)。
 
  6.vh
 
  與vw類(lèi)似,vh就是可視窗口的高度了。視口高度被均分為100單位的vh,1vh就是高度的1%。看下圖:
 
  7.vm
 
  vm也是css3新單位,相對(duì)于視口的寬度或高度中較小的那個(gè)。其中最小的那個(gè)被均分為100單位的vm。
 
  舉個(gè)栗子:瀏覽器高度800px,寬度1000px,取最小的瀏覽器高度,1 vm = 800px/100 = 8 px。
 
  由于現(xiàn)在vm的兼容性較差,現(xiàn)在基本上很少有人用。
 
  除了上述7種單位,css還有哪些長(zhǎng)度單位?
 
  例如:
 
  in  寸
 
  cm  厘米
 
  mm  毫米
 
  pt   point磅,大約1/72寸
 
  pc   pica派卡,大約6pt,1/6寸
 
  1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
 
51La 主站蜘蛛池模板: 不锈钢搅拌罐_高速搅拌罐厂家-无锡市凡格德化工装备科技有限公司 | 黑龙江「京科脑康」医院-哈尔滨失眠医院_哈尔滨治疗抑郁症医院_哈尔滨精神心理医院 | ET3000双钳形接地电阻测试仪_ZSR10A直流_SXJS-IV智能_SX-9000全自动油介质损耗测试仪-上海康登 | 济南品牌包装设计公司_济南VI标志设计公司_山东锐尚文化传播 | 广州二手电缆线回收,旧电缆回收,广州铜线回收-广东益福电缆线回收公司 | 睿婕轻钢别墅_钢结构别墅_厂家设计施工报价 | 硅胶制品-硅橡胶制品-东莞硅胶制品厂家-广东帝博科技有限公司 | 扬子叉车厂家_升降平台_电动搬运车|堆高车-扬子仓储叉车官网 | 亿立分板机_曲线_锯片式_走刀_在线式全自动_铣刀_在线V槽分板机-杭州亿协智能装备有限公司 | 蓝米云-专注于高性价比香港/美国VPS云服务器及海外公益型免费虚拟主机 | 国际船舶网 - 船厂、船舶、造船、船舶设备、航运及海洋工程等相关行业综合信息平台 | 菏泽商标注册_菏泽版权登记_商标申请代理_菏泽商标注册去哪里 | 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 | 水成膜泡沫灭火剂_氟蛋白泡沫液_河南新乡骏华消防科技厂家 | 轴承振动测量仪电箱-轴承测振动仪器-测试仪厂家-杭州居易电气 | 色谱柱-淋洗液罐-巴罗克试剂槽-巴氏吸管-5ml样品瓶-SBS液氮冻存管-上海希言科学仪器有限公司 | 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 沈阳楼承板_彩钢板_压型钢板厂家-辽宁中盛绿建钢品股份有限公司 轴承振动测量仪电箱-轴承测振动仪器-测试仪厂家-杭州居易电气 | 智能交通网_智能交通系统_ITS_交通监控_卫星导航_智能交通行业 | 山东太阳能路灯厂家-庭院灯生产厂家-济南晟启灯饰有限公司 | 万师讲师网-优质讲师培训师供应商,讲师认证,找讲师来万师 | 大型冰雕-景区冰雕展制作公司,3D创意设计源头厂家-[赛北冰雕] | 净化工程_无尘车间_无尘车间装修-广州科凌净化工程有限公司 | 上海璟文空运首页_一级航空货运代理公司_机场快递当日达 | 河南凯邦机械制造有限公司 | 视觉检测设备_自动化检测设备_CCD视觉检测机_外观缺陷检测-瑞智光电 | 气力输送_输送机械_自动化配料系统_负压吸送_制造主力军江苏高达智能装备有限公司! | 下水道疏通_管道疏通_马桶疏通_附近疏通电话- 立刻通 | 苏州教学设备-化工教学设备-环境工程教学模型|同科教仪 | 成都装修公司-成都装修设计公司推荐-成都朗煜装饰公司 | 山东臭氧发生器,臭氧发生器厂家-山东瑞华环保设备 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库-首页-东莞市傲马网络科技有限公司 | 有福网(yofus.com)洗照片冲印,毕业聚会纪念册相册制作个性DIY平台 | 铝单板_铝窗花_铝单板厂家_氟碳包柱铝单板批发价格-佛山科阳金属 | 折弯机-刨槽机-数控折弯机-数控刨槽机-数控折弯机厂家-深圳豐科机械有限公司 | 生物风-销售载体,基因,质粒,ATCC细胞,ATCC菌株等,欢迎购买-百风生物 | 仿真茅草_人造茅草瓦价格_仿真茅草厂家_仿真茅草供应-深圳市科佰工贸有限公司 | 不锈钢钢格栅板_热浸锌钢格板_镀锌钢格栅板_钢格栅盖板-格美瑞 | IHDW_TOSOKU_NEMICON_EHDW系列电子手轮,HC1系列电子手轮-上海莆林电子设备有限公司 | 镀锌角钢_槽钢_扁钢_圆钢_方矩管厂家_镀锌花纹板-海邦钢铁(天津)有限公司 | 工业车间焊接-整体|集中除尘设备-激光|等离子切割机配套除尘-粉尘烟尘净化治理厂家-山东美蓝环保科技有限公司 |