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>

更多相关文章

  1. Android中用Spannable在TextView中给文字加上边框
  2. Android上实现柱状图表 可实现边框矩形 没填充色
  3. android TextView 设置部分文本 边框和样式
  4. android 常用代码
  5. android EditText输入框获得焦点时候边框变为变色
  6. Android控件指定方向加边框
  7. Android(安卓)相机拓展库，能够实时采集并且识别相机内物体边框是
  8. Android(安卓)对话框【Dialog】去除白色边框代码
  9. Android(安卓)shape中的padding无效

随机推荐

  1. 配置 limits.conf 限制 Linux 用户登录数
  2. 8.24 linux c socket 简单实现
  3. 谁能讲一下搞网站后端开发的刚进公司每天
  4. Linux的时间函数(转载)
  5. 在红帽企业Linux 4中设置 device-mapper
  6. Linux与Windows平台的一些兼容性注意事项
  7. Linux下安装Mathematica 9的说明
  8. linux下rar包的解压方法
  9. linux性能监测工具perf
  10. Linux源码中的mktime算法解析