🟢CSS学习笔记-(二)

GitHub 源码
浮动
定位
动画
总结

GitHub 源码

浮动

元素层级分类

块级元素
- h1~h6(markdown 中不是 )
- p
- div
- ui li
行内元素
- span
- a
- img
- strong
块级元素可以包含行内元素,但反之不行.

display

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--
      display
        block 块元素
        inline 行内元素
        inline-block 行内块元素
        none 不显示
     -->
    <style>
      div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline;
      }
      span {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div>div块元素</div>
    <span>span行内元素</span>
  </body>
</html>

效果图

float

float
- left
- right
浮动效果
- (可以让元素自动排版,但是可能会使结构错位塌陷)
- 在标准文档流之外.

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="./style.css" />
  </head>

  <body>
    <div id="father">
      <div class="layer01">
        <img src="./images/3086109-ab66333e049109fc.webp" alt="" />
      </div>
      <div class="layer02">
        <img src="./images/3086109-e073f9a39c4bafe1.webp" alt="" />
      </div>
      <div class="layer03">
        <img src="./images/f0bcea9ca2acb59b4e97e3f9830d9c44.gif" alt="" />
      </div>
      <div class="layer04">
        浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到外层边界.
      </div>
    </div>
  </body>
</html>

style.css

div {
  margin: 10px;
  padding: 5px;
}

#father {
  border: 1px solid #000;
}

.layer01 {
  border: 1px dashed #f00;
  display: inline-block;
  float: left;
}
.layer02 {
  border: 1px dashed #00f;
  display: inline-block;
  float: left;
}
.layer03 {
  border: 1px dashed #0f0;
  display: inline-block;
  float: left;
}
.layer04 {
  border: 1px dashed #666;
  font-size: 12px;
  line-height: 23px;
  display: inline-block;
}

效果图

Clear

清除(左/右)浮动效果,使元素像是标准文档流一样向下排布(但是并不在标准文档流).
right
left
both 两侧
none 不清除
两边都不能有浮动元素(图四样式)
.layer04 {
clear: both;
}

Overflow

溢出
hidden 越界部分隐藏(使用多)
scroll 越界的话显示滚动条
auto

父级边框塌陷问题

问题

问题就是内部的元素超出父级的边框(越界).
float 导致漂浮元素另成一层,即使 clear 也不按照标准文档流排布.
像是下面这种,父级的框圈不住子级 float 的元素.
几种解决方案参下:

扩大父级元素

简单粗暴,直接把父级元素拉大,但是很拉胯.

增添空 div

在漂浮元素下面(一定要是下面)添加空 div,然后设置属性 clear.

<div id="father">
  <div class="layer01">
    <img src="./images/3086109-ab66333e049109fc.webp" alt="" />
  </div>
  <div class="layer02">
    <img src="./images/3086109-e073f9a39c4bafe1.webp" alt="" />
  </div>
  <div class="layer03">
    <img src="./images/f0bcea9ca2acb59b4e97e3f9830d9c44.gif" alt="" />
  </div>
  <div class="layer04">
    浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到外层边界.
  </div>
  <!-- 方案二 -->
  <div id="clear"></div>
</div>

/* 方案二 */
#clear {
  clear: both;
  margin: 0;
  padding: 0;
}

原理就是在箭头这里设置了没有边框的空元素,然后让它的两边都不能有 float 元素,所以父级的边框框住这个空 div 的同时也框住了 float 元素.

自动溢出

在父类里添加 overflow 属性
(因为父级边框并没有设边界大小,所以其大小就是 div 可容纳的包括浮动内部元素的范围大小)

#father {
  border: 1px solid #000;
  overflow: hidden;
}

效果:

添加伪类(优)

此方法类似第二个添加空 div,就是利用伪类在父类后面添加空标签后 clear
/* 方案四 */
#father:after {
content: "";
display: block;
clear: both;
}

小结

定位

position
- relative
- absolute
- fix

相对定位

position: relative;
- left
- right
- bottom
- top
注意偏移是相对那个边来说,而不是偏移向那个方向.

#first {
  border: 1px dashed rgb(172, 96, 96);
  position: relative; /* 相对定位 */
  top: -20px; /* 向上偏移20px */
  left: 20px; /* 向左偏移20px */
}

元素仍在标准文档中,只不过相对原先位置做了偏移
- 此元素的信息仍为原先位置的信息(呈现与数据不同)
- 比如这里偏移后父级边框框的仍然是先前位置的那个元素.

例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        width: 300px;
        height: 300px;
        padding: 10px;
        border: 1px solid currentColor;
      }
      a {
        width: 100px;
        height: 100px;
        text-decoration: none;
        background: violet;
        line-height: 100px;
        text-align: center;
        color: white;
        display: block;
      }
      a:hover {
        background: blue;
      }
      .a2,.a4{
        position: relative;
        top: -100px;
        left: 200px;
      }
      .a5{
        position: relative;
        top: -300px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <a href="#" class="a1">链接1</a>
      <a href="#" class="a2">链接2</a>
      <a href="#" class="a3">链接3</a>
      <a href="#" class="a4">链接4</a>
      <a href="#" class="a5">链接5</a>
    </div>
  </body>
</html>

绝对定位

position:absolute;
基于上下左右进行定位.
- 父级元素没有定位时,是相对于浏览器进行定位.
- 父级元素定位时,是相对于父级元素进行定位.(会用到)
在父级范围内偏移(超出父级的内容不会显示)
原来位置不会被保留,而且不在标准文档流中.

例子

#father {
  border: 1px solid #666;
  /* 这里父级元素虽然用了相对定位了,但是并没动,子级元素用来作绝对定位. */
  position: relative;
}
#first {
  border: 1px dashed rgb(172, 96, 96);
  /* 相对于父级元素左端定位 */
  position: absolute;
  left: 50px;
}

固定定位

position:fix;
把元素固定到浏览器某个位置不动.

例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 2000px;
      }
      div:nth-of-type(1) {
        width: 100px;
        height: 100px;
        background: tomato;
        /* 绝对定位 */
        position: absolute;
        right: 0;
        bottom: 0;
      }
      div:nth-of-type(2) {
        width: 50px;
        height: 50px;
        background: springgreen;
        /* 固定定位 */
        position: fixed;
        right: 0;
        bottom: 0;
      }
    </style>
  </head>
  <body>
    <div>div1</div>
    <div>div2</div>
  </body>
</html>

绝对定位会随着页面滚动而移动,固定定位则不会.

z-index

z-index: 0;
默认是 0,最高无限,类似 PS 的图层堆叠效果.
- (只有使用定位效果的元素才有层级)

例子

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="./css/index.css" />
  </head>
  <body>
    <div id="content">
      <ul>
        <li><img src="./images/1.jpg" alt="" /></li>
        <li class="tip-text">Weidows-学习中...</li>
        <li class="tip-bg"></li>
        <li>时间: 2020年12月20日09:51:29</li>
        <li>地点: Hebau</li>
      </ul>
    </div>
  </body>
</html>

css

#content {
  width: 720px;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  font-size: 30px;
  border: 1px solid red;
}

ul,
li {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

/* 这个的目的是让下面的子元素相对这个父级元素定位 */
#content ul {
  position: relative;
}

.tip-text,
.tip-bg {
  position: absolute;
  width: 100%;
  height: 40px;
  top: 40px;
}

.tip-text {
  color: aqua;
  z-index: 5;
}

.tip-bg {
  background: #000;
  opacity: 0.5;
}