HTML关于定位和锚点的设置解释

最新推荐文章于 2024-08-13 08:50:39 发布

原创最新推荐文章于 2024-08-13 08:50:39 发布 · 665 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html5 #前端 #html

HTML关于定位和锚点的设置解释同时被 2 个专栏收录

1 篇文章

订阅专栏

关于前端定位的解释分析

1 篇文章

订阅专栏

本文详细介绍了HTML中各种定位方式的使用方法及其特点，包括相对定位、绝对定位、固定定位和粘性定位，并提供了设置元素居中显示的方法以及锚点链接的应用案例。

HTML关于定位和锚点的设置解释：

相对定位的使用：

相对定位的属性是position：relative

-参照物：相对于初始的位置进行移动

-方向：top-right-bottom-left

定位数值可以接负值的

margin：-10px

text-indent：属性是首行缩进的意思，也是可以接负值的。

margin值:margin的反向必须要和父级的包含框有相接触

web的布局几大特点: 普通流、文档流

浮动层、浮动流

定位流

绝对定位的使用：

属性position：absolute

需要有参照物

-如果父级有定位属性，那么就相对于父级定位进行移动偏移显示

-如果父级没有定位属性，就会向上去查找，直到浏览器

-接绝对定位的方向属性及数值

-绝对定位是脱离文档流的(建议不要在大的网页布局中使用绝对定位属性)

固定定位的使用：

属性position:fixed

- 参照物:是相对于浏览器位置进行偏移

- 接绝对定位的方向属性及数值（一般用于定位出整个浏览器的一个固定位置）

粘性定位的使用：

属性position:sticky

- 粘性定位是结合了相对定位的固定定位的特点

- 相对定位的不脱离文档流

- 固定定位的相对于浏览器的特点

一般这个属性不推荐使用，因为是CSS中新增的属性，浏览器版本较低的情况兼容

性的问题就越大。

定位的总结：

定位大概有五个属性：position：stative（默认属性，没有实际意义）

relative (相对定位)

absolute(绝对定位)

fixed（固定定位）

sticky(粘性定位)

1、相对定位：不脱离文档流，相对于初始位置进行便宜改变方向

2、绝对定位：脱离文档流，如果父级元素有定位就相对于父级，父级没有就一只向上查找，直到浏览器（html）

3、固定定位：固定文档流，相对于整个浏览器进行定位显示。

4、粘性定位：不脱离文档流，相对于整个浏览器（这个属性的兼容性很差,不推荐使用）

层叠性的属性：

z-index auto/number 数字越大优先级越高（一般用作有多个属性相叠加在一起显示的时候，设置的z-index属性）

（前端面试题）如何设置一个元素在浏览器中居中显示：

第一种：已知元素的宽高大小，实现元素在浏览器中居中

添加定位属性position：fixed

left：50%

top: 50%

margin-left：-150px(向左偏移动元素宽度的一半)

margin-top：-200px(向上偏移动元素高度的一半)

第二种：未知元素的宽高大小，实现元素在浏览器中居中

强制居中的方法：

设置四个方向的属性值为0

top: 0；right: 0；bottom: 0；left: 0；

添加属性：

margin: auto（让元素自适应四个方向的大小，实现居中显示）

规范处理banner图片的排版方式：

之前使用background的方式处理banner是可以的

但是搜索引擎在捕捉页面中比较重要的内容时候背景图是无法被捕捉有限加载的

规范的处理方式

-外围的结构

-版心结构

-设置定位属性

代码如下：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        #banner{
            width: 100%;
            height: 385px;
            background: green;
            overflow: hidden;/* 将超出版心的部分自适应,不会因为宽度而出现横向的滚动条 */

        }
        .banner-con{
            width: 1004px;
            height: 385px;
            background: yellow;
            margin: 0 auto;
            position: relative;/* 给父元素增加相对定位 */
        }
        img{
            position: absolute;/* 给子级元素增加绝对定位 */
            left: 50%;
            margin-left: -800px;
        }
    </style>
</head>
<body>
    <div id="banner">
        <div class="banner-con">
            <img src="images/banner.jpg" alt="">
        </div>
    </div>
</body>

关于锚点的链接：

将一个标签内设置id选择器<id=“box” >

将一个超级链接a标签设置将要跳转的路径为<#box>

点击超级链接a之后将会跳转到指定设置了id标签的位置

演示代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0; padding: 0;
        }
        /* 设置a标签的样式做一个回到某一个点的位置展示 */
        a{
            width: 50px;
            height: 50px;
            background: red;
            color: #ccc;
            line-height: 50px;
            text-align: center;
            font-size: 50px;
            text-decoration: none;
            position: fixed;
            right: 0;
            bottom: 40%;
        }
    </style>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p id="box">10</p>
    <!-- 注:定位到数字10这里,为了展示锚点的跳转指定位置 -->
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>15</p>
    <p>16</p>
    <p>17</p>
    <p>18</p>
    <p>19</p>
    <p>20</p>
    <p>21</p>
    <p>22</p>
    <p>23</p>
    <p>24</p>
    <p>25</p>
    <p>26</p>
    <p>27</p>
    <p>28</p>
    <p>29</p>
    <p>30</p>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <p>34</p>
    <p>35</p>
    <p>36</p>
    <p>37</p>
    <p>38</p>
    <p>39</p>
    <p>40</p>
    <p>41</p>
    <p>42</p>
    <p>43</p>
    <p>44</p>
    <p>45</p>
    <p>46</p>
    <p>47</p>
    <p>48</p>
    <p>49</p>
    <p>50</p>
    <p>51</p>
    <p>52</p>
    <p>53</p>
    <p>54</p>
    <p>55</p>
    <p>56</p>
    <p>57</p>
    <p>58</p>
    <p>59</p>
    <p>60</p>
    <p>61</p>
    <p>62</p>
    <p>63</p>
    <p>64</p>
    <p>65</p>
    <p>66</p>
    <p>67</p>
    <p>68</p>
    <p>69</p>
    <p>70</p>
    <p>71</p>
    <p>72</p>
    <p>73</p>
    <p>74</p>
    <p>75</p>
    <p>76</p>
    <p>77</p>
    <p>78</p>
    <p>79</p>
    <p>80</p>
    <p>81</p>
    <p>82</p>
    <p>83</p>
    <p>84</p>
    <p>85</p>
    <p>86</p>
    <p>87</p>
    <p>88</p>
    <p>89</p>
    <p>90</p>
    <p>91</p>
    <p>92</p>
    <p>93</p>
    <p>94</p>
    <p>95</p>
    <p>96</p>
    <p>97</p>
    <p>98</p>
    <p>99</p>
    <p>100</p>
    <a href="#box">↑</a>
    <!-- 注:a标签的href路径地址一定要设置#和你设置的名称 -->
</body>
</html>