图片 展示 网站模板,百度一下就知道手机版,做英文网站违法吗,wordpress显示某一类文章对于绘图和印刷而言#xff0c;“单位”相当重要#xff0c;然而在网页排版里#xff0c;单位也是同样具有重要性#xff0c;在CSS3普及以来#xff0c;更支持了一些方便好用的单位#xff08;px、em、rem…等#xff09;#xff0c;这篇文章将整理这些常用的CSS单位“单位”相当重要然而在网页排版里单位也是同样具有重要性在CSS3普及以来更支持了一些方便好用的单位px、em、rem…等这篇文章将整理这些常用的CSS单位也帮助自己未来在使用上能更加得心应手。“网页”和“印刷”的单位若要把单位做区隔最简单可以分为“网页”和“印刷”两大类通常对于CSS来说只会应用到网页的样式毕竟真正要做印刷还是会倾向透过排版软件来进行设计。网页单位px绝对单位代表屏幕中每个「点」pixel。em相对单位每个子元素透过「倍数」乘以父元素的px值。rem相对单位每个元素透过「倍数」乘以根元素的px值。%相对单位每个子元素透过「百分比」乘以父元素的px值。网页属性名称medium预设值等于16pxh4预设值xx-small:medium的0.6倍h6预设值x-small:medium的0.75倍small:medium的0.8倍h5预设值W3C定义为0.89实测约为0.8large:medium的1.1倍h3预设值W3C定义为1.2实测约为1.1x-large:medium的1.5倍h2预设值xx-large:medium的2倍h1预设值smaller约为父层的80%larger约为父层的120%印刷pt打印机的每个「点」定义为1 pt1/72 in如果在72 dpi的系统上1 px 1 pt但如果在96dpi的系统上1 px 0.75 pt72/96 0.75。in英寸在96 dpi的系统上1 in 96 px。cm厘米在96 dpi的系统上1 cm 37.795275593333 px。mm毫米在96 dpi的系统上1 cm 3.7795275593333 px。示例展示以下将展示四种不同单位的示例为公平起见四个示例都套用预设的div格式纯粹改变font-size看看有何不同由于子元素若没有设定font-size会自动继承父元素的font-size使用上就应该要预先初始化字体大小下面这两段CSS可以将所有的元素字体大小预设为16px然后可个别进行调整。html{font-size:16px;
}html * {font-size: 1rem;
}1. pxpx是绝对单位因此只要设定多少px就会精确的呈现对于一些讲求精准位置的排版而言十分有用如示例表示的指定多大px字体就会多大。div stylefont-size:16px;16pxdiv stylefont-size:20px;20pxdiv stylefont-size:24px;24pxdiv stylefont-size:16px;16pxdiv stylefont-size:32px;32px/div/div/div/div
/div2. emem是相对单位为每个子元素透过“倍数”乘以父元素的px值如果我们每一层div都使用1.2em最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 39.8px。浏览器预设字体大小为16px若无特别指定则会直接继承父元素字体大小div stylefont-size:1.2em;1.2emdiv stylefont-size:1.2em;1.2emdiv stylefont-size:1.2em;1.2emdiv stylefont-size:1.2em;1.2emdiv stylefont-size:1.2em;1.2em/div/div/div/div
/div3. remrem是相对单位为每个元素透过“倍数”乘以根元素的px值如果我们每一层div都使用1.2rem最内层就会是16px x 1.2 19.2px。根元素指的是html的font-size预设为16pxdiv stylefont-size:1.2rem;1.2remdiv stylefont-size:1.2rem;1.2remdiv stylefont-size:1.2rem;1.2remdiv stylefont-size:1.2rem;1.2remdiv stylefont-size:1.2rem;1.2rem/div/div/div/div
/div4. %%百分比是相对单位和em大同小异简单来说em就是百分比除以一百如果我们每一层div都使用120%就等同于1.2em最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 39.8px。div stylefont-size:120%;120%div stylefont-size:120%;120%div stylefont-size:120%;120%div stylefont-size:120%;120%div stylefont-size:120%;120%/div/div/div/div
/div5.small、medium、large…等字体大小的属性有七种分别是xx-small、x-small、small、medium、large、x-large和xx-large除了x-small其余六种分别对应h6~h1的标签文字大小根据W3C的规范以medium预设16px为基础若html字体预设大小改变medium也会跟着变使用固定的百分比乘以medium的大小例如ss-small预设为16px x 0.6 9.6px浏览器显示为12px。div stylefont-size:xx-small;xx-smalldiv stylefont-size:x-small;x-smalldiv stylefont-size:small;smalldiv stylefont-size:medium;mediumdiv stylefont-size:large;largediv stylefont-size:x-large;x-largediv stylefont-size:xx-large;xx-large/div/div/div/div/div/div
/div6. larger、smallerlarger和smaller就是固定百分比为单位larger为父层的120%smaller为父层的80%。div stylefont-size:medium;mediumdiv stylefont-size:larger;largerdiv stylefont-size:larger;largerdiv stylefont-size:larger;largerdiv stylefont-size:smaller;smallerdiv stylefont-size:smaller;smallerdiv stylefont-size:smaller;smaller/div/div/div/div/div/div
/div小结熟悉了字体大小单位之后就更能有系统的设计整个网站的CSS构架不过font-size本身和font-family有着一些复杂的关系不同的font-family有时也会影响font-size的设定因此使用上还是得稍微注意一下啰更多大型互联网web前端实战操作在线解析学习指导学习资源点【WEB前端资源】