定位的类型和应用场景，练习模态框

浮动定位

浮动定位一般用于图文的并排显示，浮动浮动后会脱落文档流，后面的补上来，它只会影响后面的布局，任何元素只要浮动了就会变成块级元素；父级盒子计算高度是不会计算它的高度，所以得用BFC布局来解决父级高度塌陷问题

<style>
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        padding: 1em;
        border: 1px solid #000;
          /* 用这个来清楚高度塌陷和图文分离问题*/
        overflow: hidden;
      }
      .box img {
        width: 15em;
        border-radius: 0.5em;
        /* 左浮动 */
        float: left;
        margin-right: 1em;
      }
      .box .dese a {
        width: 10em;
        height: 2em;
        background-color: aquamarine;
        float: left;
      }
</style>
<body>
    <h1>浮动的本质</h1>
    <div class="box">
      <img src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png"
      />
      <div class="desc">
        <h2>第十四期_前端开发</h2>
    <p>
php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；2、完成网站所有静态页面布局；重点：弹性布局与网格布局；3.JavaScript、jQuery、ES6基础与实战；4.Vue.js基础与实战
        </p>
        <a href="">了解详情</a>
      </div>
    </div>

静态定位，绝对定位，相对定位，固定定位

定位代码：position，其属性有四个：

static：静态定位，HTML默认定位，文件流的定位方式
relative：相对定位，相对于它原先的位置来定位
absolute：绝对定位，相对与理他最近的相对定位和绝对定位来定位，它上面要是没有就相对于根属性来定位
4.fixed：固定定位，相对于根属性来定位

绝对定位演示

<style>
.box{
width: 15em;
height: 15em;
margin:2em auto;
border: 1px solid #000000;
}
.box h2 {
border: solid 1px;
background-color: aquamarine;
 /* 相对定位，相对于他原先的位置来定位 */
position: relative;
top: 1em;
left: 1em;
      }
</style>
<boyd>
    <div class="box">
        <h2>这是一个标题</h2>
        <p>这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域</p>
    </div>
</boyd>

绝对定位演示

<style>
.box{
width: 15em;
height: 15em;
margin:2em auto;
border: 1px solid #000000;
 /* 绝对定位需要父级或以上级需要一个是相对定位或者是绝对定位 */
position: relative;
}
.box h2 {
border: solid 1px;
background-color: aquamarine;
/* 离它最近的是父级相对定位，所以相对于它父级来定位 */
position: absolute;
/* 如果被定位的元素全部为0，紧贴父级的边缘，会紧贴沾满父级空间 */
top: 0;
left: 0;
right: 0;
bottom: 0;
 width: 7em;
height: 2em;
/* 给元素个高度和宽度，然后给它的外边距设置成自动，它就水平垂直居中 */
 margin: auto;
      }
</style>
<boyd>
    <div class="box">
        <h2>这是一个标题</h2>
        <p>这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域这是内容区域</p>
    </div>
</boyd>

相对定位演示

<style>
/* 固定定位，和绝对定位一样，不过它是始终定位于html */
.box {
width: 15em;
height: 15em;
border: 1px solid #000000;
margin: 2em auto;
/* 转为定位元素 */
position: relative;
}
html {
min-height: 100em;
}
.box h2 {
border: solid 1px;
position: fixed;
right: 1em;
bottom: 1em;
}
</style>
<body>
<div class="box">
<h2>中文网</h2>
<p>挺好的挺好你好啊挺好的挺好你好啊挺好的挺好你好啊挺好的挺好你好啊</p>
</div>
</body>

模态框

HTML部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="gtk.css" />
  </head>
  <body>
    <header>
      <h2>我的博客</h2>
      <button>登录</button>
    </header>
    <div class="modal">
      <div class="back"></div>
      <div class="body">
        <div class="close">关闭</div>
        <form action="" method="POST">
          <table>
            <caption>
              用户登录
            </caption>
            <tr>
              <td><label for="email">邮箱：</label></td>
              <td><input type="email" name="email" id="email" /></td>
            </tr>
            <tr>
              <td><label for="password">密码:</label></td>
              <td><input type="password" name="password" id="password" /></td>
            </tr>
            <tr>
              <td></td>
              <td><button>登录</button></td>
            </tr>
          </table>
        </form>
      </div>
    </div>
  </body>
</html>

css部分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header {
  background-color: aliceblue;
  padding: 0.5em 2em;
  overflow: hidden;
}
header h2 {
  float: left;
}
header button {
  float: right;
  width: 10em;
  height: 2.5em;
}
header button:hover {
  cursor: pointer;
  background-color: #ff;
}
.back {
  background-color: rgb(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.body {
  padding: 1em;
  min-width: 20em;
  border: 1px solid;
  background-color: aqua;
  position: fixed;
  top: 5em;
  left: 30em;
  right: 30em;
}
.modal {
  /* 隐藏 */
  /* display: none; */
}

浮动定位

静态定位，绝对定位，相对定位，固定定位

绝对定位演示

绝对定位演示

相对定位演示

模态框

相关文章