1，盒模型常用属性

盒模型

  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  5. <head>
  6.     <meta charset="UTF-8" />
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9.     <title>盒模型</title>
  10. </head>
  12. <body>
  13.     <div class="box"></div>
  14.     <div class="box"></div>
  15.     <style>
  16.         .box {
  17.             width: 400px;
  18.             height: 400px;
  19.             background-color: violet;
  20.             /* border: 10px solid black; */
  21.             /* padding: 20px; */
  22.             /* background-clip: content-box; */
  23.             box-sizing: border-box;
  24.         }
  25.         /* 10px+20px+400px=430px+30=460px */
  26.         /* 我的本意是想要得到一个400*400的盒子,但是最终计算结果却包括了内边距padding和边框border */
  27.         /* 10+20=30 , 400-30=370 */
  28.         /* 将左右多出来的padding,border全减去 */
  29.         /* .box {
  31.             width: 140px;
  32.             height: 140px;
  33.             background-color: violet;
  34.             border: 10px solid black;
  35.             padding: 20px;
  36.             background-clip: content-box;
  37.         } */
  39.         .box {
  40.             /* 四值:完整语法, 上向下左,顺时针方向 */
  41.             padding: 5px 10px 15px 20px;
  42.             padding: 5px 20px 15px 20px;
  43.             /* 三值语法: 左右相等,而上下不等 */
  44.             padding: 5px 20px 15px;
  45.             /* 双值语法: 左右相同,上下也相同,但并不是同一个值*/
  46.             padding: 15px 20px 15px 20px;
  47.             padding: 15px 20px;
  48.             /* 三值与双值的记忆方法: 第二个位置的值一定表示的是左右  */
  49.             /* 单值: 四个方向全相同 */
  50.             padding: 20px;
  51.         }
  53.         .box {
  54.             /* 边框与padding,margin类似,但又有显著的不同, 因为边框是可见的 */
  55.             /* border-right-width: 10px;
  56.             border-right-style: solid;
  57.             border-right-color: blue; */
  58.             /* border-right: 10px solid blue;
  59.             border-left: 10px solid blue;
  60.             border-top: 10px solid blue;
  61.             border-bottom: 10px solid blue; */
  62.             border: 10px dashed blue;
  63.         }
  65.         .box {
  66.             margin: 20px;
  67.         }
  69.         .box:last-of-type {
  70.             background-color: red;
  71.             margin-top: 50px;
  72.             /* margin会在垂直方向出现折叠,谁大用谁的 */
  73.         }
  74.         /* 页面中所有元素,都是一个矩形块 */
  75.         /* 矩形块在一个二维平面中,只有"垂直","水平"二种排列方式 */
  76.         /* 与这种排列方式对应的,就只有二种元素类型: 块元素, 行内元素 */
  80.         /* div: 块元素 */
  81.     </style>
  82.     <a href="">xxx</a>
  83.     <a href="">yyy</a>
  84.     <a href="">zzz</a>
  86.     <input type="text" />
  87.     <input type="text" />
  88.     <input type="text" />
  89.     <input type="text" />
  91.     <!-- 布局前提: 是在一个"宽度受限,而高度无限的空间内" -->
  92.     <!-- 布局时,必须将width,height其中一个限制死,否则无法完成布局 -->
  93.     <!-- 根据人类的观看习惯, 通常是将宽度限制,而高度随内容舒展 -->
  94. </body>
  96. </html>

2,媒体查询

媒体查询

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>媒体查询</title>
  9. </head>
  11. <body>
  12.     <!-- 媒体: 显示/输出信息的介质/载体, 屏幕, 打印机 -->
  13.     <!-- 查询: 根据当前媒体宽度的变化来选择不同的页面或显示效果 -->
  15.     <button class="btn samll">btn1</button>
  16.     <button class="btn middle">btn2</button>
  17.     <button class="btn large">btn3</button>
  18. </body>
  20. <style>
  21.     /* em: 默认元素字号,16px,  */
  22.     /* rem: 根元素的字号, 16px */
  24.     html {
  25.         font-size: 10px;
  26.         /* 1rem = 10px; */
  27.     }
  28.     /* 按钮基本样式 */
  30.     .btn {
  31.         background-color: seagreen;
  32.         color: white;
  33.         border: none;
  34.         outline: none;
  35.     }
  37.     .btn:hover {
  38.         cursor: pointer;
  39.         opacity: 0.8;
  40.         transition: 0.3s;
  41.         padding: 0.4rem 0.8rem;
  42.     }
  44.     .btn.small {
  45.         /* font-size: 12px; */
  46.         font-size: 1.2rem;
  47.     }
  49.     .btn.middle {
  50.         /* font-size: 16px; */
  51.         font-size: 1.6rem;
  52.     }
  54.     .btn.large {
  55.         /* font-size: 18px; */
  56.         font-size: 1.8rem;
  57.     }
  58.     /* 最大374px时生效,是不是当小于374px才有效果 */
  60.     @media (max-width: 374px) {
  61.         html {
  62.             font-size: 12px;
  63.         }
  64.     }
  65.     /* 374px - 414px 之间 */
  67.     @media (min-width: 375px) and (max-width: 413px) {
  68.         html {
  69.             font-size: 14px;
  70.         }
  71.     }
  72.     /* >414px 之间 */
  74.     @media (min-width: 414px) {
  75.         html {
  76.             font-size: 16px;
  77.         }
  78.     }
  79.     /* 以上是一个由小到大的匹配过程: 移动优先 */
  80.     /* 以上是一个由大到小的匹配过程: PC优先 */
  81. </style>
  83. </html>

3，em,rem的用法和差别

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>常用单位</title>
  9. </head>
  11. <body>
  12.     <!-- px: 像素,绝对单位, 1in = 96px -->
  13.     <!-- em,rem,vh,vw: 相对单位 -->
  15.     <div>
  16.         <span>Hello</span>
  17.     </div>
  19.     <style>
  20.         html {
  21.             font-size: 10px;
  22.             /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */
  23.             /* 因为一个页面,只有一个根元素, html  */
  24.             /* 1rem = 10px */
  25.         }
  27.         div {
  28.             /* font-size: 32px; */
  29.             /* 1em = 16px */
  30.             /* 32px = 2em */
  31.             font-size: 3rem;
  32.         }
  34.         div span {
  35.             /* font-size: 2em; */
  36.             /* 2em = 2*16=32px */
  37.             /* 但是 em在父元素中被重新定义了, 1em = 30px  */
  38.             /* 2em = 60px */
  39.             /* em总是随着自身或父元素的字号发生变化,在布局时会显得非常的混乱 */
  40.             /* font-size: 20px; */
  41.             font-size: 2rem;
  42.         }
  43.     </style>
  44. </body>
  46. </html>

更多相关文章

  1. android应用程序四大组件
  2. Android中XML解析-SAX解析
  3. 盒模型，媒体查询，em,rem用法
  4. 简单的登陆表单、后台框架、元素样式来源与优先级
  5. HTML入门之常用伪类选择器的使用方法总结
  6. 常用伪类选择器的实例演示及参数
  7. 多媒体文件信息
  8. 无废话Android之常见adb指令、电话拨号器、点击事件的4种写法、
  9. Android多媒体开发【10】-- android中OpenMax的实现【1】整体框

随机推荐

  1. Android生成Market分享链接
  2. Android(安卓)进阶学习：事件分发机制完全
  3. Android(安卓)进阶之刁钻问题汇总
  4. Android(安卓)驱动跟系统开发 1. 一个简
  5. Android(安卓)Menu的应用
  6. Android(安卓)ConstraintLayout 使用
  7. Android性能监测小工具——安测试
  8. Android(安卓)中的 Service 全面总结
  9. android EditText限制输入长度
  10. Android初学者教程