Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型常用属性+媒体查询
Blogger Information
Blog 10
fans 0
comment 0
visits 5476
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
盒模型常用属性+媒体查询
土老帽
Original
417 people have browsed it

盒模型常用属性

1.盒模型常用属性

属性 定义
width 宽度
height 高度
background-color 背景颜色
border 边框
padding 内边距
background-clip 背景的绘制区域
box-sizing 允许您以特定的方式定义匹配某个区域的特定元素
margin 外边距

2.盒模型写法

  1. .box {
  2.         /* 宽度200px */
  3.         width: 200px;
  4.         /* 高度200px */
  5.         height: 200px;
  6.         /* 背景颜色 */
  7.         background-color: red;
  8.         /* 边框 */
  9.         border: 10px solid black;
  10.         /* 内边距 */
  11.         padding: 20px;
  12.         /* 背景被裁剪到内容框 */
  13.         background-clip: content-box;
  14.       }

3.padding写法

  1. .box {
  2.         /* 四值:完整语法, 上右下左,顺时针方向 */
  3.         /* 上内边距是5px,右内边距是10px,下内边距是15px,左内边距是20px */
  4.         padding: 5px 10px 15px 20px;        
  5.         /* 三值语法: 左右相等,而上下不等 */
  6.         padding: 5px 20px 15px;
  7.         /* 双值语法: 左右相同,上下也相同,但并不是同一个值*/
  8.         padding: 15px 20px 15px 20px;
  9.         padding: 15px 20px;
  10.         /* 三值与双值的记忆方法: 第二个位置的值一定表示的是左右  */
  11.         /* 单值: 四个方向全相同 */
  12.         padding: 20px;
  13.       }

4.padding,margin类似,但又有显著的不同, 因为padding边框是可见的

  1.           .box {
  2.         /* 右边框宽度 */
  3.         border-right-width: 10px;
  4.         /* 右边框样式 实线*/
  5.         border-right-style: solid;
  6.         /* 右边框颜色 */
  7.         border-right-color: blue;
  9.         /* 右边框宽度，边框样式，边框颜色简写 */
  10.         border-right: 10px solid blue;
  11.         /* 左边框宽度，边框样式，边框颜色简写 */
  12.         border-left: 10px solid blue;
  13.         /* 上边框宽度，边框样式，边框颜色简写 */
  14.         border-top: 10px solid blue;
  15.         /* 下边框宽度，边框样式，边框颜色简写 */
  16.         border-bottom: 10px solid blue;
  18.         /* 上下左右边框样式，实线，边框颜色简写 */
  19.         border: 10px solid blue;
  20.         /* 上下左右边框样式，虚线，边框颜色简写 */
  21.         border: 10px dashed blue;
  22.       }
  1. .box {
  2.         margin: 20px;
  3.       }
  5.       .box:last-of-type {
  6.         background-color: red;
  7.         margin-top: 50px;
  8.         /* margin会在垂直方向出现折叠,谁大用谁的 */
  9.       }

5.总结

1.页面中所有元素,都是一个矩形块
2.矩形块在一个二维平面中,只有”垂直”,”水平”二种排列方式
3.与这种排列方式对应的,就只有二种元素类型: 块元素, 行内元素
4.div:块元素，就算后面有空间，其它元素也必须在第二行显示

6.布局原则

1.布局前提: 是在一个”宽度受限,而高度无限的空间内”
2.布局时,必须将width,height其中一个限制死,否则无法完成布局
3.根据人类的观看习惯, 通常是将宽度限制,而高度随内容舒展

媒体查询

示例：

  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>

rem与rm的区别

示例

  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>
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