### 标准流

最新推荐文章于 2024-07-18 17:34:14 发布
最新推荐文章于 2024-07-18 17:34:14 发布
阅读量882 收藏 26
点赞数 17
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61469426/article/details/136852224
版权

块元素独占一行 div

行内元素可以一行显示多个 span

浮动（了解，现在基本不用）

让块元素水平排列

属性名：float

属性值：left：左对齐 right：右对齐

    <title>浮动-基本使用</title>
    <style>
                /* 特点：顶对齐，具备行内块特点，浮动的盒子会脱标，不占标准流的位置 */
        .one {
            width: 100px;
            height: 100px;
            background-color: brown;
​
            float: left;
        }
​
        .two {
            width: 200px;
            height: 200px;
            background-color: orange;
            
            /* float: left; */
​
            float: right;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
    <title>浮动-产品区域布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
​
        li {
            list-style: none;
        }
​
        .produce {
            /* margin实现版心居中 */
            margin: 50px auto;
            width: 1226px;
            height: 628px;
            background-color: pink;
        }
​
        .left {    
            float: left;
​
            width: 234px;
            height: 628px;
            background-color: skyblue;
​
        }
​
        .right {   
            float: right;
​
​
            width: 978px;
            height: 628px;
            background-color: brown;
​
        }
​
        .right li {
            float: left;
​
            margin-right: 14px;
            margin-bottom: 14px;
​
            width: 234px;
            height: 300px;
            background-color: orange;
        }
​
        /* 找到第四个和第八个li，去掉右侧的margin */
        .right li:nth-child(4n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <!-- 版心：左右结构，右面：8个产品->8个li -->
    <div class="produce">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
清除浮动

浮动元素会脱标，若父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

方法一：额外标签法

在父元素内容的最后添加一个块级元素，设置css属性clear：both

一般的用来清除浮动的选择器都叫 .clearfix

  <title>清除浮动-额外标签法</title>
    <style>
        .top {
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
        }
​
        .left {
            float: left;
​
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }
​
        .right {
            float: right;
​
            width: 950px;
            height: 300px;
            background-color: orange;
        }
        .bottom {
            height: 100px;
            background-color: brown;
        }
    /*一般的用来清除浮动的选择器都叫 .clearfix*/   
        .clearfix {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
       ******** <div class="clearfix"></div>********
    </div>
    <div class="bottom"></div>
</body>
方法二：单伪元素法

伪元素必须要配合content

在父元素内容的最后添加一个块级元素，设置css属性clear：both

    <title>清除浮动-单伪元素法</title>
    <style>
        .top {
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
        }
​
        .left {
            float: left;
​
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }
​
        .right {
            float: right;
​
            width: 950px;
            height: 300px;
            background-color: orange;
        }
        .bottom {
            height: 100px;
            background-color: brown;
        }
​
        /* 单伪元素法 */
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- <div class="clearfix"></div> -->
    </div>
    <div class="bottom"></div>
</body>
方法三：双伪元素（推荐）
       /* 双伪元素法 */
        /* before 解决外边距塌陷问题 */
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }
​
        .clearfix::after {
            clear: both;
        }

    <title>清除浮动—双伪元素</title>
    <style>
        .top {
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
        }
​
        .left {
            float: left;
​
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }
​
        .right {
            float: right;
​
            width: 950px;
            height: 300px;
            background-color: orange;
        }
        .bottom {
            height: 100px;
            background-color: brown;
        }
        /* 双伪元素法 */
        /* before 解决外边距塌陷问题 */
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }
​
        .clearfix::after {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- <div class="clearfix"></div> -->
    </div>
    <div class="bottom"></div>
</body>
方法四：overflow（溢出隐藏）

给父级标签添加css'属性 overflow：hidden

 <title>清除浮动</title>
    <style>
        .top {
            margin: 10px auto;
            width: 1200px;
            /* height: 300px; */
            background-color: pink;
​
            overflow: hidden;
        }
​
        .left {
            float: left;
​
            width: 200px;
            height: 300px;
            background-color: skyblue;
        }
​
        .right {
            float: right;
​
            width: 950px;
            height: 300px;
            background-color: orange;
        }
        .bottom {
            height: 100px;
            background-color: brown;
        }
​
    </style>
</head>
<body>
    <div class="top ">
        <div class="left"></div>
        <div class="right"></div>
        <!-- <div class="clearfix"></div> -->
    </div>
    <div class="bottom"></div>
</body>

Flex布局（重点，企业）

Flex模型不会产生浮动布局中的脱标现象。

描述属性名
创建flex容器display:flex
主轴对齐方式justify-content
侧轴对齐方式align-items
某个弹性盒子侧轴对齐方式align-self
修改主轴方向flex-direction
弹性伸缩比flex
弹性盒子换行flex-wrap
行对齐方式align-content

Flex-组成

创建flex容器 display:flex

设置方式：给父级标签设置display：flex，子元素可以自动挤压或拉伸

组成部分：

弹性容器

弹性盒子

主轴：默认在水平方向

侧轴/交叉轴：默认在垂直方向

    <title>Flex</title>
    <style>
        .box {
            /* 变成flex模型 */
            display: flex;
​
            height: 300px;
            border: 1px solid #000;
        }
​
        /* 弹性盒子：沿着主轴方向排列 */
        .box div {
            /* 浮动 */
            /* float: left;
            margin: 50px; */
            width: 200px;
            height: 100px;
            background-color: pink ;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
弹性盒子的主轴对齐方式 justify-content
属性值效果
flex-start默认值，弹性盒子从起点开始依次排列
flex-end（不常用）弹性盒子从终点开始依次排列
center弹性盒子沿主轴居中排列
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
    <title>flex-主轴对齐方式</title>
    <style>
        .box {
            display: flex;
            /* flex-start是默认值，弹性盒子从起点开始依次排列 */
            /* justify-content: flex-start; */
​
            /* 弹性盒子从终点开始依次排列，不常用 */
            /* justify-content: flex-end; */
​
            /* 弹性盒子沿主轴居中排列 */
            /* justify-content: center; */
            
            /* 父级剩余的尺寸分配成间距 */
​
            /* space-between 弹性盒子之间的间距相等，两侧没有 */
            /* justify-content: space-between; */
​
            /* space-around 间距出现在弹性盒子两侧，弹性盒子之间的间距是两端间距的2倍 */
            /* justify-content: space-around; */
​
            /* 不论是弹性盒子两侧的间距，还是弹性盒子之间的间距都相等 */
            justify-content: space-evenly;
            height: 300px;
            border: 1px solid #000;
        }
​
        .box div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
弹性盒子的侧轴对齐方式

属性名：

  • align-items :当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

  • align-self ：单独控制某个弹性盒子的侧轴对齐方式 （给弹性盒子设置）

属性值效果
stretch弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center弹性盒子沿侧轴居中排列
flex-start弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列
   <title>flex-侧轴对齐方式</title>
    <style>
        .box {
​
            display: flex;
            /* 若弹性盒子在侧轴方向没有尺寸才能拉伸 */
            /* align-items: stretch; */
            /* align-items: center; */
​
            /* align-items: flex-start; */
            align-items: flex-end;
            height: 300px;
            border: 1px solid #000;
        }
​
        /* 找出第二个div，侧轴居中对齐 */
        .box div:nth-child(2n) {
            align-self: center;
        }
        .box div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
修改主轴方向 flex-direction

主轴默认在水平方向，侧轴默认在垂直方向

属性值效果
row水平方向，从左向右（默认）
column(只记这个，其他基本不用)垂直方向，从上向下
row-reverse水平方向，从右向左
column-reverse垂直方向，从下向上
    <title>flex-修改主轴方向</title>
    <style>
        .box {
            display: flex;
            /* 修改主轴方向 垂直方向，侧轴自动变换到水平方向 */
            flex-direction: column;
​
            /* 主轴在垂直方向，视觉效果：垂直居中 */
            justify-content: center;
​
            /* 侧轴在水平方向，视觉效果，水平居中 */
            align-items: center;
            width: 150px;
            height: 120px ;
            background-color: pink ;
        }
        
        img {
            width: 32px;
            height: 32px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/1.png" alt="">
        <span>媒体</span>
    </div>
</body>

弹性伸缩比 flex

控制弹性盒子的主轴方向的尺寸

属性值 ：整数数字，表示占用父级剩余尺寸的份数

    <title>flex-弹性伸缩比</title>
    <style>
        /* 默认情况下，主轴方向尺寸是靠内容撑开，侧轴默认拉伸 */
        .box {
            display: flex;
​
            height: 300px;
            border: 1px solid #000;
        }
​
        .box div {
            /* height: 100px; */
            background-color: pink;
        }
​
        .box div:nth-child(1) {
            width: 200px;
        }
        
        .box div:nth-child(2){
            flex: 1;
        }
​
        .box div:nth-child(3){
            flex: 2;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
弹性盒子换行flex-wrap

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示

属性值： wrap：换行 nowrap：不换行

写在父级标签中

            flex-wrap: wrap;
            flex-wrap: nowrap;
行对齐方式 align-content
属性值效果
flex-start默认值，弹性盒子从起点开始依次排列
flex-end（不常用）弹性盒子从终点开始依次排列
center弹性盒子沿主轴居中排列
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

写在父级标签中

    <title>flex-行对齐.html</title>
    <style>
        .box {
            display: flex;
            flex-wrap: wrap;
            /* flex-wrap: nowrap; */
            /* align-content: flex-start; */
            align-content: space-evenly;
            height: 300px;
            border: 1px solid #000;
        }
​
        .box div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
​
    </div>
</body>
又要开始创造垃圾啦
关注
  • 17
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AWG#线规及其载流能力和电阻值
We are all in the gutter, but some of us are looking at the stars.
11-05 3万+
AWG=American Wring Gauge. 美国线规
#define 的使用
gdjason的博客
04-03 2794
前言 1、本人QQ – 330952038 欢迎一起学习交流。 2、#define 的用法，相信大家有用过，本文抱着学习的态度来重新理解#define(宏定义)正文 一、不带参数的宏定义 #define BUF_MAX_LEN 100 // 定义 BUF_MAX_LEN为 100，此时就可以把BUF_MAX_LEN当做100使用。 eg: unsigned cha
C++预处理(一) —— #include
quanwei的博客
12-16 1580
C++的预处理（Preprocess），是指在C++程序源代码被编译之前，由预处理器（Preprocessor）对C++程序源代码进行的处理。这个过程并不对程序的源代码进行解析，但它把源代码分割或处理成为特定的符号用来支持宏调用。 #include 包含头文件 头文件通常以.h结尾,其 内容可使用#include预处理器指令包含到程序中，头文件中一般包含: 函数原型与全局变量，形式常有下面两种...
#include＜iostream＞
小秋 AI SLAM 入门实战教程
05-09 4217
库提供了C++程序中用于处理标准输入/输出流的基本功能。这个库中定义了一些重要的类和对象，以及与输入/输出相关的函数。类：这是一个输入流类，用于从输入设备（如键盘、文件等）读取数据。类：这是一个输出流类，用于向输出设备（如屏幕、文件等）写入数据。这些类分别用于处理字符串流、文件输入流和文件输出流。类型的对象，表示标准错误流。类型的对象，表示标准输入流（通常是键盘输入）。类型的对象，表示标准输出流（通常是屏幕输出）。库还包括了其他与流处理相关的类，例如。类型的对象，表示标准日志流。类似，但用于输出日志消息。
[c++]C语言头文件#include总结
天射手座的博客
06-06 2308
#include<stdio.h>:standard input&output标准输入输出头文件 #include<stdlib.h>:standard library标准基本函数库，包涵C，C++最常用的系统函数 #include<graphics.h>:图形库，分为像素函数、直线、线型、多变形，填充函数等 #include<math.h>...
8.1 C++ 标准输入输出流
CSDN
10-21 6762
C/C++语言是一种通用的编程语言，具有高效、灵活和可移植等特点。C语言主要用于系统编程，如操作系统、编译器、数据库等；C语言是C语言的扩展，增加了面向对象编程的特性，适用于大型软件系统、图形用户界面、嵌入式系统等。C/C++语言具有很高的效率和控制能力，但也需要开发人员自行管理内存等底层资源，对于初学者来说可能会有一定的难度。
c++中 #include 用法解析
欢迎关注，共同进步！
03-01 8872
这里需要注意include的两种不同写法，#include<***.h> 和 #include"***.h" 采用"< >"方式进行包含的头bai文件表示让编译器在编译器的预设标准路径下去搜索相应的头文件，如果找不到则报错。 例如：VS2008的安装目录\Microsoft Visual Studio 9.0\VC\include下面就包含了标准库的头文件。 第二种方式表示先在工程所在路径下搜索，如果失败，再到系统标准路径下搜索。 所以，特别要注意的是，如果是标准库头文件，那么既
C++标准流操作
热门推荐
Cupido
01-11 2万+
COUT #include <iostream> using namespace std; int main( ) { char str[] = "Hello C++"; cout << "Value of str is : " << str << endl; } CIN #include <iostream> using namespace std; int main( ) { char name[50];
#Linux#进程间通信# 管道(pipe)-标准流管道pipe
潇汀
12-27 1万+
在#Linux#进程间通信# 管道(pipe)-普通管道pipe中，我们很容易可以看出普通管道一是单工，即只能单向传输，而标准流管道针对匿名管道PIPE一系列封装。返回文件流。只不过返回的文件流无法使用游标/偏移量(offset)相关函数，如lseek等。 标准流管道带有缓冲区，函数如下： FILE* popen(char* command ,char* type); command：指向...
#和##使用
WWHHJJ1的专栏
09-24 871
关于#和## 在C语言的宏中，#的功能是将其后面的宏参数进行字符串化操作（Stringfication），简单说就是在对它所引用的宏变量 通过替换后在其左右各加上一个双引号。比如下面代码中的宏： #define WARN_IF(EXP) do{ if (EXP) fprintf(stderr, "Warning: " #EXP "/n"); } while(0)
Exercici de Sistemes difusos_#python_#document_
10-03
2. **Python模块和包**：了解如何导入和使用Python标准库或第三方库，如`threading`或`asyncio`。 3. **多线程和并发**：理解线程的概念，如何创建和管理线程，以及如何避免竞态条件和死锁。 4. **异步编程**：熟悉...
FSharp.AsyncExtensions:[已归档] F# 中异步编程的扩展
06-13
该库使用 F# 异步工作流和 F# 代理（标准 F# 库中的MailboxProcessor类型）为异步编程实现了各种扩展。 它定义了异步序列，表示返回多个值的异步操作（例如从块中读取流中的数据）、几个可重用的 F# 代理和许多扩展...
jee#spring#hibernate#stru2ct
05-31
1. **Java Enterprise Edition (JEE)**：这是一个由Java Community Process（JCP）定义和维护的开放标准，用于构建企业级应用程序。JEE提供了诸如Web服务、事务处理、安全性和数据库连接等服务，旨在简化开发过程并...
FRest:如何使用 F# 和 WebAPI 和 RestSharp 编写简单的 REST 服务的基本演示
06-20
在现代软件开发中，REST（Representational State Transfer）已经成为构建Web服务的标准方法。本教程将介绍如何使用F#编程语言，结合WebAPI框架和RestSharp库，来创建一个简单的RESTful服务。F#是一种强大的函数式...
foundation of F#
09-25
6. **F#库**：F#标准库包含丰富的数据结构、数学函数和操作符，支持异步工作流、序列和集合操作，以及与.NET Framework的深度集成。这些库使得F#在各种领域都能发挥高效能。 7. **用户界面**：F#可以与Windows ...
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 307
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
CSS实现从上往下过渡效果
最新发布
Rverdoser的博客
07-18 146
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 116
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1280
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
#include"iostream"
12-26
`#include <filename>`用于包含标准库的头文件，例如`#include <iostream>`用于包含输入输出流的头文件。这样可以在程序中使用标准输入输出流对象，如`std::cout`和`std::cin`。 `#include "filename"`用于包含用户...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值