1.盒模型常用属性

  1.     <div class="box"></div>
  3.     <style>
  4.         .box{
  5.             /* width 盒子宽 */
  6.             width: 200px;
  7.             /* height 盒子高 */
  8.             height: 200px;
  9.             /* 背景颜色 background-color */
  10.             background-color: darkviolet;
  11.             /* padding 外边距 四值：上右下左,顺时针排序 */
  12.             padding:10px 5px 15px 20px;
  13.              /* 三值:上下不相等,左右相等就写三值,*/
  14.             padding: 10px 20px 15px 20px;
  15.             padding: 10px 20px 15px;
  16.             /* 双值:上下相等，左右相等,但并不是同一个值 */
  17.             padding: 15px 20px 15px 20px;
  18.             padding: 15px 20px;
  19.             /* 三值与双值记忆法:第2个位置的值一定是左右 */
  20.             /* 单值:四个方向的值全相等 */
  21.             padding:15px;
  22.             /* 内边距 四值:四个方向的值全相等 */
  23.             margin: 15px;
  24.             /* 让盒子宽高只局限在设定好的范围内 */
  25.             box-sizing: border-box;
  26.             /* 裁切一个盒子内部的背景 */
  27.             /* background-clip: content-box; */
  28.         }
  30.         .box{
  31.             /* border 边框属性 */
  32.             border-right: 5px solid blue;
  33.         }
  35.     </style>

2.媒体查询

  1.     <div class="box_demo"></div>
  3.     <style>
  4.         .box_demo{
  5.             width: 100px;
  6.             height: 100px;
  7.             border: 1px solid;
  8.         }
  10.         /*PC端由小到大 */
  11.         /* 最大屏幕宽度是400px或者小于400px时生效,背景会变成红色 */
  12.         @media (max-width: 400px) {
  13.             .box_demo {
  14.                 background-color: red;
  15.             }
  16.         }
  17.         /* 当屏幕宽度是 410px 到 500px 之间的时候 背景就会变成绿色 */
  18.         @media (min-width: 410px) and (max-width:500px) {
  19.             .box_demo {
  20.                 background-color: forestgreen;
  21.             }
  22.         }
  23.         /* 当屏幕宽度大于 500px 时,背景就会变成黄色 */
  24.         @media (min-width: 500px) {
  25.             .box_demo{
  26.                 background-color: yellow;
  27.             }
  28.         }
  29.     </style>

效果演示

1.最大屏幕宽度是400px或者小于400px时生效,背景会变成红色

展示1展示1-1

2.当屏幕宽度是 410px 到 500px 之间的时候 背景就会变成绿色

效果展示2

3.当屏幕宽度大于 500px 时,背景就会变成黄色

展示3

3.em 和 ren 区别

  1. <div>
  2.     <span>Are you ok?</span>
  3. </div>
  5.     <style>
  6.         html{
  7.             /* 根元素设置字号大小后,rem就能保持不变 1rem = 10px */
  8.             font-size: 10px;
  9.         }
  11.         div{
  12.             /* 1em = 16px 
  13.             10em = 160px
  14.             这时候em是不变的 */
  15.             /* 现在定义div的字号 为10px 也就是说1em = 10px */
  16.             font-size: 10px;
  17.         }
  19.         div span{
  20.             /* span继承了父元素的字号1em = 10px
  21.             3em 现在等于 30px; */
  22.             /*font-size: 3em;*/
  23.         }
  25.         div span{
  26.             /* 2rem = 20px; */
  27.             font-size: 2rem;  
  28.         }
  30.     </style>

1.em值

示例1

1.rem值

示例2

从上可以得出，在根元素 html 里指定 rem 的值之后，rem 的值就不会改变，em 的值则会在父元素，字号大小改变后改变.