三、CSS基础样式（下）

最新推荐文章于 2024-05-31 14:44:29 发布

HJHO

最新推荐文章于 2024-05-31 14:44:29 发布

阅读量81

点赞数

分类专栏： CSS 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_49576031/article/details/120353215

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.CSS Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

浮动元素之后的其他元素将围绕当前浮动元素显示。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

代码例👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>float浮动</title>
  <style>
    div{
      width: 200px;
      height: 200px;
    }
    .box1{
      color: white;
      background-color: green;
      float: left;
    }
    .box2{
      background-color: pink;
    }
    .box3 img{
      width: 40px;
      height:40px;
      float: left;
    }
  </style>
</head>
<body>
  <div class="box1">会直接脱离文档流，但不脱离文字流</div>
  <div class="box2"></div>
  <div class="box3"><img src=".//imgs/avatar2.png" alt="图像">我是一只小小小小鸟，想要飞怎么也飞不高，寻寻秘密宣召月实打实阿达啊大大大所</div>
</body>
</html>

图例👇

2.CSS 布局 - Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。（单行文本的省略号等）。

**常用的属性值**
visible 默认值	内容不会被修剪，会呈现在元素框之外	overflow:visible ;
hidden	内容会被修剪，并且其余内容是不可见的。	overflow:hidden ;
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。	overflow:scroll ;
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。	overflow:auto ;

代码例👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>overflow</title>
  <style>
    li{
      width: 200px;
      height: 50px;
      line-height: 30px;
      list-style: none;
      border: 1px solid pink;
    }
    .visible{
      overflow: visible;
    }
    .hidden{
      overflow: hidden;
    }
    .scroll{
      overflow: scroll;
    }
    .auto{
      overflow: auto;
    }
    h4{
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <ul>
    <h4>visible</h4>
    <li class="visible"> visible 默认值。内容不会被修剪，会呈现在元素框之外。</li>
    <h4>hidden</h4>
    <li class="hidden">hidden  内容会被修剪，并且其余内容是不可见的。</li>
    <h4>scroll</h4>
    <li class="scroll">scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</li>
    <h4>auto</h4>
    <li class="auto">auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</li>
  </ul>
</body>
</html>

图例👇

3.CSS Position(定位)

position 属性指定了元素的定位类型。

元素可以使用的顶部 top，底部bottom，左侧left和右侧right属性定位

属性值：

名称	特点
static默认的【可忽略】	符合正常的文档流对象。
fixed	与文档流无关，固定在浏览器窗口，不占据空间，会重叠。会受到 top, bottom, left, right影响。
relative	符合正常的文档流对象，相对其以前的位置，会重叠。通常情况下：相对定位元素经常被用来作为绝对定位元素的容器块（子绝父相）。【会受到 top, bottom, left, right影响。】
absolute	最近的已定位[ position: static;除外]父元素。与文档流无关，不占据空间，会重叠。如果元素没有已定位的父元素，那么它的位置相对于当前浏览器窗口。【会受到 top, bottom, left, right影响。】
sticky	在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。【会受到 top, bottom, left, righ 之一的影响。】

代码例👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>static</title>
</head>
<style>
    div{
      width: 200px;
      height: 200px;
    }
    .maxbox{
      height: 1300px;
    }
    .box1{
      position: fixed;
      background : blue;
      top: 0;
      left: 50%;
    }
    .box2{
      position: relative;
      background-color: pink;
    }
    .box3{
      position: absolute;
      left: 50%;
      top: 300px;
      background: yellow;
    }
    .box4{
      position: sticky;
      top: 0;
      background-color: orange;
    }
</style>
<body>
  <div class="maxbox">
    <div class="box1">fixed</div>
    <div class="box2">relative</div>
    <div class="box3">absolute</div>
    <div class="box4">sticky</div>
  </div>
</body>
</html>

图例👇

4.CSS z-index(定位叠加层级)

属性指定了一个元素的堆叠顺序。

取值是一个数字，数字值越大就显示在最上面，数字值越小就显示在最下面。

注意:依赖于position属性，没有position属性那么z-index属性没有效果。

代码例👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Z-index</title>
  <style>
    div{
      width: 200px;
      height: 200px;
    }
    .text1{
      position: relative;
      background-color: yellow;
      z-index: 1;
    }
    .text2{
      position: relative;
      background-color: pink;
      z-index: 2;
      top: -80px;
    }
    .text3{
      position: absolute;
      background-color: aquamarine;
      z-index: 3;
      top: 30px;
    }
  </style>
</head>
<body>
  <div class="text1">zindex1</div>
  <div class="text2">zindex2</div>
  <div class="text3">zindex3</div>
</body>
</html>

图例👇

无奈源于不够强大

HJHO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三、CSS基础样式（下）

1.CSSFloat(浮动)CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。浮动元素之后的其他元素将围绕当前浮动元素显示。元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边：代码例????<!DOCTYPE html>&l
复制链接

扫一扫