Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1. 实例演示盒模型常用属性,注意box-sizing的用法 2. 实例演示媒体查询 3. 实例演示em,rem用法,并说出之间差别
Blogger Information
Blog 7
fans 0
comment 1
visits 3001
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1. 实例演示盒模型常用属性,注意box-sizing的用法 2. 实例演示媒体查询 3. 实例演示em,rem用法,并说出之间差别
迷途的耗子
Original
356 people have browsed it

1. 实例演示盒模型常用属性,注意box-sizing的用法

  • 宽度 width: 100px;
  • 高度 height: 100px;
  • 内边距 padding: 5px;
  • 背景色 background-color: cadetblue;
  • 边框 border: 1px solid #000;
  • 规定背景的绘制区域background-clip: content-box;
    1. /* border-box    背景被裁剪到边框盒。 */
    2. /* padding-box    背景被裁剪到内边距框。*/
    3. /* content-box    背景被裁剪到内容框。 */
  • 外边距 margin: 1px 2px 3px 4px 顺序为上右下左

box-sizing的用法，并举例

  • 默认情况下，元素的宽度与高度计算方式如下：
    width(宽) + padding(内边距) + border(边框) = 元素实际宽度
    height(高) + padding(内边距) + border(边框) = 元素实际高度

  • 在盒子内无内容时，这么计算是没有问题的，但是当盒子内的padding值改变时，盒子的大小也跟着改变了。

实例演示

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <style>
  6.     .box {
  7.       /* 元素的宽度 */
  8.       width: 100px;
  9.       /* 元素的高度 */
  10.       height: 100px;
  11.     }
  12.     .box-1 {
  13.       /* 内边距 */
  14.       padding: 5px;
  15.       /* 背景色 */
  16.       background-color: #f29b76;
  17.       /* 边框 */
  18.       border: 1px solid #000;
  19.       /* 规定背景的绘制区域： */
  20.       /* border-box    背景被裁剪到边框盒。 */
  21.       /* padding-box    背景被裁剪到内边距框。 */
  22.       /* content-box    背景被裁剪到内容框。 */
  23.       background-clip: content-box;
  24.       /* 设置下外边距 */
  25.       margin-bottom: 5px;
  26.     }
  27.     .box-2 {
  28.       /* 内边距 */
  29.       padding: 5px;
  30.       /* 背景色 */
  31.       background-color: #00a1e9;
  32.       /* 边框 */
  33.       border: 1px solid #000;
  34.       /* 将边框包含在内容区的宽和高 */
  35.       box-sizing: border-box;
  36.       margin-bottom: 10px;
  37.     }
  38.   </style>
  39.   <title>盒模型常用属性</title>
  40. </head>
  41. <body>
  42.   <div class="box box-1"></div>
  43.   <div class="box box-2"></div>
  44. </body>
  45. </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.     <button class="btn samll">按钮1</button>
  13.     <button class="btn middle">按钮2</button>
  14.     <button class="btn large">按钮3</button>
  15. </body>
  17. <style> 
  18.     html {
  19.         font-size: 10px;
  20.     }
  22.     .btn {
  23.         background-color: seagreen;
  24.         color: white;
  25.         border: none;
  26.         outline: none;
  27.     }
  29.     .btn:hover {
  30.         cursor: pointer;
  31.         opacity: 0.8;
  32.         transition: 0.3s;
  33.         padding: 0.4rem 0.8rem;
  34.     }
  36.     .btn.small {
  37.         font-size: 1.2rem;
  38.     }
  40.     .btn.middle {
  41.         font-size: 1.6rem;
  42.     }
  44.     .btn.large {
  45.         font-size: 1.8rem;
  46.     }
  48.     @media (max-width: 374px) {
  49.         html {
  50.     font-size: 12px;
  51.     background-color: #F20E11;
  52.         }
  53.     }
  55.     @media (min-width: 375px) and (max-width: 413px) {
  56.         html {
  57.             font-size: 14px;
  58.             background-color: #00a1e9;
  59.         }
  60.     }
  62.     @media (min-width: 414px) {
  63.         html {
  64.             font-size: 16px;
  65.             background-color: #21e900;
  66.         }
  67.     }
  68. </style>
  70. </html>

3. 实例演示em,rem用法,并说出之间差别

  • em的值并不是固定的,会继承父级元素的字体大小.
  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.     <div>
  13.         <span>你好！</span>
  14.     </div>
  16.     <style>
  17.         html {
  18.             font-size: 6px;
  19.             /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */
  20.             /* 因为一个页面,只有一个根元素, html  */
  21.             /* 1rem = 6px */
  22.         }
  24.         div {
  25.             font-size: 3rem;
  26.         }
  28.         div span {
  29.             /* 4rem = 4*6=24px */
  30.             font-size: 4em;
  31.         }
  32.     </style>
  33. </body>
  35. </html>
  • rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

  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.     <div>
  13.         <span>你好！</span>
  14.     </div>
  16.     <style>
  17.         html {
  18.             font-size: 6px;
  19.             /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */
  20.             /* 因为一个页面,只有一个根元素, html  */
  21.             /* 1rem = 6px */
  22.         }
  24.         div span {
  25.             /* 4rem = 4*6=24px */
  26.             font-size: 4rem;
  27.         }
  28.     </style>
  29. </body>
  31. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post