前端攻城狮---css样式之定位

最新推荐文章于 2021-06-09 21:02:15 发布

csdn_gyh

最新推荐文章于 2021-06-09 21:02:15 发布

阅读量182

点赞数

分类专栏：前端攻城狮文章标签：前端 html css 定位

本文链接：https://blog.csdn.net/gaoyouhuang/article/details/80577000

版权

前端攻城狮专栏收录该内容

44 篇文章 0 订阅

订阅专栏

为什么要学习定位呢？因为很重要。。。(ps:这不是废话嘛)这样子把，假如说我们需要在一个盒子里居中显示一个小盒子，那么就是需要定位来坐，定位用的频率还是非常高的。

定位

css定位分为三种：绝对定位　相对定位　固定定位。各位看官不要急，听我一一道来。

相对定位：position:relative

相对定位相对谁？相对的是改控件原来的位置

top 正数向下
left 正数向右
right 正数向左

bottom 正数向上

但是呢以上四个参数可不是随便选的，top/bottom,left/right　都只能二选一，不然top和bottom同时设置只有top有效，left和right同时设置只有left有效。

还有一点设置了相对定位的元素不脱标，就是说还是按照标准流的要求。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
       .txt {
          font-size: 20px;
       }
       .btn {
            position: relative;
            left: 20px;
            right: 20px;
            top: 20px;
            bottom: 20px;
       }
    </style>
</head>
<body>
    <div>
        请输入用户名:
        <input type="text" class="txt"/>
        <input type="button" value="登录" class="btn"/>
        <input type"button" value="haha"/>
    </div>
</body>
</html>

绝对定位position:absolute

同样的那么绝对定位相对于谁呢？绝对定位相对于离自己最近的且设置了相对定位的父标签，那么有人会问如果没有父标签设置相对定位呢？那要怎么办？那么就相对body

接下来说说绝对定位的一些特性把

假如没有父标签，或者是有父标签但是没有设置相对定位的话，那么top bottom left right显示的效果是什么样的？

先上代码把

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
       div{
        width: 200px;
        height: 200px;
       }
       body{
        height: 3000px;
       }
       .div1{
        top: 100px;
        position: absolute;
        background-color: blue;
       }
       .div2{
        bottom: 100px;
        position: absolute;
        background-color: green;
       }
       .div3{
        left: 100px;
        position: absolute;
        background-color: yellow;
       }
       .div4{
        right: 100px;
        position: absolute;
        background-color: skyblue;
       }
    </style>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
</body>
</html>

以上就是效果图，

１．top的定位参考点是以页面的上方，搭配left/right就是页面的左上角/右上角

２．bottom的定位参考点是浏览器首屏的下方，，搭配left/right就是浏览器首屏的左下角/右下角

什么叫浏览器的首屏？就是第一次打开浏览器时，你所看到浏览器显示的大小。然后呢绝对定位就相对于你所看到的浏览器显示的界面去定位。这么说把如果你把浏览器拉小，那么显示的效果也不一样。

下面放上一张把浏览器压缩后的显示的效果

看到了吗？就是相对于浏览器第一次显示时候的界面。

加入有父标签且父亲标签设置了相对定位

这种情况常用的术语叫做子绝父相，就像刚开头说的想要居中显示，就需要给父盒子设置相对定位，子盒子设置绝对定位。下面我们来一个例子，便于理解子绝父相的概念

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
       .wrap{
        width: 400px;
        height: 400px;
        border: 1px solid black;
        position: relative;
       }
       .child{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: skyblue;
        top:50%;
        margin-top: -50px;
        left: 50%;
        margin-left: -50px;
       }
    </style>
</head>
<body>
  <div class="wrap">
      <div class="child"></div>
  </div>
</body>
</html>

我们可以看到最终的效果就是居中了！居中了！居中了！

我们来看看究竟是什么语句让其居中？

top:50%;　margin-top: -50px;　首先是top的50%,这百分号是什么意思？其实就是父标签的百分比，如top:50%,就是说top父亲高度的百分之50，如此子孩子的顶部已经位置父亲的垂直居中了，但是孩子却没有居中，所以需要再减去孩子自身高度的一般，这样子在竖直上，才是真正意义上的居中。水平居中同理left: 50%;　margin-left: -50px;

在来个例子，轮播图，在使用轮播图时，就需要用到绝对定位，直接上例把

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
      .banner{
        width: 300px;
        height: 150px;
        border: 1px solid black;
        position: relative;
        margin: 0 auto;
      }
      .img{
        width: 300px;
        height: 150px;
        background-color: skyblue;
      }
      .left{
        background-color: white;
        width: 50px;
        height: 30px;
        position: absolute;
        top: 50%;
        margin-top: -15px;
        left: 0;
        line-height: 30px;
        text-align: center;
      }
      .right{
        background-color: white;
        width: 50px;
        height: 30px;
        position: absolute;
        top: 50%;
        margin-top: -15px;
        right: 0;
        line-height: 30px;
        text-align: center;
      }
    </style>
</head>
<body>
  <div class="banner">
      <div class="img"></div>
      <span class="left"><</span>
      <span class="right">></span>
  </div>
</body>
</html>

固定定位position:fixed;

可是会使元素脱标，参考的点是浏览器的四个角

定位的已经讲完，接下来会来讲html5，如有表达错的请谅解和提出错的点，望能共同进步。

csdn_gyh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端攻城狮---css样式之定位

为什么要学习定位呢？因为很重要。。。(ps:这不是废话嘛)这样子把，假如说我们需要在一个盒子里居中显示一个小盒子，那么就是需要定位来坐，定位用的频率还是非常高的。定位css定位分为三种：绝对定位　相对定位　固定定位。各位看官不要急，听我一一道来。相对定位：position:relative相对定位相对谁？相对的是改控件原来的位置 top 正数向下 left 正数向右 ri...
复制链接

扫一扫

专栏目录