Day 29 绝对定位补充什么时候使用定位 fixed和absolute的区别属性值的四步计算过程伪类选择器的补充 contenteditable属性和table元素了解

最新推荐文章于 2024-09-30 15:42:36 发布

Crimson418

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量95

点赞数

文章标签： servlet 前端 html

本文链接：https://blog.csdn.net/weixin_70432149/article/details/126727136

版权

练习一效果：

练习二效果：

html：

<!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>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <!-- 
什么时候使用定位：
    1.元素出现在天马行空的位置
    2.元素是否存在，不影响其他元素的排列
    3.单个元素在某个区域内水平垂直居中
fixed和absolute的区别：
    fixed是绝对定位的一种，它们的参考系不一样
    absolute参考有定位的父元素
    fixed参考视口(viewport)
 -->
    <!-- 练习一 -->
    <img class="page" src="./assets/page.jpg" alt="" />
    <div class="modal">
      <img class="login" src="./assets/login.jpg" alt="" />
    </div>
    <div class="adv">
      <img class="code" src="./assets/r_code.jpg" alt="" />
    </div>

    <!-- 练习二 -->
    <!-- <div class="item">
      <a href="#">
        <img src="./assets/cover.png" alt="" />
      </a>
      <div class="aside">
        <div class="number">118万</div>
        <div class="date">2021-11-23</div>
      </div>
      <div class="modal">
        <a href="#" class="play"></a>
      </div>
      <div></div>
    </div> -->

    <!-- 属性值计算过程 
  css属性计算过程：从无属性值 到 每个属性都有值
  过程：
     1.确定声明值 ：参考样式表中没有冲突的声明，作为css属性值 
          如a元素有默认color：-webkit-link
          解决:a{
            text-decoration:none;
            color:inherit;  inherit是继承的意思
          }
     2.层叠冲突 ：对样式表有冲突的声明使用层叠规则，确定css属性
          比较重要性：作者样式高于浏览器默认样式
          比较特殊性：权重问题
          比较源次序：代码靠后的覆盖代码靠前的
     3.使用继承 ：对仍然没有值的属性，若可以继承，则继承父元素的值
     4.使用默认值 ：如background-color:transparent
-->
    <!-- 伪类选择器拓展
    :link 选中未访问过的超链接 :visited 选中访问过的超链接
    :hover选中鼠标移入的元素 :active 选中鼠标按下的元素 顺序：l v h a
    :first-child 第一个子元素 :last-child 最后一个子元素 :nth-child(an+b)
    选中an+b个元素 :first-of-type 第一个指定类型的元素
    contenteditable属性
    该属性是一个布尔属性，可以设置到任何元素上，它可以让该元素变为可编辑的状态
    在实际开发中，通常用于制作富文本框
    table元素
    用于表达一个表格，受css的影响，现在很少使用 -->
  </body>
</html>

css：

/* 练习一 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.page {
  width: 100%;
}
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
}
.login {
  /* 绝对定位居中 */
  position: absolute;
  width: 300px;
  height: 150px;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -75px;
}
.adv {
  width: 165px;
  height: 250px;
  right: 0;
  position: fixed;
  top: 50%;
  margin-top: -125px;
  background: url(./assets/r_dj.png) no-repeat;
  padding-top: 145px;
  text-align: right;
  z-index: 1;
}
.adv .code {
  width: 100px;
  height: 100px;
}
/* z-indx越大越靠近用户   只对定位元素有效 */

/* 练习二 */
/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.item {
  width: 230px;
  height: 140px;
  margin: 30px auto;
  position: relative;
}
.item img {
  width: 230px;
  height: 140px;
}
.item .aside {
  position: absolute;
  width: 100%;
  height: 20px;
  font-size: 12px;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  line-height: 20px;
  padding: 0 10px;
}
.number {
  float: left;
}

.date {
  float: right;
}
.number::before {
  content: "";
  display: inline-block;
  /* 变成行块盒可以设置宽高，又不用独占一行 */
/* background: url(./assets/icons.png) no-repeat;
  width: 20px;
  height: 15px;
  background-position: -253px -61px;
}
.modal {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.play {
  position: absolute;
  background: url(./assets/icons.png) no-repeat;
  width: 42px;
  height: 42px;
  background-position: -191px -63px;
  left: 50%;
  top: 50%;
  margin-top: -21px;
  margin-left: -21px;
} */