(14)从零开始学前端(学习笔记)-JavaWeb-CSS-溢出、浮动

LHW · 发表于 2022-4-5 10:42

本帖最后由 LHW 于 2022-4-6 07:33 编辑

(14)从零开始学前端(学习笔记)-JavaWeb-CSS-溢出、浮动
本人自学两年，想通过笔记来帮助一些刚入门的小白快速的了解前端知识，如果喜欢这个系列，可以点赞评论支持一下嘛，谢谢各位啦

纯手打非复制，如有错误可以在评论区纠正，感谢支持

--续借上集--

前言
   今天的我们需要学习CSS溢出和CSS浮动，CSS浮动在今后的作用会比较大，需要大家能够掌握这方面的知识，希望大家在学习完之后能够记录一下，以防笔记丢失...

CSS溢出
   1. 什么是CSS溢出？
            在HTML页面中，定义一个div的且固定了宽高，在div中添加文字，如果文字数量大多，区域无法容纳文字。就会溢出，这个溢出即影响了美观又影响了文字的可读性。

   2. 如何解决CSS溢出？
            我们只需要给div一个属性控制div内置滚动条，即可解决这种问题，overflow属性可以设置一下值：

visible
hidden
scroll
auto

visible属性为overflow的默认属性，溢出没有被覆盖，且在元素外展示；hidden属性是将溢出的内容隐藏起来，但在div内部的内容会显示；scroll属性给div添加滚动条，无论是否溢出；auto属性给div添加滚动条，当溢出的时候添加。
如图div1是默认值，溢出直接显示到了div外部，div2是hidden值，溢出的内容直接被隐藏起来，div3是scroll值直接给div添加滚动条，因此横向滚动条也添加了，div4是auto值当内容溢出时再添加滚动条，因此只添加了纵向滚动条。

[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>CSS溢出</title>
  <style>
    .div1 {
      width: 500px;
      height: 135px;
      background-color: rgb(144,144,144);
      overflow: visible;  /* 默认值 */
    }
    .div2 {
      width: 500px;
      height: 135px;
      background-color: rgb(144,144,144);
      overflow: hidden;  /* 溢出隐藏 */
    }
    .div3 {
      width: 500px;
      height: 135px;
      background-color: rgb(144,144,144);
      overflow: scroll;  /* 始终添加滚动条 */
    }
    .div4 {
      width: 500px;
      height: 135px;
      background-color: rgb(144,144,144);
      overflow: auto;  /* 溢出时添加滚动条 */
    }
  </style>
</head>
<body>
  <div class="div1">吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解</div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div class="div2">吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解</div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div class="div3">吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解</div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div class="div4">吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解</div>
</body>
</html>

3. 单独控制的X轴Y轴滚动条
如果还是对上面的overflow属性值不满意或者对，滚动条的样式有所要求的话，想单独操作一个方向的滚动条的话，就可以用overflow-x，overflow-y这两个属性来定义。

[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>CSS溢出x,y轴单独控制</title>
  <style>
    .div1 {
      width: 500px;
      height: 135px;
      background-color: rgb(144, 144, 144);
    }

    .div2 {
      width: 500px;
      height: 135px;
      background-color: rgb(144, 144, 144);
      overflow-x: hidden;
      overflow-y: scroll;
    }

    .div3 {
      width: 500px;
      height: auto;
      background-color: rgb(144, 144, 144);
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <div class="div1">
    吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解
  </div>
  <br />
  <br />
  <br />
  <br />
  <br />
  <div class="div2">
    吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解
  </div>
  <br />
  <br />
  <br />
  <br />
  <br />
  <div class="div3">
    吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解，吾爱破解
  </div>
</body>

</html>

4. overflow的所有属性

属性	描述
overflow	规定如果内容溢出元素框会发生什么情况
overflow-x	规定在元素的内容区域溢出时如何处理内容的左/右边缘
overflow-y	指定在元素的内容区域溢出时如何处理内容的上/下边缘

CSS浮动
   1. 什么是CSS浮动？
            CSS浮动是向或者右碰到可视化浏览器边缘为止，可以改变HTML原本的排列方式，从上到下排列可以变成从左向右或从右向左排列。

   2. CSS浮动属性值：
            CSS浮动我们使用float属性来定义，其属性值可以为四个：

left
right
none
inherit

如图，div1是没有使用浮动属性的，默认从上到下排列，div2和div3使用了left值(左浮动)，可以看出它们的排列方式从上到下更改成了从左到右，div4和div5使用了right值(右浮动)，同样它们的排列方式从上到下更改成了从右到左，div7使用了inherit值(继承父类浮动)因此继承了父类div6的左浮动。

[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>float浮动</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .div0 {
      width: 250px;
      height: 250px;
      text-align: center;
      line-height: 250px;
      font-size: 18px;
      font-weight: bold;
      border: 2px solid #909090;
      background-color: #cecece;
    }
    .div2, .div3 {
      float: left;
    }
    .div4, .div5 {
      float: right;
    }
    .div6 {
      width: 500px;
      height: 500px;
      line-height: 500px;
      float: right;
    }
    .div7 {
      float: inherit;
    }
  </style>
</head>

<body>
  <div class="div0 div1">div1</div>
  <br/>
  <div class="div0 div2">div2</div>
  <div class="div0 div3">div3</div>
  <div class="div0 div4">div4</div>
  <div class="div0 div5">div5</div>
  <div class="div0 div6">div6
    <div class="div0 div7">div7</div>
  </div>
  
  </div>
</body>

</html>

   3. CSS浮动清除：
            我们在使用CSS浮动的时候，如果只想让固定的两个div浮动，其他的div会容易重叠在一起，这个时候，我们就要用CSS清除浮动。
            清除CSS浮动用clear属性，下面是clear中的所有值：

left
right
both
none
inherit

在clear属性中left值是清除左浮动，right值是清除右浮动，both值是清除左右两侧浮动，none值为默认值允许两侧的浮动，inherit值是继承父类的clear属性值。
如图，div1没有使用浮动，div2和div3使用了左浮动，div4和div5使用了右浮动并且div4清除了左浮动，所以div2、div3并没有和div4、div5显示在一行内，而是换行显示，在div5后面添加了一个clear，在clear中定义属性clear且属性值为both，因此div6和div7并没有受到div4和div5的影响，div8前面并没有清除右浮动，因此在div6和div7同行显示右浮动。

[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>CSS浮动清除</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .div0 {
      width: 235px;
      height: 235px;
      text-align: center;
      line-height: 235px;
      font-size: 18px;
      font-weight: bold;
      border: 2px solid #909090;
      background-color: #cecece;
    }
    .div2, .div3, .div6, .div7 {
      float: left;
    }
    .div4, .div5, .div8 {
      float: right;
    }
    .div4 {
      clear: left;
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="div0 div1">div1</div>
  <div class="div0 div2">div2</div>
  <div class="div0 div3">div3</div>
  <div class="div0 div4">div4</div>
  <div class="div0 div5">div5</div>
  <div class="clear"></div>
  <div class="div0 div6">div6</div>
  <div class="div0 div7">div7</div>
  <div class="div0 div8">div8</div>
  </div>
</body>

</html>

总结

本文参考：https://www.w3school.com.cn/css/css_overflow.asp CSS溢出
https://www.w3school.com.cn/css/css_float.asp、https://blog.csdn.net/baidu_24256693/article/details/80239594 CSS浮动

本文主要内容：CSS溢出和CSS浮动，后续也会推出续集。希望大家能持续关注

谢谢大家能够看到这里，如果觉得对你有帮助的话，可以点赞评论支持一下嘛谢谢各位啦

NJSYDG · 发表于 2022-4-5 11:00

提示: 作者被禁止或删除内容自动屏蔽

iYoloPPD · 发表于 2022-4-5 11:14

超出部分隐藏

xiangzz · 发表于 2022-4-5 11:53

想学习post和get，是属于哪一类呢？前端？后端？

zixudaoxian · 发表于 2022-4-5 13:18

非常详细，技术大牛！

jiedao747 · 发表于 2022-4-5 13:37

本帖最后由 jiedao747 于 2022-4-5 13:43 编辑

有段时间公众号一直给我推前端的教程，才开始打算接触前端的，奈何那种羞涩。网上找的免费教程。

半途而废过。

后来想写一个本地导航的时候才又重新拿起来。

那时候用的一个叫hb的编辑器。

那个编辑器当时觉得真的太偷懒了，什么都提示到位。

后来拿notepad3毛线都写不出来。

那时候就打算放弃那个编辑器器了。

但后来没编辑器更头疼的来了。单词记不熟。

下过决心好好记一下单词。

然后忙起啦又放弃一阵子。最后忘了。

现在用的vs同样一个字母给出一堆提示。

然而想法已经和之前大不相同了。

真香啊

REALIVE · 发表于 2022-4-5 15:04

用心讨论，共获提升！

qwe12079 · 发表于 2022-4-5 15:24

谢谢分享，先收藏了，马上就学到了

y12345 · 发表于 2022-4-5 15:47

jiedao747 发表于 2022-4-5 13:37
有段时间公众号一直给我推前端的教程，才开始打算接触前端的，奈何那种羞涩。网上找的免费教程。

半途而 ...

哈哈哈，真实

LXS · 发表于 2022-4-5 17:23

每天来必看，复习一下

帐号		自动登录	找回密码
密码			注册[Register]

NJSYDG NJSYDG 当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	NJSYDG 发表于 2022-4-5 11:00 提示: 作者被禁止或删除内容自动屏蔽
	【吾爱破解论坛总版规】 - [让你充分了解吾爱破解论坛行为规则]
	回复支持举报

[学习记录] (14)从零开始学前端(学习笔记)-JavaWeb-CSS-溢出、浮动

免费评分