媒体查询

  • 什么是媒体？
    1.屏幕，打印机，等等等等这些外接设备都称为媒体
    2.查询顾名思义可以理解为根据这些设备的一些类型进行相应的元素设置
  • 代码案例
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>Document</title>
  8.     <style>
  9.       /* 这里是全局设置，padding内边距0，margin外边距0，并且设置盒子的大小只由width宽和height高决定 */
  10.       * {
  11.         padding: 0;
  12.         margin: 0;
  13.         box-sizing: border-box;
  14.       }
  15.       /* 这里设置html根元素字号的大小 */
  16.       html {
  17.         font-size: 10px;
  18.       }
  19.       /* 这里我们给class名为btn的button元素添加一些样式 */
  20.       button.btn {
  21.         /* 背景色:红色 */
  22.         background-color: red;
  23.         /* 按钮文本颜色:白色 */
  24.         color: white;
  25.         /* 边框:无 */
  26.         border: none;
  27.         /* 轮廓线:无 */
  28.         outline: none;
  29.       }
  30.       /* 这里我们给按钮添加些鼠标移动上去后的一些效果 */
  31.       .btn:hover {
  32.         /* 光标:小手 */
  33.         cursor: pointer;
  34.         /* 透明度:50% */
  35.         opacity: 0.5;
  36.         /* 延迟0.3秒 */
  37.         transition: 0.3s;
  38.         /* 内边框左右0.4rem 上下0.8rem */
  39.         padding: 0.4rem 0.8rem;
  40.       }
  41.       /* 小按钮的字号大小=1.2*html根元素字号的大小 */
  42.       .btn.small {
  43.         font-size: 1.2rem;
  44.       }
  45.       /* 中按钮的字号大小=1.6*html根元素字号的大小 */
  46.       .btn.middle {
  47.         font-size: 1.6rem;
  48.       }
  49.       /* 大按钮的字号大小=2*html根元素字号的大小 */
  50.       .btn.large {
  51.         font-size: 2rem;
  52.       }
  53.       /* 这里是使用媒体查询电脑屏幕的适配，宽度为1025以上的是电脑屏，屏幕大字号就大 */
  54.       @media (min-width: 1025px) {
  55.         /* 这里是通过改变html根元素的字号来调整按钮的字号大小从而实现在不同的屏幕宽度下按钮的大小不一样 */
  56.         html {
  57.           /* 调整html根元素字号大小 */
  58.           font-size: 12px;
  59.         }
  60.       }
  61.       /* 这里是使用媒体查询平板电脑的适配区间，屏幕宽度小字号就小点 */
  62.       @media only screen and (min-width: 800px) and (max-width: 1024px) {
  63.         /* 这里是通过改变html根元素的字号来调整按钮的字号大小从而实现在不同的屏幕宽度下按钮的大小不一样 */
  64.         html {
  65.           /* 调整html根元素字号大小 */
  66.           font-size: 10px;
  67.         }
  68.       }
  69.       /* 这里是使用媒体查询手机适配，屏幕宽度小于799时字号就小点 */
  70.       @media only screen and (max-width: 799px) {
  71.         /* 这里是通过改变html根元素的字号来调整按钮的字号大小从而实现在不同的屏幕宽度下按钮的大小不一样 */
  72.         html {
  73.           /* 调整html根元素字号大小 */
  74.           font-size: 8px;
  75.         }
  76.       }
  77.     </style>
  78.   </head>
  79.   <body>
  80.     <button class="btn small">提交1</button>
  81.     <button class="btn middle">提交2</button>
  82.     <button class="btn large">提交3</button>
  83.   </body>
  84. </html>

元素定位

  • 定位类型

    1.相对定位：position:relative相对自身在文档流中偏移

    2.绝对定位：position:absolute相当于他的包含快偏移，不在文档流中
    3.固定定位：position:fixed绝对定位的一个子集，只不过它的包含块是固定的，永远是body

  • 实例代码演示

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <style>
  9.       /* 初始化 */
  10.       * {
  11.         /* 内边距：0 */
  12.         padding: 0;
  13.         /* 外边距：0 */
  14.         margin: 0;
  15.         /* 设置盒子大小只由宽高决定 */
  16.         box-sizing: border-box;
  17.       }
  18.       /* 顶部样式 */
  19.       .header {
  20.         padding: 0.5em 1em;
  21.         background-color: blue;
  22.         display: flex;
  23.       }
  24.       .header > .title {
  25.         font-weight: lighter;
  26.         font-style: italic;
  27.         color: red;
  28.         text-shadow: 10px 10px 10px green;
  29.       }
  30.       .header button {
  31.         margin-left: auto;
  32.         background-color: hotpink;
  33.         width: 5em;
  34.         border: none;
  35.         border-radius: 0.5em;
  36.       }
  37.       .header button:hover {
  38.         cursor: pointer;
  39.         background-color: green;
  40.         color: wheat;
  41.         box-shadow: 0 0 8px red;
  42.         transition: 0.3s;
  43.       }
  44.       fieldset {
  45.         padding: 0.8em 0.5em 1.2em;
  46.         border: 1px dashed red;
  47.       }
  48.       /* 模态框 */
  49.       /* 登陆表单 */
  50.       .modal > .modal-form > fieldset > legend {
  51.         padding: 5px 1em;
  52.         background-color: red;
  53.         color: wheat;
  54.       }
  55.       .modal > .modal-form {
  56.         position: fixed;
  57.         top: 10em;
  58.         left: 20em;
  59.         right: 20em;
  60.       }
  61.       /* 半透明罩 */
  62.       .modal > .modal-bg {
  63.         position: fixed;
  64.         top: 0px;
  65.         right: 0px;
  66.         bottom: 0px;
  67.         left: 0px;
  68.         background-color: rgba(0, 0, 0, 0.7);
  69.       }
  70.     </style>
  71.   </head>
  72.   <body>
  73.     <div class="header">
  74.       <h3 class="title">小夫的个人博客</h3>
  75.       <button onclick="document.querySelector('.modal').style.display='block'">
  76.         login
  77.       </button>
  78.     </div>
  79.     <div class="modal">
  80.       <!-- 1.透明罩 -->
  81.       <div
  82.         class="modal-bg"
  83.         onclick="this.parentNode.style.display='none'"
  84.       ></div>
  85.       <form action="" class="modal-form">
  86.         <fieldset>
  87.           <legend>user login:</legend>
  88.           <label for="username">username:</label>
  89.           <input
  90.             type="text"
  91.             id="username"
  92.             name="username"
  93.             value=""
  94.             placeholder="please input passwprd"
  95.           />
  96.           <label for="password">password:</label>
  97.           <input
  98.             type="password"
  99.             id="password"
  100.             name="password"
  101.             value=""
  102.             placeholder="please input password"
  103.           />
  104.           <button>login</button>
  105.         </fieldset>
  106.       </form>
  107.     </div>
  108.   </body>
  109. </html>

flex

  • 什么是 flex？
序号种类定义
1弹性容器拥有 display:flex/display:inline-flex 属性，使用 flex 弹性布局的区块
2弹性项目弹性容器中的子元素
3主轴弹性项目排列时参考的轴线有水平和垂直两种
4交叉轴与主轴垂直的布局参考线

  • 弹性容器的语法

    1.flex 布局术语，容器主轴属性

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>flex布局术语，容器主轴属性</title>
  8.     <style>
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       /* flex容器 */
  15.       .container {
  16.         display: flex;
  17.         height: 20em;
  18.         border: 1px solid red;
  19.         /* 控制flex容器内项目：主轴方向：水平 允许换行：否 */
  20.         flex-flow: row nowrap;
  21.         /* 控制flex容器内项目：主轴方向：水平 允许换行：是 */
  22.         flex-flow: row wrap;
  23.         /* 控制flex容器内项目：主轴方向：垂直 允许换行：否 */
  24.         flex-flow: column nowrap;
  25.         /* 控制flex容器内项目：主轴方向：垂直 允许换行：是 */
  26.         /* 控制flex容器内项目：主轴方向：水平 允许换行：否 */
  27.         flex-flow: column wrap;
  28.         /* 这里如果我们设置成了可以换行的话项目的高度就不会等于容器的高度了，而是会由项目自身内的内容撑开 */
  29.         flex-flow: row wrap;
  30.         /* 起始对齐：把项目放在起始位置，项目剩余空间在右边 */
  31.         place-content: start;
  32.         /* 结尾对齐：把项目放在结束位置，剩余空间在左边 */
  33.         place-content: end;
  34.         /* 居中对齐：把项目放在start和end中间剩余空间分配在项目左右 */
  35.         place-content: center;
  36.         /* 两端对齐：把第一个项目和最后一个项目分别放在起始位置和结束位置，剩余空间围绕着容器里其他项目进行分配 */
  37.         place-content: space-between;
  38.         /* 分散对齐：把每个项目分散开对齐，每个项目左右的剩余空间相等 */
  39.         place-content: space-around;
  40.         /* 平均对齐：把项目平均分布在在起始位置和结束位置之间 */
  41.         place-content: space-evenly;
  42.       }
  43.       /* flex下的子元素（项目） */
  44.       .container > .item {
  45.         width: 10em;
  46.         height: 20em;
  47.         padding: 1em;
  48.         background-color: seagreen;
  49.         border: 1px solid blue;
  50.       }
  51.     </style>
  52.   </head>
  53.   <body>
  54.     <div class="container">
  55.       <div class="item">item1</div>
  56.       <div class="item">item2</div>
  57.       <div class="item">item3</div>
  58.       <!-- <div class="item">item4</div> -->
  59.     </div>
  60.   </body>
  61. </html>

2.flex 容器交叉轴属性

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>flex容器交叉轴属性</title>
  8.     <style>
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       /* flex容器 */
  15.       .container {
  16.         display: flex;
  17.         height: 20em;
  18.         border: 1px solid red;
  19.         flex-flow: row wrap;
  20.         /* 交叉轴默认值 */
  21.         place-items: stretch;
  22.         /* 靠近交叉轴起始边 */
  23.         place-items: start;
  24.         /* 靠近交叉轴末尾边 */
  25.         place-items: end;
  26.         /* 在交叉轴中间 */
  27.         place-items: center;
  28.       }
  29.       /* flex下的子元素（项目） */
  30.       .container > .item {
  31.         min-width: 10em;
  32.         /* height: 20em; */
  33.         padding: 1em;
  34.         background-color: seagreen;
  35.         border: 1px solid blue;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <div class="container">
  41.       <div class="item">item1</div>
  42.       <div class="item">item2</div>
  43.       <div class="item">item3</div>
  44.       <!-- <div class="item">item4</div> -->
  45.     </div>
  46.   </body>
  47. </html>

3.flex 项目属性

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>flex项目属性</title>
  8.     <style>
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       /* flex容器 */
  15.       .container {
  16.         display: flex;
  17.         height: 20em;
  18.         border: 1px solid red;
  19.       }
  20.       /* flex下的子元素（项目） */
  21.       .container > .item {
  22.         /* min-width: 10em; */
  23.         /* height: 20em; */
  24.         padding: 1em;
  25.         background-color: seagreen;
  26.         border: 1px solid blue;
  27.         /* flex:1.放大因子 2.收缩因子 3.计算宽度 */
  28.         flex: 0 1 10em;
  29.       }
  30.       .item:nth-of-type(1) {
  31.         background-color: yellow;
  32.         /* 序号：越小越高前 */
  33.         order: 1;
  34.       }
  35.       .item:nth-of-type(2) {
  36.         /* 序号：越小越高前 */
  37.         order: 2;
  38.       }
  39.       .item:nth-of-type(3) {
  40.         background-color: blue;
  41.         /* 序号：越小越高前 */
  42.         order: 3;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <div class="container">
  48.       <div class="item">item1</div>
  49.       <div class="item">item2</div>
  50.       <div class="item">item3</div>
  51.       <!-- <div class="item">item4</div> -->
  52.     </div>
  53.   </body>
  54. </html>

更多相关文章

  1. 在Android上调用OpenCV 2.4.10库函数
  2. 转-Android(安卓)Studio *.jar 与 *.aar 的生成与*.aar导入项目
  3. 从零开始的 Android(安卓)新项目 - 收藏集 - 掘金
  4. 〖Android〗Android(安卓)App项目资源字符串检查（检查是否缺少对
  5. Android周末 第一周-图灵聊天对话机器人小项目
  6. Android(安卓)Studio项目中使用 AndroidX支持库的相关配置说明
  7. Mysql触发器在PHP项目中用来做信息备份、恢复和清空
  8. Android二维码扫描：基于barcodescanner
  9. Mysql数据库从5.6.28版本升到8.0.11版本部署项目时遇到的问题及

随机推荐

  1. Linux服务器下日志截取
  2. Linux多线程——异步
  3. 来给你20个优秀的......前端轮播图插件
  4. android clipToPadding的一点理解
  5. linux c++ 多线程心得
  6. 漂亮的LinuxC注释转换器--(2.2)目录级联
  7. 如何用linux手机打电话给linux？
  8. Linux软件管理-YUM
  9. SUSE12SP3-Mycat(3)Server.xml配置详解
  10. UNIX-LINUX编程实践教程->第八章->实例代