ASCII码 ASCII码

盒模型、媒体查询及em和rem的用法

发布于：2022-05-01 23:54:29  栏目：技术文档

1. 盒模型

内容

1. 创建一个400*400的盒子

2. box-sizing的border-box属性（将盒子的大小定义为到边框的距离）可以解决边框被盒子撑开等一系列问题

3. padding 属性

4. border 属性

5. 建立两个盒子 练习常用属性的用法 验证两个盒子之间margin的值由数值较大方决定

1.创建一个400*400的盒子

效果图

代码

  1.  <div class="box"></div>
  2.     <!-- <div class="box"></div> -->
  3.    <style>
  4.        .box{
  5.            width: 400px; /* 宽度  */
  6.            height: 400px; /* 长度  */
  7.            background-color: aqua; 
  8.            border: 10px solid blue;   /* border是与外界的边框 内容是与外面的边界 */
  9.            padding: 20px ;   /* padding是透明的 要想看到需要用下面代码剪切 让背景只覆盖内容区，不要覆盖到整个padding区 */
  10.            /* background-clip: content-box; */
  11.        }
  1. 如图创建一个400*400的盒子 但是最终计算结果包括padding内边距和border边框 为460*460
  2. 我想要一个真正300*300的盒子 要怎么做呢？
  3. 方法1 计算当前宽度 减padding内边距和border边框减去
  4. 计算 400-10-20-20-10=340 修改后最终得到400*400的盒子

效果图

1.

2.

代码

  1.    .box{
  2.           width: 340px;  
  3.           height: 340px; 
  4.         background-color: aquamarine;  
  5.          border: 10px solid red; 
  6.         padding:20px;  
  8.         background-clip: content-box; 
  9. }

方法2.box-sizing的border-box属性 让当前宽高的边界扩充到边框上 就不用计算 效果都是一样的

代码

  1.  .box{
  2.            width: 400px;
  3.            height: 400px; 
  4.            background-color: aqua; 
  5.            border: 10px solid blue;  
  6.            padding: 20px ;   
  7.            background-clip: content-box; 
  8.            box-sizing: border-box;
  9.        }

padding 属性

代码

  1.   .box{
  2. /* 四值语法 上右下左 顺时针方向 */
  3. padding:5px 10px 15px 20px;
  4. /* padding:5px 10px 15px 10px ;  左右相等 上下不等 可以用下面三值语法 */
  5.  padding: 5px 10px 15px;
  6. /* padding:5px 10px 5px 10px; 左右相同 上下相同 但是值不一样可以用下面双值语法 */
  7.  padding: 5px 10px;
  8. /* 单值语法 padding:10px 10px 10px 10px; 四个方向全相同 */
  9. padding: 10px;
  10.                }

border 属性

代码

  1.      .box{
  2.  /* background-clip: content-box;  这个去掉让背景色覆盖边框 */
  3. border-right: 10px solid blue;   /* 边框设置 第一个宽度 第二个样式 第三个颜色 */
  4. border-left: 10px solid blue; /* 左边框*/
  5. border-top: 10px solid blue;   /* 上边框*/
  6. border-bottom: 10px solid blue; /*下边框 */
  7. /* 四个边都一样 语句简化 */
  8. border: 10px solid red;
  9. /* border: 10px dashed red; 背景色可以越过边框 */
  10.     }

margin属性

  1. margin是控制多个格子之间排列的时候 控制每个盒子间隙的 是一个外边距 
  2. margin会在垂直方向出现折叠 谁大用谁的

效果图

1.

2.

代码

  1.  .box{
  2.         margin: 30px;
  3.         background-color: aqua;
  4.     }
  5.     .box:last-of-type{
  6.         margin-top: 50px;
  7.         background-color: blue;
  8.     }

2.媒体查询

内容

1.将html标签的字体大小调整为15个像素

2.当显示屏幕的像素在小于400时将html的字体大小调整为12个像素

2.当显示屏幕的像素在400~430之间时将html的字体大小调整为15个像素

3.当显示屏幕的像素在430以上时将html的字体大小调整为18个像素

效果图

1.

2.

3.

代码

  1.  <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>媒体查询</title>
  8. </head>
  9. <body>
  10.     <button class="item a">item1</button>
  11.     <button class="item b">item2</button>
  12.     <button class="item c">item3</button>
  13.     <button class="item d">item4</button>
  14.     <style>
  15.         html{
  16.             font-size: 15px;
  17.         }
  18.         .item{
  19.             background-color: seagreen;
  20.             color: white;
  21.             border: none;
  22.             outline: none;
  23.         }
  24.         .item:hover {
  25.         cursor: pointer;
  26.         opacity: 0.8;
  27.         transition: 0.3s;
  28.         padding: 0.4rem 0.8rem;
  29.     }
  31.     .item.a{
  32.         font-size: 1.4rem;
  33.     }
  35.     .item.b{
  36.         font-size: 1.8rem;
  37.     }
  38.     .item.c{
  39.         font-size: 2.1rem;
  40.     }
  41.     .item.d{
  42.         font-size: 2.5rem;
  43.     }
  44.      /* 最大400px时生效,是不是当小于400px才有效果 */
  45.      @media(max-width:400px){
  46.          html{font-size:12px;
  47.      }
  48.     }
  49.     /* 400px-430px 之间 */
  50.     @media(min-width:400px) and (max-width:430px){
  51.          html{font-size:15px;
  52.      }
  53.     }
  54.       /* 大于430px */
  55.       @media (min-width:430px){
  56.         html {
  57.             font-size: 18px;
  58.         }
  59.     }
  60.     </style>
  62. </body>
  63. </html>

3.em和rem

3.1 em默认16px 会自动继承父元素 在继承父元素下 随着父元素改变而改变

效果图

3.1

3.2 而当父元素设置30px 1em就等于30px 2em就是60px

效果图

3.3 rem rem为根元素字符大小的单位 随着根元素字体大小而变化

  1. 在根元素中设置字号，其他地方引用rem 这个值是不变的 因为一个页面只有一个根元素
  2.  根元素为20px 父元素为30px 不受父元素影响 当前像素为20px*2=40px

效果图

代码

  1.  <style>
  2.         html{
  3.             font-size: 20px;
  4.         }
  5.         div{
  6.              font-size: 30px;
  7.         }
  8.           div span{
  9.               font-size: 2rem; 
  10.          } 
  11.     </style>
  12.     <div><span>hello word</span></div>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行