欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

媒体查询、定位与定位元素、flex与模态框

程序员文章站 2022-03-24 09:15:25
...

媒体查询

@media 查询当前视口宽度

  1. <div class="box">
  2. <p>
  3. <label for="user">用户名:</label
  4. ><input type="text" name="user" placeholder="user@email.com" />
  5. </p>
  6. <p>
  7. <label for="password">密 码:</label
  8. ><input type="password" name="password" placeholder="请输入密码" />
  9. </p>
  10. <p>
  11. <button>登录</button>
  12. </p>
  13. </div>
  14. <style>
  15. html {
  16. font-size: 16px;
  17. }
  18. * {
  19. box-sizing: border-box;
  20. }
  21. .box {
  22. text-align: center;
  23. }
  24. button:hover {
  25. background-color: lightcoral;
  26. color: lightcyan;
  27. /* 透明度 */
  28. opacity: 0.8;
  29. /* 动画时间 */
  30. transition: 0.3s;
  31. }
  32. label {
  33. font-size: 0.5rem;
  34. }
  35. input {
  36. width: 5rem;
  37. height: 1rem;
  38. }
  39. button {
  40. width: 3rem;
  41. font-size: 0.5rem;
  42. }
  43. /* @media 查询当前视口宽度。根据视口宽度调整字体大小,进而控制元素大小。 */
  44. /* 视口宽 <= 2560px */
  45. @media (min-width: 2560px) {
  46. html {
  47. font-size: 80px;
  48. }
  49. }
  50. /* 1024px <= 视口宽 <= 2559px */
  51. @media (min-width: 1024px) and (max-width: 2559px) {
  52. html {
  53. font-size: 30px;
  54. }
  55. }
  56. /* 768px <= 视口宽 <= 1023px */
  57. @media (min-width: 768px) and (max-width: 1023px) {
  58. html {
  59. font-size: 20px;
  60. }
  61. }
  62. /* 视口宽 <= 767px */
  63. @media (max-width: 767px) {
  64. html {
  65. font-size: 16px;
  66. }
  67. }
  68. </style>

定位与定位元素

position: static(默认)、 relative、absolute、fixed

  1. <div class="box">
  2. <p>父框架</p>
  3. <div class="child child1">相对定位</div>
  4. <div class="child child2">绝对定位</div>
  5. <div class="child child3">固定定位</div>
  6. </div>
  7. <style>
  8. * {
  9. padding: 0;
  10. margin: 0;
  11. box-sizing: border-box;
  12. }
  13. div {
  14. border: 1px solid black;
  15. }
  16. .box {
  17. width: 500px;
  18. height: 100rem;
  19. margin: 0 auto;
  20. }
  21. .child {
  22. width: 100px;
  23. height: 100px;
  24. color: yellow;
  25. }
  26. .child.child1 {
  27. background-color: blueviolet;
  28. }
  29. .child.child2 {
  30. background-color: burlywood;
  31. }
  32. /* fixed : 固定定位
  33. 固定定位: 是绝对定位的子集, 只不过他的定位包含块是固定的,永远是body */
  34. .child.child3 {
  35. background-color: darkgoldenrod;
  36. position: fixed;
  37. top: 70vh;
  38. left: 70vw;
  39. }
  40. /* relative : 相对定位
  41. 相对定位元素仍然在文档流中,所占空间不释放,只有相对原位置进行了偏移 */
  42. .child.child1 {
  43. position: relative;
  44. top: 30px;
  45. left: 40px;
  46. }
  47. /* absolute:绝对定位 */
  48. /* 绝对定位, 不再相对于自身, 而是相对于它的包含块 */
  49. /* 而能充当绝对定位包含块的元素, 必须是"定位元素" */
  50. /* 定位元素: position 不能是 static 就可以了 */
  51. /* 如果绝对定位元素, 一直向上,找不到可定位的父级元素,就相对于body */
  52. .child.child2 {
  53. position: absolute;
  54. top: 10px;
  55. right: 100px;
  56. }
  57. </style>

图示:
媒体查询、定位与定位元素、flex与模态框


flex与模态框

  1. <div class="top">
  2. <span>模态框</span>
  3. <button onclick="document.querySelector('.model').style.display='block'">
  4. 登录
  5. </button>
  6. </div>
  7. <div class="model">
  8. <div class="login" onclick="this.parentNode.style.display='none'"></div>
  9. <form action="" class="loginForm">
  10. <fieldset class="loginfieldset">
  11. <legend>用户登录</legend>
  12. <label for="user">用户名: </label
  13. ><input type="email" name="user" placeholder="user@mail.com" />
  14. <label for="password">密码: </label
  15. ><input type="password" name="password" placeholder="请输入密码" />
  16. <button class="dl">登录</button>
  17. </fieldset>
  18. </form>
  19. </div>
  20. <style>
  21. /* flex 布局 */
  22. /* 用在容器中的属性 */
  23. /* flex-direction: row; */
  24. /* flex-direction: column; */
  25. /* flex-wrap: wrap; */
  26. /* 1. 主轴方向,是否换行? */
  27. /* flex-flow: row wrap; */
  28. /* 2. place-content: 容器中的剩余空间在项目之间进行分配 */
  29. /* place-content: start;
  30. place-content: end;
  31. place-content: center; */
  32. /* 二端对齐 */
  33. /* place-content: space-between; */
  34. /* 分散对齐 */
  35. /* place-content: space-around; */
  36. /* 平均对齐 */
  37. /* place-content: space-evenly; */
  38. /* 3. 项目在交叉轴上的对齐 */
  39. /* place-items: stretch;
  40. place-items: start;
  41. place-items: end;
  42. place-items: center; */
  43. /* flex容器上只需要记住三个属性就可以了 */
  44. /* 1. flex-flow: 主轴方向, 换行 */
  45. /* 2. place-content: 项目在主轴上的排列与空间分配 */
  46. /* 2. place-items: 项目在交叉轴上的对齐方式 */
  47. .top {
  48. padding: 1em;
  49. display: flex;
  50. flex-flow: row nowrap;
  51. height: 2em;
  52. border: 1px solid black;
  53. background-color: burlywood;
  54. place-content: space-between;
  55. place-items: stretch;
  56. }
  57. .dl {
  58. margin: 20px;
  59. border-radius: 0.5em;
  60. }
  61. .model {
  62. display: none;
  63. }
  64. .login {
  65. position: fixed;
  66. top: 0;
  67. left: 0;
  68. right: 0;
  69. bottom: 0;
  70. background-color: rgb(0, 0, 0, 0.5);
  71. }
  72. .loginForm {
  73. position: fixed;
  74. top: 40vh;
  75. left: 40vw;
  76. }
  77. .loginfieldset {
  78. display: grid;
  79. background-color: white;
  80. }
  81. legend {
  82. background-color: tomato;
  83. color: white;
  84. }
  85. </style>

图示:
媒体查询、定位与定位元素、flex与模态框