search

博客列表 >定位及其flex

定位及其flex

手机用户1620888567
手机用户1620888567原创
2023年02月10日 07:51:03419浏览

一、定位 position: relative/absolute

1、position: relative是相对自己原来位置
2、position: relative是相对父标签位置，父标签必须是非staic状态才能起作用,父一般设置为relative 这个不输入坐标是不会产生变化。
例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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. </head>
  9. <body>
  10.     <div class="bg" >
  11.     S=a
  12.     <span class="p">2</span >
  15.        <button class="g">关闭</button>
  16.     </div>
  21.     <style>
  22.         /* 初始化 */
  23.         * {
  24.           margin: 0;
  25.           padding: 0;
  26.           box-sizing: border-box;
  27.         }
  28.         body {
  29.           border: 0px ;
  31.         }
  32.         div {
  33.             margin:0px auto; 
  35.             position: relative;
  37.         }
  39.         .bg {  
  40.              background:yellow ;
  41.              width: 200px;
  42.              height: 200px; 
  43.              text-align: center; 
  44.             line-height: 200px;
  47.             }
  48. /*这个是以父标签div为参考点，所以用absolute，并且需要设置父标签为relative这个种不设置定位坐标不会产生变化，能保持父标签维持原样*/
  49.             .g {  
  51.                 position: absolute;
  52.                 top: 0px;
  53.                 left: 0px;
  55.             }
  56. /*这个相对自己原来位置所以用relative*/
  57.             .p{  
  59.      position: relative;
  60.      top: -5px;
  63.  }
  69.       </style>
  71. </body>
  72. </html>

效果图如下：

二、flex布局 也称为“弹性布局”，只能横排，或者竖排属于一维度布局

1、flex弹性布局优缺点

●操作方便,布局极为简单,移动端应用很广泛
●PC端浏览器支持情况较差
●IE 11或更低版本,不支持或仅部分支持

2、建议:

1.如果是PC端页面布局,我们还是传统布局。
2.如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局

3、注意事项及其名称

●当我们为父盒子设为 flex布局以后,子元素的float. clear 和vertical align属性将失效。
●伸缩布局 =弹性布局=伸缩盒布局=弹性盒布局=flex布局
●采用Flex布局的元素,称为Flex容器( flex container) , 简称”容器”。它的所有子元素自动成为容
器成员,称为Flex项目( flex item) ,简称”项目”。

4、flex原理

●总结flex布局原理:
就是通过给父盒子添加flex属性,来控制子盒
子的位置和排列方式

5、flex布局父项常见属性及其使用

以下由6个属性是对父元素设置的
●flex-direction :设置主轴的方向
●justify-content :设置主轴上的子元素排列方式
●flex-wrap: 设置子元素是否换行
●align-content :设置侧轴上的子元素的排列方式(多行)
●align-items :设置侧轴上的子元素排列方式(单行)
●flex- flow :复合属性,相当于同时设置了flex-direction和flex -wrap

5.1、flex-direction



div {
/给父级添加flex属性/
display: flex;
width: 800px;
height: 300px ;
background-color: pink ;
/默认的主轴是x轴行row可以通过上表进行调整，下面默认可以省略/
flex-direction: row ;
}

5.2、justify-content

  1. <!DOCTYPE html>
  2. <html lang="en">
  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. </head>
  9. <body>
  10.     <style>
  12. div {
  13. display: flex;
  14. width: 800px;
  15. height: 300px;
  16. background-color:rgb(0, 0, 255);
  17. /*默认的主轴是x轴row */
  18. flex-direction: row ;
  19. /* justify-content: 是设置主轴上子元素的排列方式
  20. /* justify-content: flex-start; */
  21. /* justify- content: flex-end; */
  22. /*让我们子元素居中对齐*/
  23. /* justify- content: center; */
  24. /*平分剩余空间*/
  25. /* justify-content: space-around; */
  26. /* 先两边贴边， 在分配剩余的空间*/
  27. justify-content: space-between;
  28. }
  29. div span {
  30. width: 150px;
  31. height: 100px ;
  32. background-color: green;
  33. }
  34.     </style>
  36.     <div>
  37.    <span>1</span>
  38.    <span>2</span>
  39.    <span>3</span>
  40.    <span>2</span>
  43.     </div>
  47. </body>
  48. </html>

5.3、flex-wrap

  1. <!DOCTYPE html>
  2. <html lang="en">
  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. </head>
  9. <body>
  10.     <style>
  12. div {
  13. display: flex;
  14. width: 800px;
  15. height: 300px;
  16. background-color:rgb(0, 0, 255);
  17. /*默认的主轴是x轴row */
  18. flex-direction: row ;
  19. justify-content: space-between;
  21. /* flex布局中， 默认的子元素是不换行的， 如果装不开，会缩小子元素的宽度，放到父元素里面
  22. */
  23. /* flex-wrap: nowrap; */
  24. flex-wrap: wrap ;
  26. }
  27. div span {
  28. width: 150px;
  29. height: 100px ;
  30. background-color: green;
  31. }
  32.     </style>
  34.     <div>
  35.    <span>1</span>
  36.    <span>2</span>
  37.    <span>3</span>
  38.    <span>2</span>
  39.    <span>3</span>
  40.    <span>2</span>
  41.    <span>3</span>
  42.    <span>2</span>
  44.     </div>
  48. </body>
  49. </html>

5.4、align-items

实现主轴侧轴都居中
![]

  1. <!DOCTYPE html>
  2. <html lang="en">
  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. </head>
  9. <body>
  10.     <style>
  12. div {
  13. display: flex;
  14. width: 800px;
  15. height: 300px;
  16. background-color:rgb(0, 0, 255);
  17. /*默认的主轴是X轴row
  18. */
  19. justify-content: center;
  20. /*我们需要一个侧轴居中*/
  22. align-items: center;
  24. }
  25. div span {
  26. width: 150px;
  27. height: 100px ;
  28. background-color: green;
  29. }
  30.     </style>
  32.     <div>
  33.    <span>1</span>
  34.    <span>2</span>
  35.    <span>3</span>
  38.     </div>
  42. </body>
  43. </html>

5.5、align-content 多行

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行) , 在单行下是没有效果的。

  1. <!DOCTYPE html>
  2. <html lang="en">
  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. </head>
  9. <body>
  10.     <style>
  12. div {
  13. display: flex;
  14. width: 800px;
  15. height: 300px;
  16. background-color:rgb(0, 0, 255);
  17. /*默认的主轴是X轴row
  18. */
  19. flex-wrap: wrap;
  20. justify-content: center;
  21. /*我们需要一个侧轴居中*/
  23. align-items: center;
  24. align-content: space-around;
  26. }
  27. div span {
  28. width: 150px;
  29. height: 100px ;
  30. background-color: green;
  31. }
  32.     </style>
  34.     <div>
  35.    <span>1</span>
  36.    <span>2</span>
  37.    <span>3</span>
  38.    <span>1</span>
  39.    <span>2</span>
  40.    <span>3</span>
  41.    <span>1</span>
  42.    <span>2</span>
  43.    <span>3</span>
  45.     </div>
  49. </body>
  50. </html>

5.6、flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性
上

6、flex布局子项常见属性

flex布局子项常见属性
●flex子项目占的份数
●align-self 控制子项自2在侧轴的排列方试
●order属性定 义子项的排列顺序(前后顺序)

6.1、flex属性

flex属性定义好项目分配剩余空间,用flex来表示占多少份数。

  1. <!DOCTYPE html>
  2. <html lang="en">
  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. </head>
  10. <style>
  11.     section {
  12.         display: flex;
  14. width:60%;
  15. height:150px;
  16. background-color:red;
  17. margin: 0 auto;
  22.     }
  23. section div:nth-child(1) { 
  24.     width: 100px;
  25.     height: 150px;
  26.     background-color:red;
  27.     }
  28.     section div:nth-child(2) {
  29.     flex:1;
  30.     background-color:green;
  31.     }
  32.     section div:nth-child(3) {
  33.     width: 100px;
  34.     height:150px;
  35.     background-color:blue;
  36.     }
  37.     </style>
  38. <body>
  39.     <section>
  40.         <div></div>
  41.         <div></div>
  42.         <div></div>
  43.     </section> 
  45. <p>
  47. </p>
  48. </body>
  49. </html>

6.2、align-self 控制子项自2在侧轴的排列方试

可以控制单独一个项目侧轴,原来的都是一起控制的

  1. <!DOCTYPE html>
  2. <html lang="en">
  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. </head>
  10. <style>
  11.     section {
  12.         display: flex;
  14. width:60%;
  15. height:150px;
  16. background-color:red;
  17. margin: 0 auto;
  22.     }
  23. section div:nth-child(1) { 
  24.     width: 100px;
  25.     height: 50px;
  26.     background-color:yellow;
  27.     }
  28.     section div:nth-child(2) {
  29.     flex:1;
  30.     background-color:green;
  31.     height:50px;
  32.     }
  33.     section div:nth-child(3) {
  34.     width: 100px;
  35.     height:50px;
  36.     background-color:blue;
  37.     align-self: flex-end;
  38.     }
  39.     </style>
  40. <body>
  41.     <section>
  42.         <div></div>
  43.         <div></div>
  44.         <div></div>
  45.     </section> 
  47. <p>
  49. </p>
  50. </body>
  51. </html>

6.2、order默认是0越小越靠前

  2. <!DOCTYPE html>
  3. <html lang="en">
  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>Document</title>
  9. </head>
  11. <style>
  12.     section {
  13.         display: flex;
  15. width:60%;
  16. height:150px;
  17. background-color:red;
  18. margin: 0 auto;
  23.     }
  24. section div:nth-child(1) { 
  25.     width: 100px;
  26.     height: 50px;
  27.     background-color:yellow;
  28.     order: 3;
  29.     }
  30.     section div:nth-child(2) {
  31.     flex:1;
  32.     background-color:green;
  33.     height:50px;
  34.     order: -1;
  35.     }
  36.     section div:nth-child(3) {
  37.     width: 100px;
  38.     height:50px;
  39.     background-color:blue;
  40.     align-self: flex-end;
  41.     }
  42.     </style>
  43. <body>
  44.     <section>
  45.         <div></div>
  46.         <div></div>
  47.         <div></div>
  48.     </section> 
  50. <p>
  52. </p>
  53. </body>
  54. </html>
上一条：表格的概念与实践下一条：初识选择器权重、盒模型、字体单位、视口单位
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议