css的布局(BFC)

一、css中常规的定位方案

        1、普通流

元素按照其在HTML中的先后位置自上而下布局。

        行内元素水平排列,当行被占满后换行;块级元素则会被渲染为完整的一行。

        所有元素默认都是普通流定位。 

        

        2、浮动

元素首先按照普通流的位置出现, 然后根据浮动的方向尽可能的向左或向右偏移。

        浮动元素不占用普通流元素的位置。 

        浮动后的元素具备行内块的特点;顶对齐;脱标。

        

        3、绝对定位 

绝对定位的元素与浮动类似,都是脱标元素,不占位。 

        

二、常规布局下的问题(不是bug)

        1、外边距重叠

.box{width: 100px;height: 100px;background: pink;
}
.box1 {margin-bottom: 20px;
}
.box2 {margin-top: 10px;
}<div class="box box1"></div>
<div class="box box2"></div>

 

        2、浮动的元素可以使父盒子高度塌陷

.box1{border: 2px solid lightcoral;
}
.box2 {width: 100px;height: 100px;background: lightblue;float: left;
}<div class="box1"><div class="box2"></div>
</div>

 

        3、浮动元素会覆盖其他元素

.box1 {width: 100px;height: 100px;background: lightblue;float: left;
}
.box2{width: 200px;height: 200px;background: lightcoral;
}<div class="box1"></div>
<div class="box2"></div>

        4、父子盒子嵌套外盒子塌陷

.box1{width: 200px;height: 200px;background: lightblue;
}
.box2 {width: 100px;height: 100px;background: lightpink;margin-top: 20px;
}<div class="box1"><div class="box2"></div>
</div>

三、BFC详解 

        1、概念

        BFC--Block_formating_context,块级格式化上下文

        2、解释

         BFC是一个独立的区域,有自己的渲染规则。使用了BFC相当于加了容器隔离,使BFC内部的元素与外部元素在布局上互不影响通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。

        3、特性

                a、每个BFC区域只包含其子盒子,不包含其孙子盒子
                b、每个BFC区域相互独立,互不影响

        4、渲染规则

                a、BFC的区域不会与 float的元素区域重叠
                b、计算BFC的高度时,浮动子元素也参与计算
                c、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然

                d、 BFC的区域会计算盒子到父盒子margin-top的距离

        5、BFC的作用(解决问题)

                a、外边距重叠
                b、浮动的元素可以使父盒子高度塌陷
                c、浮动元素 覆盖其他元素
                d、父子盒子嵌套外盒子塌陷

        6、如何让一个常规盒子变为BFC盒子

                 只要元素满足下面任一条件即可触发 BFC 特性:

                        a、html根元素
                        b、浮动元素:float除none以外的值
                        c、绝对定位元素:position(absolute、fixed)
                        d、display为inline-block、table-cells、flex 、flow-root
                        e、overflow除了visible 以外的值(hidden、auto、scroll)
                        常用:overflow:hidden,display: flow-root因为他没有副作用

        7、BFC解决外边距重叠问题

.box{width: 100px;height: 100px;background: pink;
}
.box1 {margin-bottom: 20px;
}
.box2 {margin-top: 10px;
}
.container {overflow: hidden;
}<div class="container"><div class="box box1"></div>
</div>
<div class="container"><div class="box box2"></div>
</div>

 

        8、BFC解决浮动的元素可以使父盒子高度塌陷

.box1{border: 2px solid lightcoral;display: flow-root;
}
.box2 {width: 100px;height: 100px;background: lightblue;float: left;
}<div class="box1"><div class="box2"></div>
</div>

 

        9、BFC解决浮动元素会覆盖其他元素 

.box1 {width: 100px;height: 100px;background: lightblue;float: left;
}
.box2{width: 200px;height: 200px;background: lightcoral;display: flow-root;
}<div class="box1"></div>
<div class="box2"></div>

        10、BFC解决父子盒子嵌套外盒子塌陷

.box1{width: 200px;height: 200px;background: lightblue;display: flow-root;
}
.box2 {width: 100px;height: 100px;background: lightpink;margin-top: 20px;
}<div class="box1"><div class="box2"></div>
</div>

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ETOJ P1046】斐波那契数列 题解(数学+动态规划)

题目描述 给定一个整数 T T T&#xff0c;表示样例数。 对于每个样例&#xff0c;给定一个整数 n n n&#xff0c;求斐波那契数列的第 n n n 项。 斐波那契数列定义为 f ( 1 ) f ( 2 ) 1 f(1) f(2) 1 f(1)f(2)1&#xff0c; f ( n ) f ( n − 1 ) f ( n − 2 ) f(…

跟着cherno手搓游戏引擎【23】项目维护、2D引擎之前的一些准备

项目维护&#xff1a; 修改文件结构&#xff1a; 头文件自己改改就好了 创建2DRendererLayer&#xff1a; Sandbox2D.h: #pragma once #include "YOTO.h" class Sandbox2D :public YOTO::Layer {public:Sandbox2D();virtual ~Sandbox2D() default;virtual void O…

图神经网络与图表示学习: 从基础概念到前沿技术

目录 前言1 图的形式化定义和类型1.1 图的形式化定义1.2 图的类型 2 图表示学习2.1 DeepWalk: 融合语义相似性与图结构2.2 Node2Vec: 灵活调整随机游走策略2.3 LINE: 一阶与二阶邻接建模2.4 NetMF: 矩阵分解的可扩展图表示学习2.5 Metapath2Vec: 异构图的全面捕捉 3 图神经网络…

mysql-面试题

一、SQL语句 1、SQL语句的分类 DQL:数据查询语言—selectDML:数据操作语言—insert/update/deleteDDL:数据定义语言—create/drop/alterDCL:数据控制语言—start transaction/commit/rollback2、Sql语句的执行顺序 SQL 语句的执行顺序与编写顺序并不相同FROM、ON、JOIN、W…

【正式】今年第一篇CSDN(纯技术教学)

一、文件上传简介 文件上传漏洞是指用户上传了一个可执行的脚本文件&#xff08;木马、病毒、恶意脚本、webshell等&#xff09;&#xff0c;并通过此脚本文件获得了执行服务器端命令的能力。上传点一般出现在头像、导入数据、上传压缩包等地方&#xff0c;由于程序对用户上传…

Ubuntu in VMware的问题

文章目录 安装单用户模式(安全模式)扩容硬盘复制粘贴必装共享文件夹在虚拟机中不显示猫孔堵塞需要通过VMware来实现重启效果后记 just 安装 下载iso文件后 安装向导中兼容性选14x 版本的VMware 后面不会出现vcpu问题 cpu 4x4 装完后启动会出现vcpu问题 重启虚拟机Ubuntu 此问题…

使用内联函数,降低函数调用开销,实现移动时绘制

easyx devc 开发。 AWSD移动&#xff0c;移动时可以左键绘制 左键绘制 左上角画笔颜色 右键拖拽 #include <graphics.h> // 使用关键字 inline 声明为内联函数&#xff0c;减少贴图函数频繁调用的开销导致的卡顿。 // 缓冲区纹理映射函数&#xff1a;bkmesh 映射目…

Python语言例题集(002)

#!/usr/bin/python3 #使用del语句删除元素 motorcycles[‘honda’,‘yamaha’,‘suzuki’] print(motorcycles) del motorcycles[0] print(motorcycles) motorcycles[‘honda’,‘yamaha’,‘suzuki’] print(motorcycles) del motorcycles[1] print(motorcycles) #使用方法po…

TOP100 二叉树(三)

11.114. 二叉树展开为链表 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺…

PVST详解

PVST&#xff08;Per-VLAN Spanning Tree&#xff09;是Cisco公司的一种扩展的Spanning Tree协议&#xff0c;允许在每个VLAN中独立运行一个Spanning Tree实例&#xff0c;从而提高网络的可靠性和性能。 PVST协议在每个交换机中维护多个Spanning Tree实例&#xff0c;每个实例…

SegmentAnything官网demo使用vue+python实现

一、效果&准备工作 1.效果 没啥好说的&#xff0c;低质量复刻SAM官网 https://segment-anything.com/ 需要提一点&#xff1a;所有生成embedding和mask的操作都是python后端做的&#xff0c;计算mask不是onnxruntime-web实现的&#xff0c;前端只负责了把rle编码的mask解…

5G技术对物联网的影响

随着数字化转型的加速&#xff0c;5G技术作为通信领域的一次重大革新&#xff0c;正在对物联网&#xff08;IoT&#xff09;产生深远的影响。对于刚入行的朋友们来说&#xff0c;理解5G技术及其对物联网应用的意义&#xff0c;是把握行业发展趋势的关键。 让我们简单了解什么是…

AutoSAR(基础入门篇)7.2-AppL在Dev中的配置

目录 一、Application Component Types(SWC Type) 二、Service Component Types 三、Data Types 1、Application Data Types(ADT)

巧用liteflow,告别if else,SpringBoot整合liteflow

假设有一个三个原子业务&#xff0c;吃饭、喝水、刷牙。 现在有三个场景&#xff0c;分别是 场景A: 吃饭->刷牙->喝水 官网地址&#xff1a;https://liteflow.cc/ 1.添加依赖&#xff1a; <dependency><groupId>com.yomahub</groupId><artifactI…

基于鲲鹏服务NodeJs安装

准备工作 查看当前环境 uname -a查看鲲鹏云CPU架构 cat /proc/cpuinfo# 查看CPU architecture项&#xff0c;8表示v8&#xff0c;7表示v7下载Node.js NodeJs 选择 Linux Binaries (ARM) ARMv8 wget -c https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-arm64.tar.xz…

基于完全二叉树实现线段树-- [爆竹声中一岁除,线段树下苦踌躇]

文章目录 一.完全二叉树完全二叉树的父子结点引索关系 二.线段树三.基于完全二叉树实现线段树关于线段树的结点数量问题的证明递归建树递归查询区间和递归单点修改线段树模板题 一.完全二叉树 完全二叉树的物理结构是线性表,逻辑结构是二叉树 完全二叉树的父子结点引索关系 …

【Make编译控制 04】Makefile项目编译

目录 一、编译选项 二、链接选项 三、项目编译 一、编译选项 -std: 指定编译标准&#xff0c;例如&#xff1a;-stdc11、-stdc14-g: 包含调试信息-w: 不显示警告-O: 优化等级&#xff0c;通常使用&#xff1a;-O3-I: 加在头文件路径前-m64: 指定编译为 64 位应用程序fPIC: …

OpenCV与机器学习:使用opencv和sklearn实现线性回归

前言 线性回归是一种统计分析方法&#xff0c;用于确定两种或两种以上变量之间相互依赖的定量关系。在统计学中&#xff0c;线性回归利用线性回归方程&#xff08;最小二乘函数&#xff09;对一个或多个自变量&#xff08;特征值&#xff09;和因变量&#xff08;目标值&#…

深度优先搜索(DFS)与广度优先搜索(BFS):探索图与树的算法

一、引言 在图论和树形结构中&#xff0c;搜索算法是寻找从起点到终点的路径的关键。其中&#xff0c;深度优先搜索&#xff08;DFS&#xff09;和广度优先搜索&#xff08;BFS&#xff09;是最常用且最基础的两种搜索算法。本文将详细介绍广度优先搜索&#xff08;BFS&#xf…

一文彻底搞懂Kafka如何保证消息不丢失

文章目录 1. kafka 架构2. producer端是如何保证数据不丢失的2.1 同步发送2.2 异步发送2.3 批量发送 3. consumer端是如何保证数据不丢失的3.1 手动提交3.2 幂等性消费 4. broker端是如何保证数据不丢失的4.1 副本机制4.2 ISR机制4.3 刷盘机制 1. kafka 架构 Producer&#xff…