ASCII码 ASCII码

绝对定位与相对定位

发布于：2022-07-13 12:59:52  栏目：技术文档

相对定位和绝对定位

  1. html基础代码
  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></title> 
  9.     <link rel="stylesheet" href="test.css">
  10. </head>
  11. <body>
  12.     <div class="box parent">
  13.         <div class="box child one">child-1:相对定位</div>
  14.         <div class="box child two">child-2:绝对定位</div>
  15.         <div class="box child three">child-3:固定定位</div>
  16.     </div>
  17. </body>
  18. </html>
  20. test.css基础代码
  21. .box{
  22.     border: 1px solid red;
  23. }
  25. .box.parent{
  26.     width: 400px;
  27.     height: 400px;
  28.     background-color: lightcyan;
  29. }
  31. .box.child{
  32.     padding: 20px;
  33. }
  35. .box.child.one{
  36.     background-color: red;
  37. }
  39. .box.child.two{
  40.     background-color: yellow;
  41. }
  43. .box.child.three{
  44.     background-color: green;
  45. }

使用child-1盒子演示相对定位

将child one转为相对定位在.box.child.one选择器中增加样式值

  1. .box.child.one{
  2.     background-color: red;
  3.     position: relative;
  4. }

child one即转为相对定位初始效果：修改child one的top为50px

  1. .box.child.one{
  2.     background-color: red;
  3.     position: relative;
  4.     top: 50px;
  5. }

效果：修改child one的left为50px

  1. .box.child.one{
  2.     background-color: red;
  3.     position: relative;
  4.     top: 50px;
  5.     left: 50px;
  6. }

效果：

使用child-2盒子演示绝对定位

将child two转为相对定位在.box.child.two选择器中增加样式值

  1. .box.child.two{
  2.     background-color: yellow;
  3.     position:absolute;
  4. }

观察效果：使用 display: none;让child-1不再显示。

  1. .box.child.one{
  2.     background-color: red;
  3.     position: relative;
  4.     display: none;
  5. }

观察效果：box parent选择器的增加样式position: relative;body设置高度和边框将clild-2绝对定位修改到右下角，以观察绝对定位的父级元素。

  1. body{
  2.     height: 500px;
  3.     border: 1px solid blue;
  4. }
  5. .box.parent{
  6.     width: 400px;
  7.     height: 400px;
  8.     background-color: lightcyan;
  9.     position: relative;
  10. }
  11. .box.child.two{
  12.     background-color: yellow;
  13.     position:absolute;
  14.     right: 0;
  15.     bottom: 0;
  16. }

效果如下：去掉box parent的定位属性

  1. .box.parent{
  2.     width: 400px;
  3.     height: 400px;
  4.     background-color: lightcyan;
  5.     position: static;
  6. }

观察效果：打开body的定位属性

  1. body{
  2.     height: 500px;
  3.     border: 1px solid blue;
  4.     position: relative;
  5. }

观察效果：将body去掉可定位属性，将HTML加上可定位属性

  1. html{
  2.     height: 600px;
  3.     border: 1px dashed coral;
  4.     position: relative;
  5. }
  6. body{
  7.     height: 500px;
  8.     border: 1px solid blue;
  9.     position: static;
  10. }

观察效果：将HTML的可定位属性去掉，观察效果：上图的未知父级就是最初包含块/初始包含块，他是根元素（HTML元素）的父级。

默认布局与元素类型

————-笔记—————————————————

  1. 盒子的两种，块级元素和内联元素。1.1块级元素display：block常见块级元素：div, table, table cell td, 列表项， form, div, p, h1-6 ）…宽度默认继承并占满父级宽度，高度默认由内容决定。宽高都可自定义。1.2内联元素display：inline用来描述块级元素内部的内容/文本。display:inline常见内联元素：a,small,select,span,button，input，label，br，img，map，em，i，strong,textarea…宽高由内容决定，不能自定义。在CSS里设置了也不起作用。
    1. <div style="border: 1px solid red;width: 360px;box-sizing: border-box;">
    2.      块元素的行内元素样式测试，div边框1像素红色。div行宽360px。
    3.      <span style="width: 600px; height: 150px; background-color: green;border: 1px solid yellow;box-sizing: border-box;">
    4.          div行内元素span边框1像素黄色。
    5.          设置宽度600像素，高度150像素，无作用。
    6.          背景色绿色可以看出全部span内容所占区域。
    7.          结论：span行宽继承父级元素，即div的行宽，行高由内容决定。
    8.      </span>
    9.  </div>
    虽然在样式里能看到设置的数字，但效果上看不到作用。实际效果：行内元素内边距设置有效
    1. <div style="border: 1px solid red;width: 360px;box-sizing: border-box;">
    2.      块元素的行内元素样式测试，div边框1像素红色。div行宽360px。
    3.      <span style="padding: 20px; background-color: green;border: 1px solid yellow;box-sizing: border-box;">
    4.          padding超出div边框。
    5.      </span>
    6.  </div>
    效果如下图：行内元素外边距设置有效，但只能左右生效，上下不生效。
    1. <div style="border: 1px solid red;width: 360px;box-sizing: border-box;">
    2.      块元素的行内元素样式测试，div边框1像素红色。div行宽360px。
    3.      <span style="margin: 20px; background-color: green;border: 1px solid yellow;box-sizing: border-box;">
    4.          padding超出div边框。
    5.      </span>
    6.  </div>
    效果如下图：内联元素转为块级，直接改变display为block即可。
    1.      <span style="display: block;">
    2.          内联元素转为块级元素。
    3.      </span>
    行内块display：inline-block，既可以设置宽高，后续元素又是水平排列。（正常块级元素是垂直排列）
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行