Vue进阶（幺肆叁）：如何用绝对定位（position absolute）完美定位布局及其注意事项_vue position

最新推荐文章于 2024-09-19 14:34:51 发布

2401_87029603

最新推荐文章于 2024-09-19 14:34:51 发布

阅读量469

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2401_87029603/article/details/142083192

版权

2.2. display属性

display 属性可以设置元素外部显示类型，元素的外部显示类型将决定该元素在流式布局中的表现。

注意⚠️：设置块级元素的外部显示类型display：inline;不是把块级元素变成了内联元素，它本身还是块级元素，只是它具备了内联元素的显示特点。

那么外部显示类型display: inline-block; 的显示特点是什么呢？从名字上看，它应该是具备了块级和内联元素的特点，没错，它结和了块级元素：可以设置属性：width、height、margin-top和margin 和内联元素：多个元素在一行显示的特点。

2.2.1 display: inline 代码及显示效果

一些常见的行内元素包括 <span>、<a>、<img>、<button>、<input> 等。

这里使用内联元素span，其display默认值是inline。因此，不需要显示指定该值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display: inline</title>

    <style>
 span {
 width: 50px;
 height: 50px;
 margin-top: 20px;
 margin-bottom: 20px;
 background-color: red;
 }

 div {
 background-color: yellow;
 }
 </style>

</head>
<body>
   <div>
       <span>Hello HTML</span>
       <span>Hello HTML</span>
       <span>Hello HTML</span>
   </div>
</body>
</html>

在这里插入图片描述
如图所示，满足了内联元素的特点：多个元素在一行显示，设置属性：width、height、margin-top、margin-bottom无效。

2.2.2 display: block 代码及显示效果

一些常见的块级元素包括 <div>、<p>、<h1> 到 <h6>、<form> 等。

仅仅将span替换为p元素，样式设置没变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display: block</title>

    <style>
 p {
 width: 50px;
 height: 50px;
 margin-top: 20px;
 margin-bottom: 20px;
 background-color: red;
 }

 div {
 background-color: yellow;
 }
 </style>

</head>
<body>
   <div>
        <p>hello HTML</p>
        <p>hello HTML</p>
        <p>hello HTML</p>
   </div>
</body>
</html>

在这里插入图片描述

如图所示，满足了块级元素的特点：每个元素独占一行，设置属性：width、height、margin-top、margin-bottom生效。

2.2.3 display: inline-block 用于内联元素

对span元素的样式添加display: inline-block。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display: inline</title>

    <style>
 span {
 /\*添加display: inline-block;\*/
 display: inline-block;
 width: 50px;
 height: 50px;
 margin-top: 20px;
 margin-bottom: 20px;
 background-color: red;
 }

 div {
 background-color: yellow;
 }
 </style>

</head>
<body>
   <div>
       <span>Hello HTML</span>
       <span>Hello HTML</span>
       <span>Hello HTML</span>
   </div>
</body>
</html>

在这里插入图片描述

如图所示：它结和了块级元素：可以设置属性：width、height、margin-top和margin 和内联元素：多个元素在一行显示的特点。

看了上面的一些排布规则，大家是不是就了解什么叫标准流啦？

举个例子，就拿float来说，没有浮动的盒子是一个标准流，而浮动的盒子是一个非标准流 ，因为float更改了它默认的排布规则。

而我们要用到的绝对定位，则是对离自己最近的那个非标准流盒子而言的。 （对一个盒子使用了浮动，相对定位，或者绝对定位，那么这个盒子就变成了一个非标准流的盒子。）

好了，接下来就该讲使用绝对定位要满足的两个条件了。

当我们要使用绝对定位的时候，必须要有两个条件：

必须给父元素加定位属性，一般建议使用 position:relative(即：将父元素设置为相对定位);
给子元素，加绝对定位position:absolute（将子元素设置为绝对定位）; 同时加方向属性（top,left,right,bottom）

为什么要满足这两个条件呢？

因为绝对定位是以父元素为基准点，进行定位。如果他没有父元素，或者它的父元素没有设置position:relative属性它就会以最近的非标准流盒子为基准点进行定位。

绝对定位会使当前元素脱离文档流，即变成了非标准流。这是什么意思呢？

其实，当它为标准流的时候，它默认在原位，当它脱离标准流的时候，他就浮动起来了，不再占据原来的位置了。

这时候你要是想定位，如果不将它的父元素设置为相对定位（即让父元素变为非标准流），或者它没有父元素，那么它就会以<html>节点的顶部为基准定位。

如果满足了这两个条件，它就将会以父元素为基准进行绝对定位。

这样定位的话，会省去很多麻烦。

三、Demo

下面来看一下具体例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
 h3{
 position:absolute;
 left:50px;
 top:50px;
 color:#FFF;
 }
 .div\_test{
 width:500px;
 height:200px;
 background-color:#000; 
 }
 .div\_test2{
 width:300px;
 height:100px;
 float:right;
 background-color:blue;
 //position:relative;//相对定位
 }
</style>
</head>
 
<body>
### 自学几个月前端，为什么感觉什么都没学到？？

----------------------------------------------------------------------------------

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。



这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。



![](https://img-blog.csdnimg.cn/img_convert/15be8206a9f6e5bd9e8e930303b613ee.png)



还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。



所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。