bfc

CSS——BFC

阅读更多关于 CSS——BFC

BFC(块级格式化上下文) BFC(Block formatting context) 直译为"块级格式化上下文"。元素的显示模式我们前面讲过元素的显示模式 display。分为块级元素行内元素行内块元素，其实，它还有很多其他显示模式。那些元素会具有BFC的条件不是所有的元素模式都能产生BFC，w3c 规范： display 属性为 block, list-item, table 的元素，会产生BFC. 大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。这个BFC 有着具体的布局特性：有宽度和高度，有外边距margin 有内边距padding 有边框 border。就好比，你有了练习武术的体格了。有潜力，有资质。什么情况下可以让元素产生BFC 以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？在好比，你光有资质还不行，你需要一定额外效果才能出发的武学潜力。同样，要给这些元素添加如下属性就可以触发BFC。 -float属性不为none -position为absolute或fixed -display为inline-block, table-cell, table

bfc 浮动和定位对元素的影响

阅读更多关于 bfc 浮动和定位对元素的影响

浮动元素（脱离了常规文档流转化为bfc）会自动忽略元素的display属性并默认display为block 更具体的说效果变成了inline-block的效果 arbsolution：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。 relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小产生bfc的条件：【1】根元素，即HTML元素　　【2】float的值不为none 　　【3】overflow的值不为visible 　　【4】display的值为inline-block、table-cell、table-caption 　　【5】position的值为absolute或fixed 来源： https://www.cnblogs.com/panghu123/p/11677516.html

CSS——浮动及应用&清除浮动

阅读更多关于 CSS——浮动及应用&清除浮动

浮动(float) 1.普通流(normal flow) 这个单词很多人翻译为文档流，字面翻译普通流或者标准流都可以。前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？ CSS的定位机制有3种：普通流（标准流）、浮动和定位。 html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。 2.浮动(float) 浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。（CSS3已经我们真正意义上的网页布局，具体CSS3我们会详细解释） 3.什么是浮动？元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float:属性值;} 4.浮动详细内幕特性浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。浮动首先创建包含块的概念（包裹）。就是说，

阅读更多关于 BFC

学习目标: 理解BFC 了解渐进增强和优雅降级 typora-copy-images-to: media --- BFC(块级格式化上下文) BFC(Block formatting context) 直译为"块级格式化上下文"。元素的显示模式我们前面讲过元素的显示模式 display。分为块级元素行内元素行内块元素，其实，它还有很多其他显示模式。哪些元素会具有BFC的条件不是所有的元素模式都能产生BFC，w3c 规范： display 属性为 block, list-item, table 的元素，会产生BFC. 大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。这个BFC 有着具体的布局特性：有宽度和高度，有外边距margin 有内边距padding 有边框 border。就好比，你有了练习武术的体格了。有潜力，有资质。什么情况下可以让元素产生BFC 以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？在好比，你光有资质还不行，你需要一定额外效果才能出发的武学潜力，要么你掉到悬崖下面，捡到了一本九阴真经，要么你学习葵花宝典，欲练此功必先.... 同样

浅谈BFC

阅读更多关于浅谈BFC

BFC是什么？首先说一下BFC是什么，概念从哪里来？BFC全称叫做（Block Formatting Context）中文叫块级格式化上下文，是一个网页的概念。网页是一个一个盒子组成的，那么这个BFC到底有什么用途呢？看下面具体分析。怎么触发BFC 浮动元素：float 除 none 以外的值。绝对定位元素：position (absolute、fixed)。 display 为 inline-block、table-cells、flex。 overflow 除了 visible 以外的值 (hidden、auto、scroll)。遇到哪些问题需要用到BFC 在网页制作过程中由于浏览器加载是自上而下的原因（也可能是其他原因，个人是这么理解），外边距上下会取最大值，左右不影响，所以会导致以下局面。 html <div class="demo1"></div> <div class="demo2"></div> css .demo1{width: 200px;height: 200px;background-color: red;margin-bottom: 20px;} .demo2{width: 200px;height: 200px;background-color: black;margin-top: 30px;} 浏览器解析的时候会使外边距叠加在一起

CSS-盒模型

阅读更多关于 CSS-盒模型

在这张图中，我们发现我们设置的300*400出现在了最里面的那个蓝框中，与此同时我们可以发现在这个盒模型中除了我们设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框） margin(外边距) - 清除边框外的区域，外边距是透明的。 border(边框) - 围绕在内边距和内容外的边框。 padding(内边距) - 清除内容周围的区域，内边距是透明的。 content(内容) - 盒子的内容，显示文本和图像。为了正确设置元素在所有浏览器中的宽度和高度，你需要知道盒模型是如何工作的。而我们在测试效果图看到的350*450盒子， 350（width） = 300（content） + 20（padding）* 2 + 5（border）* 2 450（height）= 400 （content）+ 20（padding）* 2 + 5（border）* 2 css的两种盒模型而引起上面效果的原因来自于 css 的两种盒模型的不同，这里我先对两种盒模型做个介绍。 W3C的标准盒模型在标准的盒子模型中，width指content部分的宽度 IE的盒模型在IE盒子模型中，width表示content+padding+border这三个部分的宽度我们可以看出我们上面的使用的默认正是W3C标准盒模型

BFC-CSS

阅读更多关于 BFC-CSS

一、什么是BFC BFC(Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域，只有块参与，它规定了内部的块元素如何布局，并且与这个区域外部毫不相干。二、BFC的布局规则内部的Box会在垂直方向，一个接一个的布置。属于同一个BFC的两个相邻Box的margin会发生重叠。 BFC的区域不会与float box重叠。 BFC容器里面的元素不会影响到外面的元素。计算BFC的高度时，浮动元素也参与计算。三、触发BFC的条件根元素（html） float属性不为none position为absolute或fixed display为inline-block，table-cell，table-caption，flex，inline-flex overflow不为visible 四、BFC的应用 1.根据BFC规则3实现“自适应两栏布局” <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0} html,body{height:100%;} .left{ width:200px; height:100%;; background:orange; float

CSS高度塌陷问题解决方案

阅读更多关于 CSS高度塌陷问题解决方案

高度塌陷的存在：原因分析 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ /*为box1设置一个边框*/ border: 10px red solid; } .box2{ width: 100px; height: 100px; background-color: blue; /* * 在文档流中，父元素的高度默认是被子元素撑开的， * 也就是子元素多高，父元素就多高。 * 但是当为子元素设置浮动以后，子元素会完全脱离文档流， * 此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。 * 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。 * * 所以在开发中一定要避免出现高度塌陷的问题, * 我们可以将父元素的高度写死，以避免塌陷的问题出现， * 但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。 */ /*为子元素设置向左浮动*/ float: left; } .box3{ height: 100px; background-color: yellow; } </style> </head> <body> <div class="box1">

一些面试题整理

阅读更多关于一些面试题整理

抄别人的觉得可以就mark了一、说说从输入URL到看到页面发生的全过程，越详细越好。 1、首先浏览器主进程接管，开了一个下载线程。 2、然后进行HTTP请求（DNS查询、IP寻址等等），中间会有三次捂手，等待响应，开始下载响应报文。 3、将下载完的内容转交给Renderer进程管理。 4、Renderer进程开始解析css rule tree和dom tree，这两个过程是并行的，所以一般我会把link标签放在页面顶部。 5、解析绘制过程中，当浏览器遇到link标签或者script、img等标签，浏览器会去下载这些内容，遇到时候缓存的使用缓存，不适用缓存的重新下载资源。 6、css rule tree和dom tree生成完了之后，开始合成render tree，这个时候浏览器会进行layout，开始计算每一个节点的位置，然后进行绘制。 7、绘制结束后，关闭TCP连接，过程有四次挥手。二、CSS和JS的位置会影响页面效率，为什么？ css在加载过程中不会影响到DOM树的生成，但是会影响到Render树的生成，进而影响到layout，所以一般来说，style的link标签需要尽量放在head里面，因为在解析DOM树的时候是自上而下的，而css样式又是通过异步加载的，这样的话，解析DOM树下的body节点和加载css样式能尽可能的并行，加快Render树的生成的速度。

BFC

阅读更多关于 BFC

什么是BFC 在一个web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks,table-cells,和table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建BFC（块级上下文）。为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 1. float的值不是none。 2.position的值不是static或者relative。 3.display的值是inline-block、table-cell、flex、table-caption或者inline-flex 4.overflow的值不是visible BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。怎么创建BFC 要显式的创建一个BFC是非常简单的，只要满足上述4个CSS条件之一就行。例如： <div class="container"> 你的内容 </div> 在类container中添加类似 overflow: scroll

订阅 bfc