search

博客列表 >盒模型常用属性+媒体查询

盒模型常用属性+媒体查询

土老帽
土老帽原创
2022年03月25日 13:11:47419浏览

盒模型常用属性

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>
上一条：你可能需要知道的API接口文档神器下一条：WordPress网站访问慢解决方案细图文教程
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议