制作网站能赚钱吗,深圳网站建设汤小巧,西安有哪些大公司,有限公司和有限责任公司html5中#xff0c;常用的单位有px、em、rem、%、vw、vh#xff08;不常用#xff09;、cm、m等#xff0c;这里主要讲解px、em、rem、%、vw。
学习了解#xff1a;主流浏览器默认的字号#xff1a;font-size:16px#xff0c;无论用什么单位#xff0c;浏览器最终计算…html5中常用的单位有px、em、rem、%、vw、vh不常用、cm、m等这里主要讲解px、em、rem、%、vw。
学习了解主流浏览器默认的字号font-size:16px无论用什么单位浏览器最终计算为像素px。
1、绝对单位 px也称为像素所谓绝对单位就是不随着网页的大小等变化的单位。
style
.box{width:160px;height:160px;background-color:red;}
/style
!-- 定义box --
div classbox/div
如上述的的盒子box的宽高就是160px是固定的不会随着浏览器或其他元素的变化而变化因此也叫绝对的单位。
2、相对单位 em所谓相对单位是相对于网页中的元素而言的。
默认情况下1em 浏览器的默认字号即1em 16px因此上面的代码可以改为一下代码。
em受font-size字号的影响如果设置了font-size:32px思考一下会发生什么呢当font-size设置为32px时此时的1em 32px相应的box盒子也增大了一倍。
em受父元素的影响一般情况下电脑端用em。
style
/* .box{width:160px;height:160px;background-color:red;} */
.box{width:10em;height:10em;background-color:red;}
/style
!-- 定义box --
div classbox/div
3、相对单位rem可以理解为root根em。
所谓根字号或者根单位默认是16px除非认为去更新默认的字号否则不变不收祖先元素的影响只受根字号的影响。同样的font-size不要再用16px表达而是用font-size:0.5rem的形式进行表达一般情况下移动端用rem
style
html{
font-size:32px;
/*此时的 1rem 32px*/
}
/* .box{width:160px;height:160px;background-color:red;} */
.box{width:10rem;height:10rem;background-color:red;font-size:0.5rem}
/style
!-- 定义box 此时的box大小为320px--
div classbox/div
4、百分比%以父元素为参照我。
style
.box{width:160px;height:160px;background-color:red;}
.box .item {width:50%}
/style
!-- 定义box --
div classboxdiv classitem/box
/div
父元素box为160px那么item的宽度应为80px
4、视口单位vw和vh视口就是viewport的意思。视口就是可视窗口的意思。
vw是视口宽度vh视口高度视口单位和百分比%相似视口是以窗口的宽高作为基准百分号是以父元素作为基准。
vh和vw是表示视窗高度和宽度的相对单位。其中1vh等于视窗高度的1%而1vw等于视窗宽度的1%。这些单位通常用于响应式设计中以便根据用户设备的屏幕大小调整元素的尺寸和布局。
