THELIUWEI

Appearance

定位布局 ​

基础知识 ​

定位的基本思想是它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

轮播图是最典型的定位应用

定位类型 ​

选项说明
static默认行为，参考文档流
releative相对定位
absolute绝对定位
fiexed固定定位
sticky粘性定位

位置偏移 ​

可以为部分类型的定位元素设置上、下、左、右的位置偏移

选项说明
top距离顶边
bottom距离底边
left距离左边
right距离右边
css
left:20%;

相对定位 ​

相对定位是相对于元素原来的位置控制，当元素发生位置偏移时候，原位置留白。

css
position: relative;

绝对定位 ​

绝对定位不会受到文档流的影响，它漂浮在页面中，绝对定位的元素拥有行内块的特性。

参照元素 ​

如果父级元素设置了 relative | fixed | sticky ，绝对定位子元素将参数此父元素进行定位。

css
<style>
	body {
    padding: 50px;
  }

  article {
      width: 400px;
      height: 100px;
      border: solid 6px blueviolet;
      position: relative;
  }

  div {
      font-size: 25px;
      background: #f2a67d;
      padding: 10px;
      position: absolute;
      top: 0;
      left: 0px;
  }
</style>
...

<article>
	<div>theliuwei.com</div>
</article>

默认位置 ​

如果没有定位元素设置偏移，将受到父元素的padding等属性影响。但使用定位一般都会设置偏移位置。

css
body {
    padding: 50px;
}

article {
    width: 400px;
    height: 100px;
    border: solid 6px blueviolet;
    position: relative;
    padding: 20px;
}

div {
    background: #f2a67d;
    padding: 5px;
    position: absolute;
    top: 50px;
    left: 50px;
}

设置尺寸 ​

可以通过定位的偏移值设置元素的尺寸

css
<style>
	body {
    padding: 50px;
  }
  article {
    width: 400px;
    height: 100px;
    border: solid 6px blueviolet;
    position: relative;
  }
  div {
    font-size: 25px;
    background: #f2a67d;
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    bottom: 0;
  }
</style>

居中定位 ​

通过将left设置为50%，并向左偏移子元素宽度的一般可以实现元素水平居中，垂直居中使用方式类似。

css
<style>
  body {
    padding: 50px;
  }
  article {
    width: 400px;
    height: 400px;
    border: solid 6px blueviolet;
    position: relative;
  }
  div {
    width: 200px;
    height: 200px;
    background: #f2a67d;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
  }

</style>

<article>
        <div></div>
    </article>

滚动行为 ​

固定定位元素会随滚动条发生滚动

css
<style>
  body {
    padding: 50px;
  }
  main {
    width: 300px;
    height: 200px;
    border: solid 10px blueviolet;
    position: relative;
    overflow: scroll;
  }
  main article {
    height: 600px;
  }
  main article div {
    width: 200px;
    height: 200px;
    position: absolute;
  }
  main article div:nth-of-type(1) {
    background: red;
    left: 0px;
    z-index: 2;
  }
</style>
...

<main>
	<article>
		<div></div>
	</article>
</main>

图标定位 ​

有了绝对定位，我们可以方便控制元素在任何位置的摆放。

css
* {
  padding: 0;
  margin: 0;
}
main {
  height: 3000px;
  padding: 100px;
}
main div {
  width: 300px;
  border: solid 6px blueviolet;
  padding: 0;
  overflow: hidden;
  position: relative;
}
main div img {
  max-width: 300px;
  float: left;
}
main div span {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  color: white;
  line-height: 2em;
  border-radius: 50%;
  background: blueviolet;
  position: absolute;
  top: 10px;
  left: 10px;
  box-shadow: 0 0 5px rgba(100, 100, 100, 0.8);
}

...

<main>
    <div>
        <span>热</span>
        <img src="theliuwei.jpg" alt="">
    </div>
</main>

纵向重叠 ​

如果元素重叠在一起，可以使用z-index 控制元素的上下层级，数值越大越在上面。父级子元素设置z-index没有意义。子元素永远在父元素上面的。

层级改变 ​

css
<style>
	body {
    padding: 50px;
  }

  article {
    width: 200px;
    height: 200px;
    border: solid 10px blueviolet;
    position: relative;
    cursor: pointer;
  }

  article:hover div:nth-of-type(2) {
    z-index: 2;
  }

  article div {
    width: 200px;
    height: 200px;
    position: absolute;
  }

  article div:nth-of-type(1) {
    background: red;
    left: 0px;
    z-index: 2;
  }

  article div:nth-of-type(2) {
    background: green;
    left: 50px;
    top: 50px;
  }
</style>
...

<article>
	<div></div>
	<div></div>
</article>

购物车 ​

因为事件捕获特性，所以要把父级的z-index放在最下面

css
<style>
  * {
    padding: 0;
    margin: 0;
  }
  main {
    width: 600px;
    padding: 100px;
    margin: 0 auto;
  }
  main article {
    width: 150px;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    color: #555;
  }
  main article:hover div:nth-of-type(1) {
    border-bottom: none;
  }
  main article:hover div:nth-of-type(2) {
    display: block;
  }
  main article div {
    box-sizing: border-box;
    height: 50px;
    line-height: 3.5em;
    text-align: center;
    border: solid 2px blueviolet;
    background: white;
  }
  main article div:nth-of-type(1) {
    position: relative;
    z-index: 2;
  }
  main article div:nth-of-type(2) {
    display: none;
    position: absolute;
    right: 0;
    top: 48px;
    left: -150px;
    z-index: 1;
  }
</style>
...

<main>
    <article>
        <div>我的购物车</div>
        <div>购物车中暂无产品</div>
    </article>
</main>

固定定位 ​

元素相对于页面固定定位在某个位置，固定定位元素不会在滚动时改变位置，使用position:fixed产生固定定位。

css
<style>
  header {
    height: 60px;
    border-bottom: solid 5px #7f35c9;
    box-shadow: 0 5px 8px rgba(100, 100, 100, 0.6);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
  }
  article {
    height: 3000px;
    margin-top: 80px;
    background: #f3f3f3;
    border: solid 5px #ddd;
  }
</style>
...

<header></header>
<article></article>

粘性定位 ​

同级定位 ​

css
<style>
  * {
    padding: 0;
    margin: 0;
  }
  main {
    padding: 30px;
    font-size: 14px;
  }
  main article {
    width: 400px;
    height: 100px;
    border: solid 5px blueviolet;
    overflow: scroll;
  }
  main article h2 {
    background: #db1f77;
    color: white;
    text-indent: 20px;
    position: sticky;
    top: 0;
  }
  main article h2:nth-of-type(1) {
    background: blueviolet;
  }
  main article section {
    height: 300px;
  }
</style>
...

<main>
    <article>
        <section></section>
        <h2>theliuwei</h2>
        <section></section>
        <h2>hello world</h2>
        <section></section>
    </article>
</main>

非同级定位 ​

不属于同一个元素设置的粘性定位时，后买呢的元素挤掉原来位置的元素。

css
<style>
  * {
    padding: 0;
    margin: 0;
  }
  main {
    padding: 30px;
    font-size: 14px;
  }
  main article {
    width: 400px;
    border: solid 5px blueviolet;
    height: 200px;
    overflow: scroll;
  }
  main article section:nth-of-type(odd) h2 {
    background: blueviolet;
  }
  main article section h2 {
    background: #db1f77;
    color: white;
    text-indent: 20px;
    position: sticky;
    top: 0;
  }
  main article section p {
    padding: 20px;
  }
</style>
...

<main>
    <article>
        <section>
            <h2>hdcms.com</h2>
            <p>
                在现代Web应用程序中，实时通信已经成为了必不可少的功能之一。无论是在线聊天、实时数据更新还是实时通知，都需要通过实时通信技术来实现。Django作为一个强大的Web框架，提供了许多工具来构建各种类型的Web应用程序，但是在实时通信方面，传统的请求-响应模式显然无法满足需求。在这篇文章中，我们将探讨如何利用Django中的WebSockets和异步视图来实现实时通信功能。
            </p>
        </section>
        <section>
            <h2>后盾人</h2>
            <p>
                WebSockets是一种在单个TCP连接上提供全双工通信的协议。与HTTP请求-响应模式不同，WebSockets允许服务器和客户端之间进行持续的双向通信，从而实现了实时性。在Django中，我们可以使用第三方库django-channels来实现WebSocket的支持。
            </p>
        </section>
        <section>
            <h2>houdunwang.com</h2>
            <p>
                Django 3.1引入了异步视图的支持，使得我们可以编写异步处理请求的视图函数。这对于处理长时间运行的任务或需要等待外部资源响应的请求非常有用。

结合WebSockets与异步视图
            </p>
        </section>
    </article>
</main>

Released under the MIT License.

Copyright © 2024-present Liu Wei