文章目录
遗留问题:
1.maigin重叠,还有什么浮动上去,z-index,image标签隐藏
1.css盒子模型
有标准盒模型和怪异盒模型
区别在于设置width和height时,所对应的范围不同。标准盒模型的width和height属性的
范围只包含了content,而IE盒模型的width和height属性的范围包含了border、padding和content。
一般来说,我们可以通过修改元素的box-sizing属性来改变元素的盒模型。
box-sizing属性值
content-box 这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box 指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 指定 box-sizing 属性的值,应该从父元素继承
2.css选择器
(1)id选择器(#myid)
(2)类选择器(.myclassname)
(3)标签选择器(div,h1,p)
(4)后代选择器(h1 p)
(5)相邻后代选择器(子)选择器(ul>li)
(6)兄弟选择器(li~a)
(7)相邻兄弟选择器(li+a)
(8)属性选择器(a[rel=“external”])
(9)伪类选择器(a:hover,li:nth-child)
(10)伪元素选择器(::before、::after)
(11)通配符选择器(*)
3.伪类与伪元素的区别
单冒号(:
)用于CSS3伪类,双冒号(::
)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成)
双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法,
比如:first-line
、:first-letter
、:before
、:after
等,而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
想让插入的内容出现在其它内容前,使用::before
,否者,使用::after
;
在代码顺序上,::after
生成的内容也比::before
生成的内容靠后。如果按堆栈视角,::after
生成的内容会在::before
生成的内容之上。
回答:
在css3中使用单冒号来表示伪类,用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法,在一些浏览器中也可以使用单冒号
来表示伪元素。
伪类一般匹配的是元素的一些特殊状态,如hover
、link
等,而伪元素一般匹配的特殊的位置,比如after
、before
等。
4.css中有哪些属性可以继承?
每一个属性在定义中都给出了这个属性是否具有继承性,一个具有继承性的属性会在没有指定值的时候,会使用父元素的同属性的值 来作为自己的值。 一般具有继承性的属性有,字体相关的属性,font-size和font-weight等。文本相关的属性,color和text-align等。 表格的一些布局属性、列表属性如list-style等。还有光标属性cursor、元素可见性visibility。 当一个属性不是继承属性的时候,我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。
5.CSS优先级
相关知识点:
CSS的优先级是根据样式声明的特殊性值来判断的。
选择器的特殊性值分为四个等级,如下:
(1)标签内选择符x,0,0,0
(2)ID选择符0,x,0,0
(3)class选择符/属性选择符/伪类选择符 0,0,x,0
(4)元素和伪元素选择符0,0,0,x
计算方法:
(1)每个等级的初始值为0
(2)每个等级的叠加为选择器出现的次数相加
(3)不可进位,比如0,99,99,99
(4)依次表示为:0,0,0,0
(5)每个等级计数之间没关联
(6)等级判断从左向右,如果某一位数值相同,则判断下一位数值
(7)如果两个优先级相同,则最后出现的优先级高,!important也适用
(8)通配符选择器的特殊性值为:0,0,0,0
(9)继承样式优先级最低,通配符样式优先级高于继承样式
(10)!important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的特殊性值为1,0,0,0,0。
计算实例:
(1)#demo a{color: orange;}/*特殊性值:0,1,0,1*/
(2)div#demo a{color: red;}/*特殊性值:0,1,0,2*/
注意:
(1)样式应用时,css会先查看规则的权重(!important),加了权重的优先级最高,当权重相同的时候,会比较规则的特殊性。
(2)特殊性值越大的声明优先级越高。
(3)相同特殊性值的声明,根据样式引入的顺序,后声明的规则优先级高(距离元素出现最近的)
(4) 部分浏览器由于字节溢出问题出现的进位表现不做考虑
回答:
判断优先级时,首先我们会判断一条属性声明是否有权重,也就是是否在声明后面加上了!important。一条声明如果加上了权重,
那么它的优先级就是最高的,前提是它之后不再出现相同权重的声明。如果权重相同,我们则需要去比较匹配规则的特殊性。
一条匹配规则一般由多个选择器组成,一条规则的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性可以分为四个等级,
第一个等级是行内样式,为1000,第二个等级是id选择器,为0100,第三个等级是类选择器、伪类选择器和属性选择器,为0010,
第四个等级是元素选择器和伪元素选择器,为0001。规则中每出现一个选择器,就将它的特殊性进行叠加,这个叠加只限于对应的等
级的叠加,不会产生进位。选择器特殊性值的比较是从左向右排序的,也就是说以1开头的特殊性值比所有以0开头的特殊性值要大。
比如说特殊性值为1000的的规则优先级就要比特殊性值为0999的规则高。如果两个规则的特殊性值相等的时候,那么就会根据它们引
入的顺序,后出现的规则的优先级最高。
6.居中一个div
- 水平居中:给 div 设置一个宽度,然后添加 margin:0 auto 属性
div {
width: 200px;
margin: 0 auto;
}
- 水平居中,利用 text-align:center 实现
.container {
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 0;
}
.box {
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
}
- 让绝对定位的 div 居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /*方便看效果*/
}
- 水平垂直居中一
/*确定容器的宽高宽500高300的层设置层的外边距div{*/
position: absolute;/*绝对定位*/
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px00-250px;/*外边距为自身宽高的一半*/
background-color: pink;/*方便看效果*/
}
- 水平垂直居中二
/*未知容器的宽高,利用`transform`属性*/
div {
position: absolute; /*相对定位或绝对定位均可*/
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /*方便看效果*/
}
- 水平垂直居中三
/*利用flex布局实际使用时应考虑兼容性*/
.container {
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
.containerdiv {
width: 100px;
height: 100px;
background-color: pink; /*方便看效果*/
}
- 水平垂直居中四
/*利用text-align:center和vertical-align:middle属性*/
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 0;
white-space: nowrap;
overflow: auto;
}
.container::after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box {
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
white-space: normal;
vertical-align: middle;
}
- 水平垂直居中五
css:
div{
width: 300px;
height: 300px;
border: 3px solid #555;
display: table-cell;//这里这样设置
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}
回答:
一般常见的几种居中的方法有:
对于宽高固定的元素
(1)我们可以利用margin:0 auto来实现元素的水平居中。
(2)利用绝对定位,设置四个方向的值都为0,并将margin设置为auto,由于宽高固定,因此对应方向实现平分,可以实现水
平和垂直方向上的居中。
(3)利用绝对定位,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过margin负值来调整元素
的中心点到页面的中心。
(4)利用绝对定位,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过translate来调整元素
的中心点到页面的中心。
(5)使用flex布局,通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对
齐,然后它的子元素也可以实现垂直和水平的居中。
对于宽高不定的元素,上面的后面两种方法,可以实现元素的垂直和水平的居中。
7.块级元素和行内元素的区别
知识点
block 块类型。默认宽度为父元素宽度,可设置宽高,换行显示,可以容纳行内元素和其他块元素
none 元素不显示,并从文档流中移除。
inline 行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示,只能容纳文本和其他行内元素
inline-block 默认宽度为内容宽度,可以设置宽高,同行显示。
list-item 像块类型元素一样显示,并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承display属性的值。
回答:
1.行内元素与块级元素直观上的区别。
行内元素会在一条直线上排列,都是同一行的,水平方向排列。
块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3.行内元素与块级元素属性的不同,主要是盒模型属性上。
行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。
块级元素
行内元素
8.position的值
固定定位fixed:
元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。 Fixed定位的元素和其他元素重叠。
相对定位relative:
如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
绝对定位absolute:
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。 absolute 定位使元素的位置与文档流无关,因此不占据空间。 absolute 定位的元素和其他元素重叠。
粘性定位sticky:
元素先按照普通文档流定位,然后相对于该元素在流中的flow root(BFC)和 containing block(最近的块级祖先元素)定位。而后,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
默认定位Static:
默认值。没有定位,元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明)。
inherit:
规定应该从父元素继承position 属性的值。
9.CSS3 有哪些新特性?
新增各种CSS选择器 (:not(.input):所有class不是“input”的节点)
圆角 (border-radius:8px)
多列布局 (multi-column layout)
阴影和反射 (Shadow\Reflect)
文字特效 (text-shadow)
文字渲染 (Text-decoration)
线性渐变 (gradient)
旋转 (transform)
缩放,定位,倾斜,动画,多背景
例如:transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:
10.请解释一下 CSS3 的 Flex box(弹性盒布局模型),以及适用场景?
相关知识点:
Flex是FlexibleBox的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意,设为Flex布局以后,子元素的float、cl
ear和vertical-align属性将失效。
采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex
项目(flex item),简称"项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis),项目默认沿主轴排列。
以下6个属性设置在容器上。
flex-direction属性决定主轴的方向(即项目的排列方向)。
flex-wrap属性定义,如果一条轴线排不下,如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
以下6个属性设置在项目上。
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认
值为auto,即项目的本来大小。
flex属性是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto。
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父
元素的align-items属性,如果没有父元素,则等同于stretch。
回答:
flex布局是CSS3新增的一种布局方式,我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex
容器,它的所有子元素都会成为它的项目。
一个容器默认有两条轴,一个是水平的主轴,一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。
我们可以使用justify-content来指定元素在主轴上的排列方式,使用align-items来指定元素在交叉轴上的排列方式。还
可以使用flex-wrap来规定当一行排列不下时的换行方式。
对于容器中的项目,我们可以使用order属性来指定项目的排列顺序,还可以使用flex-grow来指定当排列空间有剩余的时候,
项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时,项目的缩小比例。
11.用纯 CSS 创建一个三角形的原理是什么?
采用的是相邻边框连接处的均分原理。
将元素的宽高设为0,只设置
border
,把任意三条边隐藏掉(颜色设为
transparent),剩下的就是一个三角形。
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
12.实现筛子
<html>
<head>
<style type="text/css">
#bg{
height: 200px;
outline: red dotted thin;
display: inline-flex; /*不用定义此容器的宽度,宽度根据容器元素进行自适应*/
}
.dice-base{
width: 100px;
height: 100px;
background-color: gray;
border: 2px solid green;
margin-right: 10px;
display: flex; /*flex布局*/
}
/*first dice*/
.dice-1{
margin-left: 10px;
justify-content: center; /*可以使子元素水平居中*/
}
.one{
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%; /*画圆*/
align-self: center; /*使自己在垂直方向居中*/
}
/*second dice*/
.dice-2{
justify-content: space-between; /*使第一个元素左对齐,第二个元素右对齐*/
}
.two{
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
}
.two:nth-child(2){ /*nth-child是选择器*/
align-self: flex-end; /*使第二个元素自身在垂直方向上底边对齐*/
}
/*third dice*/
.dice-3{
justify-content: space-between; /*使第一个元素左对齐,最后一个元素右对齐*/
}
.three{
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
}
.three:nth-child(2){ /*nth-child是选择器*/
align-self: center; /*使第二个元素自身在垂直方向上居中*/
}
.three:nth-child(3){ /*nth-child是选择器*/
align-self: flex-end; /*使第二个元素自身在垂直方向上底边对齐*/
}
/*forth dice*/
.dice-4{
flex-wrap: wrap; /*当子元素超过父元素时在下一行显示*/
align-content: space-between; /*在垂直方向上两边对齐*/
}
.forth{
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
}
.forth:nth-child(1){
margin-right: 40px; /*设置第一个元素右边距,使一行只放两个子元素*/
}
.forth:nth-child(3){
margin-right: 40px;
}
/*five dice*/
.dice-5{
flex-wrap: wrap; /*当子元素超过父元素时在下一行显示*/
align-content: space-between; /*在垂直方向上两边对齐*/
}
.five{
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
}
.five:nth-child(1){
margin-right: 40px; /*设置第一个元素右边距,使一行只放两个子元素*/
}
.five:nth-child(3){
margin-right: 35px;
margin-left: 35px;
}
.five:nth-child(4){
margin-right: 40px;
}
/*six dice*/
.dice-6{
flex-wrap: wrap; /*当子元素超过父元素时在下一行显示*/
align-content: space-between; /*在垂直方向上两边对齐*/
justify-content: space-between;/*在水平方向上两边对齐*/
}
.six{
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="bg">
<!-- first dice -->
<div class="dice-base dice-1">
<div class="one"></div>
</div>
<!-- second dice -->
<div class="dice-base dice-2">
<div class="two"></div>
<div class="two"></div>
</div>
<!-- third dice -->
<div class="dice-base dice-3">
<div class="three"></div>
<div class="three"></div>
<div class="three"></div>
</div>
<!-- forth dice -->
<div class="dice-base dice-4">
<div class="forth"></div>
<div class="forth"></div>
<div class="forth"></div>
<div class="forth"></div>
</div>
<!-- five dice -->
<div class="dice-base dice-5">
<div class="five"></div>
<div class="five"></div>
<div class="five"></div>
<div class="five"></div>
<div class="five"></div>
</div>
<!-- five dice -->
<div class="dice-base dice-6">
<div class="six"></div>
<div class="six"></div>
<div class="six"></div>
<div class="six"></div>
<div class="six"></div>
<div class="six"></div>
</div>
</div>
<script>
</script>
</body>
</html>
13.visibility=hidden, opacity=0,display:none
opacity=0,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定一些事件,如click事件,那么点击该区域,也能触发点击事件
visibility=hidden,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已经绑定的事件
display=none,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删除掉一样。
14.浮动清除
方法一:使用带clear属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。
方法二:使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
.news {
background-color: gray;
border: solid 1px black;
overflow: hidden;
*zoom: 1;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
方法三:给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。
方法四:使用邻接元素处理
什么都不做,给浮动元素后面的元素添加clear属性。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.content{
clear:both;
}
some text
方法五:使用CSS的:after伪元素
结合 :after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clearfix:after{
content: “020”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
some text
总结:
通过上面的例子,我们不难发现清除浮动的方法可以分成两类:
一是利用 clear 属性,包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素,关于这一点。
在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式;在小模块如ul里使用overflow:hidden;(留意可能产生的隐藏溢出元素问题);如果本身就是浮动元素则可自动清除内部浮动,无需格外处理;正文中使用邻接元素清理之前的浮动。
最后可以使用相对完美的:after伪元素方法清理浮动,文档结构更加清晰。
15.BFC
定义:
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
如何创建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
作用:
1.利用BFC避免margin重叠
2.自适应两栏布局
3.清除浮动
16.移动端的布局用过媒体查询吗?
/* 响应式布局 - 屏幕尺寸小于 800px 时,两列布局改为上下布局 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* 响应式布局 -屏幕尺寸小于 400px 时,导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
17.语义化标签
<header>:页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>:标记导航,仅对文档中重要的链接群使用。
<main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。
<article>:定义外部的内容,其中的内容独立于文档的其余部分。
<section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>:页脚,只有当父级是body时,才是整个页面的页脚。
18.前端性能优化
https://segmentfault.com/a/1190000022205291
webpack模块打包和JavaScript 压缩(如gzip压缩)
缓存优化
避免重定向
图片懒加载
减少 HTTP 请求
将 CSS 放在文件头部,JavaScript 文件放在底部
使用字体图标 iconfont 代替图片图标
19.px em rem 的区别
px是像素值,是一个固定的长度
em相当于当前对象内的文本字体,没有相对于浏览器,默认16px,1em=16px,
rem,root em,相对于HTML根元素
rem 如何修改与px的相对计算关系
html{
font-size:16px;
}
.div-rem{
width: 10rem;
height: 10rem;
font-size: 1rem;
background-color: #a58778;
}
em 如何修改与px的相对计算关系
用法1
.div-em{
width: 10em;
height: 10em;
font-size: 32px;
background-color: aquamarine;
}
用法2
.div-em-father{
font-size: 64px;
}
.div-em-child{
width: 10em;
height: 10em;
background-color: cadetblue;
}
20. vh vw
vh 和 vw 就是根据窗口的宽高,分成100等份,100vh就表示满高,50vh就表示一半高。
vh 和 vw与百分比的区别是什么?
百分比是基于父元素的设置而言的,如果父元素为100px,那么子元素100%也就是100px。
而 vh 和 vw 始终是针对窗口的宽高
用法
.div-vh-vw{
width: 10vw;
height: 10vh;
background-color: pink;
}
div-vh-vw-child{
width: 50%;
height: 50%;
background-color: blue;
}