Web前端-元素定位

最新推荐文章于 2024-05-02 14:26:53 发布

曲悦丹田

最新推荐文章于 2024-05-02 14:26:53 发布

阅读量200

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_70634087/article/details/126549074

版权

居中相关

text-align:center; 让元素的文本内容和行内子元素居中 ,不能让块级子元素居中

margin:0 auto; 让块级元素自身居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font: 12px "simhei", Arial, Helvetica, sans-serif;
            color: #666;
        }
        body>div{
            width: 198px;
            height: 233px;
            background-color: #e8e8e8;
            text-align: center;
        }
       a{
           background-color: #0aa1ed;
           width: 100px;
           height: 24px;
           /*行内元素和行内块元素会受上级元素文本居中的影响,元素自身会居中,
           块级元素则不会,需要让块级元素居中的话必须使用margin:0 auto*/
           display: inline-block;
           /*display: block;*/
           /*margin: 0 auto;*//*让块级元素自身居中*/
           line-height: 24px;
           color: white;
           border-radius: 3px;
           text-decoration: none;
       }
       .title_p{
           margin: 0 0 6px 0;
           color: black;
       }
       .price_p{
           margin: 6px 0;
           color: #0aa1ed;
           font-weight: bold;
       }
    </style>
</head>
<body>
<div>
  <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png" alt="">
  <p class="title_p">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
  <p class="price_p">￥4600.00</p>
  <a href="">查看详情</a>
</div>






</body>
</html>

定位方式

包括:
- 静态定位
- 相对定位
- 绝对定位
- 固定定位
- 浮动定位

静态定位

元素默认的定位方式
特点: 元素以左上为基准,行内元素从左向右依次排列, 块级元素从上往下依次排列,一般情况下不能实现元素层叠效果. 通过外边距控制元素的位置
格式: position:static;

相对定位

格式: position:relative;
特点: 元素不脱离文档流(不管元素显示到什么位置都占着原来的位置),通过left/right/top/bottom控制元素的位置, 让元素相对于初始位置做偏移.

应用场景: 当需要对某个元素位置进行调整,并且不影响其它元素时使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{width: 100px;height: 100px;border: 1px solid red}
    div:hover{
      /*margin: 20px 0 0 20px;*/
      position: relative;
      top: 20px;
      left: 20px;
    }
  </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

绝对定位

格式: position:absolute
特点: 元素脱离文档流(不占原来的位置) ,通过left/right/top/bottom控制元素的位置,让元素相对于窗口(默认)或某一个上级元素做偏移,如果需要相对于某一个上级元素则必须把上级元素改成相对定位作为参照物.

应用场景: 当需要实现层叠效果,让元素以页面中某一个上级元素为参照物时使用绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
    #d1{
      /*设置为绝对定位, 元素脱离文档流,后面的元素会顶上来*/
      position: absolute;
      /*相对于窗口做位置偏移*/
      right: 0;
      top: 0;
    }
    #big{
      width: 200px;
      height: 200px;
      background-color: blue;
      margin: 200px 0 0 200px;
      /*让当前元素做参照物*/
      position: relative;
    }
    #big>div{
      background-color: green;
      margin: 50px 0 0 50px;

    }
    #big>div>div{
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      left: 0;
      top: 0;

    }

  </style>
</head>
<body>
<div id="big">
  <div>
    <div></div>
  </div>
</div>
<div id="d1">div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

固定定位

格式: position:fixed;
特点: 元素脱离文档流, 通过left/right/top/bottom控制元素的位置,让元素相对于窗口做位置偏移.

应用场景: 当需要让某个元素固定在窗口某个位置时使用.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      padding-top: 100px;
    }
    #d1{
      width: 1000px;
      height: 100px;
      background-color: red;
      position: fixed;
      top: 0;
    }
    #d2{
      width: 50px;
      height: 200px;
      background-color: blue;
      position: fixed;
      right: 20px;
      bottom: 50px;
    }
  </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<img src="../imgs/a.jpg" alt="">
<img src="../imgs/b.jpg" alt="">
<img src="../imgs/c.jpg" alt="">
<img src="../imgs/d.jpg" alt="">
</body>
</html>

浮动定位

格式: float:left/right;
特点: 元素脱离文档流, 从当前所在行向左或向右浮动, 当撞到上级元素边缘或其它浮动元素时停止
浮动元素一行装不下时会自动折行, 折行时有可能被卡住.
当某个元素的所有子元素全部浮动时, 元素自动识别的高度为0,后面的元素会顶上来并且会把文本内容挤到旁边位置显示, 通过给元素添加overflow:hidden解决此问题

应用场景: 当需要将纵向排列的元素改成横向排列时使用.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body>div{
      width: 200px;
      border: 1px solid red;
      overflow: hidden;/*解决元素所有子元素全部浮动时,高度自动识别为0,
      后面的元素会顶上来导致显示异常的问题*/
    }
    #d1{width: 50px;height: 50px;
      background-color: red;
      float: left;
    }
    #d2{
      width: 50px;height: 50px;
      background-color: green;
      float: left;
    }
    #d3{
      width: 50px;height: 50px;
      background-color: blue;
      float: left;
    }
    p{
        background-color: purple;
    }
    ul{
        list-style-type: none;/*去掉图标*/
        overflow: hidden;
    }
    li{
        float: left;
        margin-right: 20px;
    }
    a{
        text-decoration: none;
    }
  </style>
</head>
<body>
<div>
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
</div>
<p>这是个p标签</p>
<ul>
    <li><a href="">首页</a></li>
    <li><a href="">免费课</a></li>
    <li><a href="">直播课</a></li>
    <li><a href="">精品课</a></li>
    <li><a href="">线上班</a></li>
    <li><a href="">线下班</a></li>
</ul>
<a href="">这是超链接</a>
</body>
</html>

曲悦丹田

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端-元素定位

特点: 元素脱离文档流(不占原来的位置) ,通过left/right/top/bottom控制元素的位置,让元素相对于窗口(默认)或某一个上级元素做偏移,如果需要相对于某一个上级元素则必须把上级元素改成相对定位作为参照物.特点: 元素不脱离文档流(不管元素显示到什么位置都占着原来的位置),通过left/right/top/bottom控制元素的位置, 让元素相对于初始位置做偏移.特点: 元素脱离文档流, 从当前所在行向左或向右浮动, 当撞到上级元素边缘或其它浮动元素时停止。特点: 元素脱离文档流, 通过。.
复制链接

扫一扫