简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 绝对定位与固定定位和flex必会的容器与项目属性
Blogger Information
Blog 16
fans 0
comment 1
visits 5755
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
绝对定位与固定定位和flex必会的容器与项目属性
P粉890456325
Original
276 people have browsed it

1. 实例演示绝对定位与固定定位,并描述联系与区别 2. 实例演示flex必会的容器与项目属性

绝对定位

绝对: position: absolute, 相对距离最近的定位元素发生偏移

宽度自动收缩到内容宽度, 释放所占空间,后面顶上去,但是还在父容器中
li 定位元素
li ul 不是定位元素
li ul body 非定位
html 非定位
所有祖先都不是可定位元素,没有参考物了,就得找一个默认的,视口或html 

  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.   </head>
  9.   <body>
  10.     <ul>
  11.       <li class="relative">item1</li>
  12.       <li class="absolute">item2</li>
  13.       <!-- <li style="background: green">item3</li> -->
  14.     </ul>
  15.     <style>
  16.       /* 初始化 */
  17.       * {
  18.         margin: 0;
  19.         padding: 0;
  20.         box-sizing: border-box;
  21.       }
  22.       body {
  23.         border: 5px solid red;
  24.       }
  25.       /* 基本样式 */
  26.       ul {
  27.         width: 400px;
  28.         height: 400px;
  29.         border: 5px solid blue;
  30.       }
  31.       ul li {
  32.         height: 30px;
  33.         border: 1px solid #000;
  34.         list-style: none;
  35.       }
  36.       ul li:first-child {
  37.         background-color: yellow;
  38.       }
  39.       ul li:first-child + * {
  40.         background-color: lightgreen;
  41.       }
  43.       /* 相对定位 */
  44.       ul li.relative {
  45.         /* 转为"可定位元素"  */
  46.         position: relative;
  47.         top: 10px;
  48.         left: 10px;
  49.         /* item2没有向上偏移,说明 item1 还在文档流中,所占空间没有释放 */
  50.       }
  52.       /* 绝对定位 */
  53.       ul li.absolute {
  54.         /* 定位元素 */
  55.         position: absolute;
  56.         /* 宽度自动收缩到内容宽度, 释放所占空间,后面顶上去,但是还在父容器中 */
  58.         /* top: 40px
  59.         item1.height(28+2) + ul.border(5) + body.border(5) = 40px
  61.         left: 10px
  62.         ul.border(5) + body.border(5) = 10px
  63.         */
  65.         top: 100px;
  66.         left: 100px;
  68.         width: auto;
  69.         height: auto;
  71.         right: 200px;
  72.         bottom: 100px;
  74.         /* 宽度受限, 高度受内容伸展的空间进行布局 */
  75.         /* 水平居中非常容易,但垂直极困难 */
  77.         top: 0;
  78.         left: 0;
  79.         right: 0;
  80.         bottom: 0;
  82.         width: 200px;
  83.         height: 200px;
  85.         margin: auto auto;
  86.       }
  88.       /* li 定位元素 */
  89.       /* li ul 不是定位元素 */
  90.       /* li ul body 非定位 */
  91.       /* html 非定位 */
  92.       /* 所有祖先都不是可定位元素,没有参考物了,就得找一个默认的,视口或html */
  94.       ul {
  95.         /* 将 li 的包容器,转为定位元素 */
  96.         position: relative;
  97.       }
  98.     </style>
  99.   </body>
  100. </html>

固定定位

固定: position: fixed, 总相对于最初包含块(html)偏移

  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.   </head>
  9.   <body>
  10.     <div class="box">广告位/客服</div>
  12.     <style>
  13.       * {
  14.         margin: 0;
  15.         padding: 0;
  16.       }
  17.       .box {
  18.         width: 150px;
  19.         height: 150px;
  20.         background-color: lightgreen;
  22.         /* 固定定位 */
  23.         position: fixed;
  24.         /* top: 0;
  25.         left: 0; */
  26.         /* 右上角 */
  27.         /* top: 0;
  28.         right: 0; */
  29.         /* 右下角 */
  30.         /* left: 0;
  31.         bottom: 0; */
  32.         /* 右下角 */
  33.         right: 20px;
  34.         bottom: 50px;
  35.       }
  37.       body {
  38.         min-height: 2000px;
  39.       }
  40.     </style>
  41.   </body>
  42. </html>

绝对定位与固定定位的区别在 绝对: position: absolute, 相对距离最近的定位元素发生偏移，而固定: position: fixed, 总相对于最初包含块(html)偏移。

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.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="item">item1</div>
  12.       <div class="item">item2</div>
  13.       <div class="item">item3</div>
  14.     </div>
  16.     <style>
  17.       /* flex容器 */
  18.       .container {
  19.         /* width: 450px; */
  20.         height: 100px;
  21.         /* 使用flex进行布局,先将它转为flex容器元素 */
  22.         display: flex;
  23.         /* display: inline-flex; */
  25.         /* 容器属性,必须写到容器元素中 .container */
  26.         /* 主轴方向 */
  27.         /* flex-direction: row;默认是水平行的方向
  28.         flex-wrap: nowrap; 默认是不换行 wrap是换行*/
  29.         /* flex-flow: flex-direction flex-wrap; 合并属性*/
  30.         flex-flow: row nowrap;
  31.         /* 为了与后面的Grid布局属性对应 */
  32.         /* `place-content`: 项目在"主轴"上的排列方式 */
  33.         place-content: start;
  34.         /* place-content: start;默认是左边排列 */
  35.         /* place-content: end; 右边排列*/
  36.         /* 实际上, 主轴上的项目,可以独立进行排列 */
  37.         /* 二端对齐 */
  38.         /* place-content: space-between; */
  39.         /* 分散对齐 两边空间两倍*/
  40.         /* place-content: space-around; */
  41.         /* 平均对齐 两边空间重叠*/
  42.         /* place-content: space-evenly; */
  44.         /* place-items: 项目在"交叉轴"上的排列方式 */
  45.         /* place-items: stretch;默认值
  46.         place-items: start;顶部对齐
  47.         place-items: end;底部对齐
  48.         place-items: center;居中对齐 */
  49.       }
  51.       /* flex容器中的子元素,就是flex项目 */
  52.       .container > .item {
  53.         background-color: lightgreen;
  54.         /* height: 50px; */
  56.         /* width: 150px;
  57.         width: 250px; */
  59.         /* 1. flex: 放大比例 允许收缩 主轴空间 */
  60.         /* 默认,0不放大,1但可以自动收缩 */
  61.         flex: 0 1 auto;
  62.         /* flex: initial;默认值 */
  64.         /* 2. 完全响应式,允许放大和自动收缩 */
  65.         flex: 1 1 auto;
  66.         /* flex: auto; */
  68.         /* 完全不响应 */
  69.         flex: 0 0 auto;
  70.         /* flex: none; */
  72.         /* 常用 */
  73.         flex: 1;
  74.         /* 等价于,后面二个值取默认值 1 auto */
  75.         flex: 1 1 auto;
  77.         flex: 1; /* flex: auto */
  78.       }
  79.       /* :first-child第一个  */
  80.       /* :last-child最后一个  */
  82.       .container .item:first-child,
  83.       .container .item:last-child {
  84.         background-color: yellow;
  85.         flex: 1;
  86.       }
  87.       /* 中间占据三份 两边各占一份 */
  88.       .container .item:first-child + * {
  89.         flex: 3;
  91.         /* place-self: start;顶部对齐  交叉轴上对齐方式 */
  92.       }
  94.       /* 默认每个项目的order = 0 */
  95.       /* 越小越靠前 */
  97.       .container .item:first-child {
  98.         order: 5;
  99.       }
  100.       .container .item:first-child + * {
  101.         order: 6;
  102.       }
  103.       .container .item:first-child {
  104.         order: 7;
  105.         order: -1;
  106.       }
  107.     </style>
  108.   </body>
  109. </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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！