flex布局讲解、BFC讲解

最新推荐文章于 2024-04-30 08:48:14 发布
最新推荐文章于 2024-04-30 08:48:14 发布
阅读量712 收藏
点赞数
分类专栏： CSS 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_37756431/article/details/123505310
版权
本文深入探讨了Flex布局（display:flex;），详细解析了其属性与使用技巧，帮助理解如何构建响应式和灵活的网页布局。同时，文章介绍了BFC（Block Formatting Context）的概念，阐述了它在解决CSS布局问题中的重要作用，特别是对于浮动元素和页面流的影响。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

css布局 （关于BFC布局、Flex布局、Grid布局）总结整理
Yweivvv的博客
03-15 689
css布局BFC （BFC是指块级格式上下文）产生BFC的方法BFC可以解决哪些问题？常见面试题Flex布局什么是Flex布局？Flex布局模型Flex布局的属性为容器属性和元素属性两种：如何开启Flex布局？/Flex布局的使用容器属性（flex-container）元素属性（flex-items）Grid布局其他常见布局方式 BFC （BFC是指块级格式上下文） （Formatting Contexts 是指格式化上下文） 1.BFC所具有的特性 （1）. 是一个独立的渲染区域，与区域外部毫不相
CSS的Flex布局的学习
qq_461491877的博客
11-10 409
CSS的Flex布局的学习 哔哩哔哩链接：https://www.bilibili.com/video/BV1iE411y7hb?p=131 Flex(弹性盒、伸缩盒)是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局，使元素具有弹性，让元素可以跟随页面的大小的改变而改变。 首先我们先简单创建一个网页，网页中有一个ul，ul中有3个li子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charse
css知识：flex 、bfc
weixin_34092370的博客
01-10 688
1.flex flex是css3新出来的布局方式，是非常厉害常用的东西。 详情可查询www.runoob.com/w3cnote/fle…2.flex易错点： 2.1flex-grow （扩大） <div class="main"> <div class="item1">11</div> ...
Javascript 01|BFC-Flex
lsherryl的博客
01-11 184
本文主要以解析网页中最常见的左右固定宽度、中间随屏幕自适应的三栏布局来学习CSS中的BFC和Flex。 在日常的浏览网页中，我们经常会见到一种布局，左右固定或左右其一固定，中间主要展示内容且宽度自适应，这一布局难点在于中间如何自适应，接下来我们开始实现它。 首先我们可将布局整体作为一个父容器，那么该父容器的子元素则为左div、中div、右div，此处我们代入一个实际的例子：关注页/粉丝页中的用户列...
利用BFC实现左右两列自适应布局
少吃点肉的博客
09-21 1651
左右两列自适应布局是前端经常会遇到的项目需求。通常的做法无外乎左列浮动定宽，然后右列或浮动，或设置外边距，或绝对定位等等。但是现在我们要用overflow来实现，想必很多人都会耳目一新。 overflow属性overflow属性最常见的一个使用场景就是规定当内容溢出元素框时发生的事情。可能的值如下:visible 默认值。元素内容不会被裁剪，元素框之外的内容仍然会呈现。 hidden 元素内容会被
【常见问题】BFC、Flex
最新发布
油墨香^-^的博客
04-30 64
flex属性是flex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto。如果所有项目的flex-grow属性相等（或都为1），将等分剩余空间，如果有一个为2，那么它占据的剩余空间将比其他项目多；如果设置 flex:1，就等于 flex: 1 1 0;如果设置 flex:1，就等于 flex: 1 1 0;flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
微信小程序（Flex布局-容器属性）、微信小程序（Flex布局-项目属性）、静态补充CSS-BFC讲解、静态补充CSS之IFC、FFC、GFC讲解、微信小程序（JS逻辑文件）
weixin_44482244的博客
11-22 367
【前言】2019.11.22 【内容】 盒模型分类：IE盒模型，标准盒模型 微信小程序 View视图标签支持两种布局方式：Block 和 Flex 注意： 所有 View 默认都是 block浮动布局，所以如果要使用 flex 布局的话需要进行显式声明 简称： 日常开发中，采用flex布局的元素，一般简称为“容器” 容器内的元素简称为“项目”或者“元素” 布局属性： 容器属性：flex-flow、...
CSS之浮动/BFC/清除浮动（十二）
全粘小谭的博客
10-06 448
该文先讲解了CSS布局的几种策略，以及正常布局流是什么，然后逐步讲解浮动的由来，本质，如何产生，以及特性，随后讲解BFC规范，如何创建BFC，BFC的作用，最后列出清除浮动的几种方法。
10分钟掌握CSS BFC原理与实战应用
本文档深入浅出地讲解了CSS BFC（Block Formatting Context，块级格式化上下文）的概念、原理及其在网页布局中的应用。首先，作者通过介绍常见的三种定位方案——普通流、浮动和绝对定位，让读者了解它们的基本工作...
html基础-几种布局
m0_53161190的博客
07-21 1912
1.html标签 html为网页标记语言 <标签名> DTD声名 新版 <!DOCTYPE html> 标题标签 hn <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> n越大，字体越小，自动加粗，换行 color设置字体的颜色 1.HEXColor 六位的十
史上最全面、最透彻的BFC原理剖析
weixin_42396384的博客
06-06 2016
本文讲了BFC的概念是什么； BFC的约束规则；咋样才能触发生成新的BFC；BFC在布局中的应用：防止margin重叠(塌陷,以最大的为准)； 清除内部浮动；自适应两（多）栏布局。1. BFC是什么？Block fomatting context = block-level box + Formatting ContextBox:　　Box即盒子模型；block-level box即块级元素dis...
静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
weixin_30702413的博客
12-24 144
静态布局：给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。针对不同分辨率的手机端，分别写不同的样式文件。例如：浏览器窗口是1000px，那么最小的宽度是900px或其他px,只要浏览器缩小过这个最小值就不会自动化的调整。 　　自适应布局：创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用@media媒体查询技术。但是字体不会改变 ...
BFC（Block Formatting Context）、盒模型、文档流和 Flex 布局
xingchou00的博客
01-03 561
1.BFC（块级格式化上下文）：BFC 是一个独立的渲染区域，与外部区域无关。BFC 内的块级元素按照一定的规则进行排列和调整。BFC 具有以下特性：内部盒子在垂直方向上一个接一个放置。BFC 区域不会与浮动元素产生交集，而是紧贴浮动边缘。计算 BFC 高度时，浮动元素也参与计算。2.盒模型：盒模型是 CSS 中的一个基本概念，它描述了元素在页面上的布局和渲染方式。盒模型包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。
弹性盒flex与block冲突问题的解决
weixin_43908083的博客
12-02 4700
1.冲突的产生： 比如有个dispaly:flex;的弹性盒，要求它能够隐藏和显示。正常我们都是display:none;隐藏，display:block;显示出来，对于正常的元素来说，这没有什么问题，但对于弹性盒来说也可以使用block显示出来，但同时也会破坏flex的机制，即显示出来后不在具有弹性盒的功能。 2.解决办法： 其实也很简单，就是使用none隐藏元素后，直接使用flex代替bloc...
从清除浮动引起的BFC,IFC,FFC再学习
LLCN的博客
05-13 446
水平有限,如果存在问题欢迎大家访问我的博客批评指正. 正文 首先,'FC’肯定不是开封菜,而是Formatting context的简称.而在理解BFC等等概念之前,先让我们了解一下’FC’与’Box’是什么? -Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BF
块级格式化上下文--BFC
qq_46302247的博客
02-11 580
1、给父元素设置 style=“display: flex” 触发BFC，可以解决父元素高度塌陷的问题 高度塌陷：：父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（造成父元素高度为 0） <html> <head> <title>避免浮动溢出</title> <style type="text/css"> .parent{ border: 3px solid black;
CSS BFC 和 IFC
雾里看花叹朦胧
03-29 220
文章转自： 什么是BFC？看这一篇就够了 BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 Box：css布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很...
浏览器前缀、BFC深入解析、flex布局简析、行盒line boxes对齐及vertical-align居中原理、line-height
weixin_45179978的博客
01-10 453
浏览器前缀、BFC解析
二 css基础
weixin_43842189的博客
01-08 162
1.BFC 一开始也不知道这个东西，但是查了一下发现——有点东西 概念：块级格式化上下文 方式： overflow不为visible float 绝对定位 解决什么： 清除浮动 浮动塌陷 外边距塌陷 详细如下： 林东洲：10 分钟理解 BFC 原理​zhuanlan.zhihu.com 2.opacity:0/display:none/visibility:hidden区别 display:none不会存在于DOM树上 opacity:0还是能点击 visibility:hidd
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值