bfc

##gulp(注：mac系统中用到了管理员权限，故命令行开头要加上sudo) ps:以下属于伪代码 1.常用步骤： （1）因为gulp是基于node开发的，所以要先全局安装node,若已安装，则下一步： 全局安装gulp npm install -g gulp gulp -h 查看帮助 （2）在桌面新建文件夹gulp-jinge,并在该文件里打开终端， gulp init 生成package.json文件 接着按要求填写项目信息（version:0.0.1），再确认 npm insatll gulp --save-dev 生成node_modules(含义：将gulp添加到pakage.json中，并作为项目的依赖) rm -rf node——modules 删除node_moduls(因为以后可以通过命令行来直接安装插件) npm install 下载项目所需的所有模块（因为package.json有gulp依赖，所以安装node_modules时，自动将gulp安装在node_modules下面） （3）在项目根目录下创建gulpfile.js文件，在gulpfile.js中写入: var gulp=require("gulp"); gulp.task("hello",function () { console.log("hello"); }); 再在终端敲入gulp

margin塌陷 加css 别改结构 ,把父级变bfc 　　 margin合并就是两个兄弟 垂直之间的margin是合并的,把最上面的兄弟多加像素即可,不要改结构 　　　　　　※ 浮动元素产生了浮动流, 块级元素看 不到它们(所以两个盒子,会处在同一行)产生了bfc的元素和文本类元素以及文本都能看到浮动元素 　　 　　　　　　BFC是block format context　　　 　　　　　　※ 正常规则里CSS认为把HTML每个元素都当一个盒子,而且进一步的认为每个盒子里都有一套一模一样的语法渲染规则,所以我们可以 　　　　　　　　通过一些手段让特殊的盒子里渲染规则发生改变　　　 　 　　　　　　　: position / float / display:inline-block; / overflow:hidden; 　　　　　　 根据开发需求选择相应的需要 　　 　　　　　　　　　　　　　　在学习过程中,怎样灵活的发挥其实对于中国学生来说并不容易,我们都习惯了固定的思维模式, 　　　　　　　　　　　　　　　　　　受从小教育的影响,导致大学生很多是作业或者其它everthing 是一样的标准, 　　　　　　 　　　　　　　　　　 难道培养人才的模式是一样的吗?为的是把我们变成一样的人吗?答案,is wrong 布局 　　　　　　table（表格）布局-->float（浮动）布局

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？ 用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3 CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child） 可继承的属性：font-size, font-family, color 不可继承的样式：border, padding, margin, width, height 优先级（就近原则）：

BFC（Block formatting context）块级格式化上下文，是一个独立的渲染区域。 一、如何触发BFC： 1、根元素（html）; 2、设置float除none意外的值（left ,right）; 3、设置overflow 除visible 以外的值（hidden,auto,sroll）； 4、设置display （table-cell,inline-block,flex）; 5、设置position(absolute,fixed) 二、BFC的布局规则： 1、内部的BOX会在垂直方向，一个接一个的放置； 2、BOX垂直方向的距离由margin决定。同一个BFC的两个相邻 BOX的margin会重叠； 3、每个元素的margin box （子元素）的左边，与包含块border box（父元素）的左边相接触； 4、BFC是页面上的一个隔离的独立容器，里面的子元素不影响外面； 5、计算BFC的高度时，浮动元素也会参与计算； 6、BFC的区域不与float box(浮动的盒子)重叠。 三、BFC的作用： 1、可以解决上下margin重叠问题，给添加margin值的元素再套一个盒子，并设置overflow：hidden； 2、可以解决高度塌陷问题，子元素浮动脱离了正常的文档流，也脱离了父元素盒子，此时父元素盒子高度为0，给父元素设置overflow:hidden

清除浮动的四种方式及其原理理解 本文介绍了四种清除浮动的方法，并尝试解释其原理。在理解了各种清除浮动的原理之后，你会发现，很多清除浮动的方法本质上其实是一样的。掌握这些原理，相信你可以根据场景和需求，灵活运用原则发展出不同的清除浮动的方法，而不再死记或拘泥于文中提到的方法。 一、为什么要清除浮动 在讲清除浮动的方法之前，我们先来了解一下为什么要清除浮动，清除浮动的目的是什么，即，要解决什么样的问题。来看一个浮动的例子(略去了文字内容)： <div class="topDiv"> <div class="floatDiv">float left</div> <div class="textDiv">...</div> </div> <div class="bottomDiv">...</div> 其样式为： .topDiv { width: 500px; border: 2px solid black; } .floatDiv { width: 100px; height: 100px; border: 2px dotted red; color: red; margin: 4px; float: left; } .bottomDiv { width: 500px; height: 100px; margin: 5px 0; border: 2px dotted black; }

1、怎么让一个不定宽高的 DIV，垂直水平居中？ 答： 1）使用 CSS 方法： 父盒子设置：display：table-cell； text-align：center；vertical-align：middle； Div 设置： display：inline-block；vertical-align：middle； 2）使用 CSS3 transform： 父盒子设置：display：relative Div 设置： transform： translate(-50%，-50%)；position： absolute；top： 50%；left： 50%； 3）使用 flex布局： 父盒子设置：display：flex；justify-content：center；align-items：center； 4）使用 网格布局： 父盒子设置：display：grid； Div 设置： justify-self：center；align-self：center； 2、position 几个属性的作用？ 答： position 的常见四个属性值： relative，absolute，fixed，static。一般都要配合"left"、“top”、“right” 以及 “bottom” 属性使用。 1）Static：默认位置，设置为 static 的元素，它始终会处于页面流给予的位置

引言： 这篇文章是我对BFC的理解及总结，带你揭开BFC的面纱。你将会知道BFC是什么，形成BFC的条件，BFC的相关特性，以及他的实际应用。 一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 二、形成BFC的条件 1、浮动元素，float 除 none 以外的值； 2、定位元素，position（absolute，fixed）； 3、display 为以下其中之一的值 inline-block，table-cell，table-caption； 4、overflow 除了 visible 以外的值（hidden，auto，scroll）； 三、BFC的特性 1.内部的Box会在垂直方向上一个接一个的放置。 2.垂直方向上的距离由margin决定 3.bfc的区域不会与float的元素区域重叠。 4.计算bfc的高度时，浮动元素也参与计算 5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。 看到这里是不是有丈二和尚摸不着头脑的感觉，下面我就用案例来帮助理解认识： 四、实践是检验真理的唯一标准 （1）BFC中的盒子对齐 特性的第一条是：内部的Box会在垂直方向上一个接一个的放置。 浮动的元素也是这样，box3浮动

什么是BFC BFC(Block Formatting Context)全名叫块级格式化上下文。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。 怎么形成BFC BFC的形成一般可以有以下几种方式 根元素 position为absolute、fixed float元素 overflow不为visible dispaly为 inline-block、flex、table-cell BFC有什么特点 垂直方向上自上而下排列，和文档流的方向一致 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此； BFC容器是一个独立的区域，内部元素和外部元素互不影响。 浮动元素不与BFC元素相叠加 BFC计算高度时，需要把浮动元素也计算在内 用来做什么 解决margin重叠问题 根据BFC容器是一个独立的区域，内部元素和外部元素互不影响。这一特性，可以解决margin重叠问题 < div class = " first-block " > </ div > < div class = " second-block " > < p > 解决margin重叠问题 </

BFC(block formatting context): 块级格式化上下文 表现形式是：元素形成了一个封闭空间，其内的子元素和外部文档流 互不 影响。 主要可以解决两个问题：浮动影响、 父子元素 上下margin合并。 产生方式： 1、根元素自带； 2、float属性计算值为：left、right； 3、overflow属性计算值为： auto、scroll、 hidden(常用) 4、display属性计算值为：table-cell、table-caption、inline-block 5、position属性计算值为： absolute、fixed PS:之所以说计算值是因为，inherit变量动态继承父元素属性值，initial变量重置为初始值，unset变量先看inherit再看initial 1、清除浮动影响 在布局方面，和margin相比： 如果左边浮动元素的大小变化，margin需要重新设置来让出合适位置，而BFC则会自适应。 2、阻止父子元素margin合并 拥有BFC特性的元素，它的上下margin不会和它的子元素的margin进行合并，当然它的子元素间的margin合并不受影响。 参考文档 1、《CSS世界》 作者：张鑫旭 第六章第三小节（6.3） 来源： https://blog.csdn.net/fireInNight/article/details

浮动 浮动是css里面布局最多的一个属性，也是很重要的一个属性。 float：表示浮动的意思。它有四个值。 none: 表示不浮动，默认 left: 表示左浮动 right：表示右浮动 看一个例子 html结构： <div class="box1"></div> <div class="box2"></div> <span>路飞学城</span> css样式： .box1{ width: 300px; height: 300px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: green; float:right; } span{ float: left; width: 100px; height: 200px; background-color: yellow; } 我们会发现，三个元素并排显示，.box1和span因为是左浮动，紧挨在一起，这种现象贴边。.box2盒子因为右浮动，所以紧靠着右边。 那么浮动如果大家想学好，一定要知道它的四大特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"子围"效果 4.收缩的效果 浮动元素脱标 脱标：就是脱离了标准文档流 看例子 <div class="box1">小红</div> <div