zoukankan      html  css  js  c++  java
  • css中content-box和border-box当宽度为百分比时的位置区别,vw和%区别

    盒模型

    参考代码

    // CSS 部分
    <style>
      .box1,.box2{
         200px;
        height: 200px;
        padding: 20px;
        margin: 20px;
        border: 20px solid rebeccapurple;
        background-color: aqua;
      }
      .box1 div,.box2 div{
         25%;
        height: 25%;
        background-color: red;
      }
      .box2{
        background-color: orange;
        box-sizing: border-box;
      }
    </style>
    // HTML 部分
    <div class="box1">
      <div></div>
    </div>
    <div class="box2">
      <div></div>
    </div>
    

    图解

    图示

    vw和%区别

    改变如下代码

    .box1 div,.box2 div{
       25vw;
      height: 25vw;
      background-color: red;
    }
    

    图解

    图示

    x、em、rem、%、vw、vh单位之间的区别?

    1.px

    px就是 pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率;

    2.em

    参考父元素的font-size,具有继承的特点。浏览器默认字体是16px,整个页面内1em不是一个固定的值;字体大小同样都是1.5em,但是效果却截然不同,按照W3C提供的公式,我们可以计算下: class为id1的div字体大小继承自父元素body:16px1.5em = 24px class为id2的div字体大小继承自父元素id1:24px1.5em = 36px class为id3的div字体大小继承自父元素id2:36px*1.5em = 54px

    3.rem

    rem是CSS3新增的一个相对单位,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

    4.%

    %百分比,相对长度单位,相对于父元素的百分比值

    元素款到与字体大小使用区别:

    (1)尽量使用相对尺寸单位

    使用相对尺寸单位计量,则在调整页面的布局的时候,不需要遍历所有的内部

    DOM结构,重新设置内部子元素的尺寸大小。如果是随着父容器或者是整体页

    面布局而改变尺寸,则使用%更好,如元素的高度和宽度设置;

    (2)字体尺寸尽量使用em,rem

    为了字体大小的可维护性和伸缩性,推荐使用em,如果存在3层以及3层

    以上的字体相对尺寸的设置,可以考虑使用em;

    5.vh和vw

    vh和vw 相对于视口的高度和宽度,1vh等于1/100的视口高度,1vw等于1/100的视口宽度,比如:浏览器高度900px,宽度为750px,1vh=900px/100=9px,1vw = 750px/100=7.5px;很容易实现与同屏幕等高的框

    完结~
  • 相关阅读:
    1105 Spiral Matrix (25分)(蛇形填数)
    1104 Sum of Number Segments (20分)(long double)
    1026 Table Tennis (30分)(模拟)
    1091 Acute Stroke (30分)(bfs,连通块个数统计)
    1095 Cars on Campus (30分)(排序)
    1098 Insertion or Heap Sort (25分)(堆排序和插入排序)
    堆以及堆排序详解
    1089 Insert or Merge (25分)
    1088 Rational Arithmetic (20分)(模拟)
    1086 Tree Traversals Again (25分)(树的重构与遍历)
  • 原文地址:https://www.cnblogs.com/lwlblog/p/12346233.html
Copyright © 2011-2022 走看看