CSS基础（5）

最新推荐文章于 2024-10-02 15:35:50 发布

象更

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量985

点赞数 25

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_74227060/article/details/135710819

版权

本文详细介绍了CSS中的定位概念，包括浮动、相对定位、绝对定位和固定定位的使用方法、特点以及它们在布局中的作用。同时，通过示例展示了如何利用这些定位技巧实现网页布局。

摘要由CSDN通过智能技术生成

定位

1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子；

2.定位则可以让盒子自由在某个盒子内移动位置或者固定屏幕中某个位置，并可以压住其他盒子。

定位=定位模式+边偏移；

定位模式用于指定一个元素在文档中定位方式，边偏移则决定了该元素的最终位置。

定位组成

定位模式通过position来设定：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移使定位盒子移动到最终位置；有top、bottom、left、right 4个属性。

边偏移属性	实例	描述
top	top：80px;	顶部偏移量，定于元素相对其父元素上边线的距离
bottom	bottom: 80px;	底部偏移量，定于元素相对其父元素下边线的距离
left	left: 80px;	左侧偏移量，定于元素相对其父元素左边线的距离
right	right: 80px;	右侧偏移量，定于元素相对其父元素右边线的距离

静态定位static

元素默认定位方式，即无定位（没有脱离标椎流）

相对定位relative

元素在移动位置时，

特点：

1.相对它原来位置来说的进行移动

2.原来在标准流的位置继续占有，后面的盒子继续以标准流对待它。

绝对定位absolute

绝对定位是在移动位置时，相对于祖先来说的。

特点;

1.如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位。

2.如果祖先元素有定位（相对、绝对、固定定位），则最近一级祖先元素为参考点移动位置。

3.绝对定位不再占有原先位置（脱标）

若没有祖先元素或祖先元素没有定位

若祖先元素有定位：

相对于祖先元素。

子绝父相

1.子级绝对定位，不会占有位置，可以放在父类的任何地方，不会影响其他兄弟盒子；

2.父盒中加定位限制子盒子在父盒子内显示。（父亲必须占有位置）

固定定位fixed

元素固定于浏览器可视区位置；页面滚动时元素位置不变。

固定定位不占有原先位置。

相对于版心的固定定位

算法（以右侧为例）：

1.让固定定位的盒子：left：50%，走到版心一半；

2.让固定定位的盒子margin-left:版心宽度的一半距离。

叠放次序

z-index:数值越大盒子越靠上

绝对定位的盒子如何居中

加了绝对定位的盒子不能margin：0 auto；居中。

定位的特殊特性

行内元素添加定位，可以直接设置宽高；

块级元素添加定位，如果不给宽高，默认大小是内容大小

浮动元素会压住标准流盒子，但不会压住盒子里的文字

但绝对定位（固定定位）会压住标准流的所有内容

浮动之所以不会压住文字是由于浮动产生的目的最初是为做文字环绕的。

利用定位案例

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>教务在线</title>

   <style>
      * {
         margin: 0;
         padding: 0;
      }

      .a1 {
         position: absolute;
         text-decoration: none;
         width: 20px;
         height: 30px;
         background-color: black;
         color: #fdfafa;
         left: 0;
         line-height: 30px;
         top: 50%;
         margin-top: -15px;
         border-top-right-radius: 15px;
         border-bottom-right-radius: 15px;
      }

      .a2 {
         position: absolute;
         text-decoration: none;
         width: 20px;
         height: 30px;
         background-color: black;
         color: #fdfafa;
         right: 0;
         line-height: 30px;
         top: 50%;
         margin-top: -15px;
         border-top-left-radius: 15px;
         border-bottom-left-radius: 15px;

      }

      .box {
         position: relative;
         height: 280px;
         width: 520px;
         margin: 100px auto;
      }

      .box img {
         height: 280px;
         width: 520px;
      }

      a:hover {
         background-color: #e5bd0d;
      }

      ul {
         position: absolute;
         bottom: 10px;
         left: 50%;
         margin-left: -35px;
         height: 13px;
         width: 70px;
         border-radius: 6px;
         background: rgba(225, 300, 255, .3);
      }

      li {
         list-style: none;
         float: left;
         width: 8px;
         height: 8px;
         background-color: #fdfafa;
         border-radius: 50%;
         margin: 3px;
      }

      .select {
         background-color: #e5bd0d;
      }
   </style>

</head>

<body>
   <div class="box">
      <img src="https://img.zcool.cn/community/01e0ef5819f4ada84a0d304f84a8da.jpg@2o.jpg">
      <a href="#" class="a1">
      </a>
      <a href="#" class="a2">&nbsp;></a>
      <ul>
         <li></li>
         <li class="select"></li>
         <li></li>
         <li></li>
         <li></li>
      </ul>
   </div>
</body>

</html>