1. class顺序

  1. <style>
  2.  .classA{ color:blue;}
  3.  .classB{ color:red;}
  4. </style>
  6. <body>
  7.  <p class='classB classA'> 123 </p>
  8. </body>

问：’123’是什么颜色的？
答：红色

2.盒模型

  1. <div class="box"></div>
  2. .box{
  3.     box-sizing:border-box;
  4.     width:150px; 
  5.     height:150px;
  6.     padding:10px;
  7.     background-color:red;
  8.     background-clip:content-box;
  9. }

问：红色区域为多宽？
答：130

3.弹性布局

下面蓝色区域的宽度

  1. <div class="box">
  2.     <div class=blue></div>
  3.     <div class="red"></div>
  4. </div>
  5. .box{
  6.     width: 400px;
  7.     display: flex;
  8.     height: 200px;
  9. }
  10. .red{
  11.      flex: 1;
  12.     background: red;
  13. }
  1. .blue{
  2.     flex: 1;
  3.     width: 100px;
  4.     background: blue;
  5. }
  6. //宽度为200px
  1. .blue{
  2.     flex-grow: 1;
  3.     width: 100px;
  4.     background: blue;
  5. }
  6. //宽度为250px
  1. .blue{
  2.     flex-shrink: 1;
  3.     width: 100px;
  4.     background: blue;
  5. }
  6. //宽度为100px