CSS 标准流 浮动 Flex布局

目录

  • 1. 标准流
  • 2. 浮动
    • 2.1 清除浮动
  • 3. Flex 布局
    • 3.1 Flex 组成
    • 3.2 Flex 布局 - 主轴与侧轴对齐方式
      • 3.2.1 主轴对齐方式
      • 3.2.2 侧轴对齐方式
    • 3.3 Flex 布局 - 修改主轴方向
    • 3.4 Flex 布局 - 弹性伸缩比
    • 3.5 Flex 布局 - 弹性盒子换行
    • 3.6 Flex 布局 - 行对齐方式

1. 标准流

标准流：也称文档流，指的是标签在页面中默认的排布规则。例如：块元素独占一行，行元素可以一行显示多个。

2. 浮动

作用：让块元素水平排列。

属性名：float

属性值描述
left左对齐
right右对齐

例如：

<style>
	/* 特点：顶对齐，具备行内块显示特点 */
	.one {
		width: 100px;
		height: 100px;
		background-color: red;
		float: left;
	}
	.two {
		width: 200px;
		height: 200px;
		background-color: blue;
	}
</style>
<body>
	<div class="one">这是one块级元素</div>
	<div class="two">这是two块级元素</div>
</body>

页面效果：
在这里插入图片描述

浮动特点

  • 浮动的盒子会脱离标准流的控制（脱标），不再占用标准流的位置。
  • 浮动后盒子具备行内块特点。
  • 浮动后盒子顶对齐。
  • 父级宽度不够，浮动的子级会换行。

2.1 清除浮动

场景：如果父级没有高度，子级使用了浮动，就会脱标，不再占用标准流位置，那么就无法撑开父级高度，那就可能导致页面布局错乱。

例如：

<!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>
        /* 特点：顶对齐，具备行内块显示特点 */
        .one {
            width: 300px;
            background-color: red;
            
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="one">
        这是one块级元素
        <div class="two">这是two块级元素</div>
    </div>
</body>
</html>

页面效果：
在这里插入图片描述

解决方法：清除浮动

  • 额外标签法：在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both（清除两侧浮动的影响）
  • 单伪元素法：通过伪元素选择器，在父元素的最后添加一个块级元素，设置 CSS 属性 clear: both
<style>
.clearfix::after {
	content: "";
	display: block;
	clear:both;	
}
</style>
  • 双伪元素法（推荐）：在父级的开头和结尾都加标签
<style>
/* 防止外边距塌陷 */
.clearfix::before,
.clearfix::after {
	content: "";
	display: table;
}
/* 清除浮动效果 */
.clearfix::after {
	clear: both;
}
</style>
  • overflow法：父元素添加 CSS属性 overflow: hidden（溢出隐藏）

3. Flex 布局

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。Flex 模型不会产生浮动布局中的脱标现象，布局网页更简单、更灵活。

3.1 Flex 组成

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

组成部分：

  • 弹性容器：设置了display: flex的父元素
  • 弹性盒子：在弹性容器中的盒子，沿着主轴方向排列
  • 主轴：默认在水平方向
  • 侧轴/交叉轴：默认在垂直方向

3.2 Flex 布局 - 主轴与侧轴对齐方式

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

3.2.1 主轴对齐方式

属性名：justify-content

属性值描述
flex-start默认值，弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列
center弹性盒子沿主轴局中排列
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

例如：

<!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>
        /* 特点：顶对齐，具备行内块显示特点 */
        .one {
            height: 600px;
            border: 1px black solid;
            display: flex;
            justify-content: space-evenly;
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
    </div>
</body>
</html>>

页面效果：
在这里插入图片描述

3.2.2 侧轴对齐方式

属性名：

  • align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
  • align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
属性值描述
stretch弹性盒子沿着轴线被拉伸至铺满容器（弹性盒子没有设置轴线方向尺寸才拉伸）
center弹性盒子沿侧轴局中排列
flex-start弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列

例如：

<!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>
        /* 特点：顶对齐，具备行内块显示特点 */
        .one {
            height: 600px;
            border: 1px black solid;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .two:nth-child(3)
        {
            width: 200px;
            height: 200px;
            background-color: pink;
            align-self: flex-start;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
    </div>
</body>
</html>>

页面效果：
在这里插入图片描述

3.3 Flex 布局 - 修改主轴方向

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

属性名：flex-direction

属性值描述
row水平方向，从左向右（默认）
column垂直方向，从上向下
row-reverse水平方向，从右向左
column-reverse垂直方向，从下向上

注：当我们修改主轴为垂直方向时，侧轴自动变为水平方向

例如：

<!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>
        /* 特点：顶对齐，具备行内块显示特点 */
        .one {
            height: 1000px;
            border: 1px black solid;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            /* 修改主轴方向为自上向下 */
            flex-direction: column;
        }
        .two {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px black solid;
        }
        .two:nth-child(3)
        {
            width: 200px;
            height: 200px;
            background-color: pink;
            align-self: flex-start;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
    </div>
</body>
</html>>

页面效果：
在这里插入图片描述

3.4 Flex 布局 - 弹性伸缩比

作用：控制弹性盒子的主轴方向尺寸。

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

3.5 Flex 布局 - 弹性盒子换行

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

属性名：flex-wrap

属性值描述
wrap换行
nowrap不换行（默认）

例如：

<!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>
        /* 特点：顶对齐，具备行内块显示特点 */
        .one {
            height: 1000px;
            border: 1px black solid;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            /* 换行 */
            flex-wrap: wrap;
        }
        .two {
            width: 400px;
            height: 400px;
            background-color: pink;
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
    </div>
</body>
</html>>

页面效果：
在这里插入图片描述

3.6 Flex 布局 - 行对齐方式

作用：对多行弹性盒子的行对齐方式进行设置，对单行盒子不起效果

属性名：align-content

属性值描述
flex-start默认值，弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列
center弹性盒子沿主轴居中排列
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

例如：

<!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>
        /* 特点：顶对齐，具备行内块显示特点 */
        .one {
            height: 1000px;
            border: 1px black solid;
            display: flex;
            justify-content: space-evenly;
            align-content: end;
            flex-wrap: wrap;
        }
        .two {
            width: 300px;
            height: 300px;
            background-color: pink;
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
        <div class="two">这是two块级元素</div>
    </div>
</body>
</html>>

页面效果：
在这里插入图片描述

完

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/575108.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

OU和域用户的创建

OU和域用户的创建

OU和域用户的创建 导航 文章目录 OU和域用户的创建导航一、创建ou二、创建用户三、验证 一、创建ou 在服务器管理器里面点击右上角的工具,选择Active Directory 用户和计算机右击我们的域,选择新建,选择组织单位,并填入我们的单位名字 二、创建用户 右击我们刚刚新建的组织…
阅读更多...
Linux(Centos)服务器探索ffmpeg笔记 (命令行、Nvidia硬件加速、GPU、CPU、CUDA、h264_nvenc、过滤器、加水印)

Linux(Centos)服务器探索ffmpeg笔记 (命令行、Nvidia硬件加速、GPU、CPU、CUDA、h264_nvenc、过滤器、加水印)

目录 前言内容简介为什么会有这篇文章 1、服务器上怎么使用ffmpeg1.1 使用编译好的&#xff08;需要root权限&#xff09;1.2 自己怎么编译&#xff08;需要root权限&#xff09; 2 、非Root用户要怎么安装和使用3、ffmpeg命令的一些使用引导和参数介绍3.1 编译参数3.2 查询支持…
阅读更多...
解读六西格玛培训：企业为何不能忽视其重要性？

解读六西格玛培训：企业为何不能忽视其重要性？

六西格玛培训&#xff0c;听起来可能是一个陌生的名词&#xff0c;但当深入探索其内涵后&#xff0c;会发现它实际上是企业追求卓越的必由之路。 想象一下&#xff0c;你正在驾驶一辆赛车&#xff0c;在赛道上追求极致的速度与精准。然而&#xff0c;每一个微小的失误都可能导致…
阅读更多...
window平台C#实现软件升级功能（控制台）

window平台C#实现软件升级功能（控制台）

window平台C#实现软件升级功能 之前用window窗体实现过一个升级功能&#xff0c;后来发现多个项目都需要升级功能&#xff0c;现改成可接收参数实现一种通用的exe.改用控制台方式实现这个升级功能&#xff0c;这样不仅实现了接收参数&#xff0c;升级程序体积也比原来的窗体形式…
阅读更多...
如何让Ubuntu上的MySQL开发更便捷

如何让Ubuntu上的MySQL开发更便捷

前言 作为一款开源的数据库开发与数据库管理协同工具&#xff0c;&#xff08;OceanBase Developer Center&#xff0c;简称ODC&#xff09;&#xff0c;针对MySQL数据源&#xff0c;已提供了涵盖SQL开发、变更风险管控、数据安全合规等多个方面的功能&#xff0c;从而为MySQL…
阅读更多...
Java集合框架-Collection-List-vector(遗留类)

Java集合框架-Collection-List-vector(遗留类)

目录 一、vector层次结构图二、概述三、底层数据结构四、常用方法五、和ArrayList的对比 一、vector层次结构图 二、概述 Vector类是单列集合List接口的一个实现类。与ArrayList类似&#xff0c;Vector也实现了一个可以动态修改的数组&#xff0c;两者最本质的区别在于——Vec…
阅读更多...
# 使用 Hystrix 的线程池，idea 报错显示 HystrixThreadPoo1Properties.Setter 报红。

# 使用 Hystrix 的线程池，idea 报错显示 HystrixThreadPoo1Properties.Setter 报红。

使用 Hystrix 的线程池&#xff0c;idea 报错显示 HystrixThreadPoo1Properties.Setter 报红。 一、可能的原因&#xff1a; 1、拼写错误&#xff1a; HystrixThreadPoo1Properties.Setter 中的 “Poo1” 可能是拼写错误&#xff0c;应为“Pool”。 2、类或方法不存在&#…
阅读更多...
BGP配置和应用案例

BGP配置和应用案例

策略路由的配置步骤 l 策略路由的配置步骤如下&#xff1a; 创建route-map 通过ACL匹配感兴趣的数据&#xff0c;定义策略动作 在指定接口下通过ip policy 命令应用route-map l 最终实现对通过该接口进入设备的数据进行检查&#xff0c;对匹配的数据执行规定的策略…
阅读更多...
Selenium IDE 常见错误笔记

Selenium IDE 常见错误笔记

错误1&#xff1a;Failed:Exceeded waiting time for new window to appear 2000ms 这个错误通常出现在第一次运行时&#xff0c;有两个原因&#xff1a; Firefox阻止了弹出式窗口&#xff0c;在浏览器设置里允许这个操作即可。 有些网站设置了反扒机制&#xff0c;脚本运行…
阅读更多...
【1569】jsp学生学籍管理系统Myeclipse开发sqlserver数据库web结构jsp编程计算机网页项目

【1569】jsp学生学籍管理系统Myeclipse开发sqlserver数据库web结构jsp编程计算机网页项目

一、源码特点 jsp 学生学籍管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为sqlserver2…
阅读更多...
Cmake入门学习指南

Cmake入门学习指南

Cmake入门学习指南 Cmake 官方教程 cmake 提供了一个很好的教程&#xff0c;里面的内容很简单&#xff0c;并且有简单的习题帮助你理解 cmake。 开始前需要的准备 这里默认你使用 windows 环境的电脑进行学习&#xff0c;如果是 Linux 系统就更简单了&#xff0c;直接各种 a…
阅读更多...
企业微信hook接口协议,ipad协议http,发送大视频文件

企业微信hook接口协议,ipad协议http,发送大视频文件

发送大视频文件 参数名必选类型说明uuid是String每个实例的唯一标识&#xff0c;根据uuid操作具体企业微信send_userid是long要发送的人或群idisRoom是bool是否是群消息 请求示例 {"uuid":"1688853790xxx", //uuid 默认随机生成如果初始化传了id则用初始…
阅读更多...
苍穹外卖学习

苍穹外卖学习

并不包含全部视频内容&#xff0c;大部分都按照操作文档来手搓代码&#xff0c;资料&#xff0c;代码都上传git。 〇、实际代码 0.1 Result封装 package com.sky.result;import lombok.Data;import java.io.Serializable;/*** 后端统一返回结果* param <T>*/ Data pub…
阅读更多...
【iconv】Linux c++ 中文字符串转十六进制 GBK 编码/内码

【iconv】Linux c++ 中文字符串转十六进制 GBK 编码/内码

文章目录 问题描述c 代码CMakeLists.txt参考链接 问题描述 Linux 系统默认使用的是 UTF-8 编码&#xff0c;并且 c 中没有标准库可以直接将中文字符转为 GBK 编码/内码。因此需要借助 iconv 库来实现。 在实现代码之前&#xff0c;可以在一下在线工具网站进行中文字符到各个编…
阅读更多...
Docker 的数据管理 端口映射 容器互联 镜像的创建

Docker 的数据管理 端口映射 容器互联 镜像的创建

目录 概念 概念 管理 Docker 容器中数据主要有两种方式&#xff1a;数据卷&#xff08;Data Volumes&#xff09;和数据卷容器&#xff08;DataVolumes Containers&#xff09;。总结&#xff1a;因为容器数据是临时保存的为了安全&#xff0c;就要让数据保持持久化。 1&#…
阅读更多...
面试ssss

面试ssss

深拷贝和浅拷贝 深拷贝和浅拷贝是关于对象&#xff08;包括数组&#xff09;复制的两个概念。 浅拷贝在复制对象属性的时候&#xff0c;复制的是指针&#xff08;引用&#xff09;&#xff0c;所以&#xff0c;修改目标对象的属性值会影响到原对象的对应属性值 obj。assign …
阅读更多...
互联网大厂ssp面经，数据结构part2

互联网大厂ssp面经，数据结构part2

1. 什么是堆和优先队列&#xff1f;它们的特点和应用场景是什么&#xff1f; a. 堆是一种特殊的树形数据结构&#xff0c;具有以下特点&#xff1a;i. 堆是一个完全二叉树&#xff0c;即除了最后一层外&#xff0c;其他层都是满的&#xff0c;并且最后一层的节点都靠左对齐。i…
阅读更多...
深入探索MySQL：成本模型解析与查询性能优化

深入探索MySQL：成本模型解析与查询性能优化

码到三十五 &#xff1a; 个人主页 在数据库管理系统中&#xff0c;查询优化器是一个至关重要的组件&#xff0c;它负责将用户提交的SQL查询转换为高效的执行计划。在MySQL中&#xff0c;查询优化器使用了一个称为“成本模型”的机制来评估不同执行计划的优劣&#xff0c;并选择…
阅读更多...
一般神经网络的微分与网络参数的初始化

一般神经网络的微分与网络参数的初始化

(文章的主要内容来自电科的顾亦奇老师的 Mathematical Foundation of Deep Learning, 有部分个人理解) 一般深度神经网络的微分 上周讨论的前向和反向传播算法可以推广到任意深度神经网络的微分。 对于一般的网络来说&#xff0c;可能无法逐层分割&#xff0c;但仍然可以用流…
阅读更多...
【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记（三）

【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记（三）

课程地址&#xff1a; 黑马程序员HarmonyOS4NEXT星河版入门到企业级实战教程&#xff0c;一套精通鸿蒙应用开发 &#xff08;本篇笔记对应课程第 4 - 6节&#xff09; P5《04.快速入门》 本节来实现一个 HelloWorld 效果&#xff1a; 1、打开编辑器&#xff0c;选择新建项目&…
阅读更多...
最新文章

Copyright @ 2022~2023