努力学习和总结是为了提高自己的能力，希望能对同学们有所帮助。BFC块格式化上下文（blockformattingcontext）简称BFC：它是页面上一个孤立的独立容器，容器内的子元素不会影响外面的元素。如何触发BFC？根元素（html）：最大的BFCposition设置为fixed或者absolutedisplay设置为inline-block、table-block、table-captionoverflow，取值不可见float，取值不为noneMDNFormattingcontextBFC定位方案里面的框将同一个BFC中相邻的两个元素按垂直方向依次放置。垂直方向的边距会重叠。BFC中每个元素的左边距将触及包含块的左边框。在计算BFC的高度时，float元素也会参与选择器权重的计算Css选择器优先级！important->highestinlinestyle->1000id->100class->10tag->1inheritancestylemargin属性margin属性设置给定元素的所有四个（上、下、左、右）方向的margin属性。普通元素的百分比边距是相对于容器的宽度计算的。绝对定位元素的百分比边距是相对于其定位的祖先元素的宽度计算的。上下边距会重叠：只发生在块元素上，（取最大值）解决重叠方法：父元素设置BFC（如overflow:hidden；如position:absolute等）和parent当margin的值为auto时，元素设置边框/填充。浏览器会自动选择合适的边距应用（自动分配剩余空间）。必需的元素是块元素。元素需要设置边距。保证金可以是负数。内联元素的简单版本是水平居中text-align:center;fixed-widthblockElement//设置左右边距为automargin:0auto;verticalcentersimpleversionsingle-linetextverticalcenter->line-heightmulti-linetextverticalcenter//vertical-align只对行内元素和表格单元格元素生效//指定行内元素的位置/表格单元格元素基线相对于块元素baseline.center-table{display:table;}.center-tablep{显示：表格单元格；垂直对齐：中间；}元素居中（水平和垂直）高级固定宽高通过绝对定位+负边距居中#main{position:relative;//...稍微}#center{position:absolute;宽度：100px；高度：100px；左：50%；顶部：50%；边距：-50px；}通过绝对定位+margin:auto;#main{位置：相对；//...稍微}#center{width:100px;高度：100px；左：0；右：0；顶部：0；底部：0；保证金：自动；位置：绝对；}可变宽度和高度变换居中#main{position:relative;//...稍微}#center{position:absolute;左：50%；顶部：50%；转换：翻译（-50%，-50%）；}flexcentered(one)#main{display:flex;证明内容：居中；对齐项目：居中；}flexcentering(2)#main{display:flex;//...稍微}#center{margin:auto;}浏览器是如何解析csscss的，上面的渲染顺序也是从上到下。下载和渲染是同时进行的。CSS解析和js解析不能同时进行。CSS选择器解析是从右到左（jQuery选择器解析方法相同）。确定元素的位置，减少匹配的次数。CSS属性支持判断。利用属性覆盖原则，编写高版本浏览器支持的特性。使用浏览器的两个CSS解析特性：后一个属性覆盖前一个属性，CSS解析器不会解析未知语法。div{背景：红色；background:linear-gradient(90deg,red,yellow)}使用.css的@supports判断属性support//支持对具体属性的处理@supports(position:sticky){div{position:sticky;}}//具体属性不支持：使用不处理@supportsnot(background:linear-gradient(90deg,red,yellow)){div{background:red;}}//如果有多个css属性：使用并处理@supports(display:-webkit-box)and(-webkit-line-clamp:2)and(-webkit-box-orient:vertical){p{display:-网络工具箱；-webkit-line-clamp:2;-webkit-box-orient：垂直；}}使用JS判断CSS属性的支持作为@supports的另一种形式，我们可以使用javascript来获取CSS属性的支持。CSS.supports('display','flex');必须有2个参数，否则返回false，（目前不支持IE浏览器）使用JS库modernizr如果浏览器不支持@supports，可以调用ele.style判断属性支持（库：Modernizr）判断是否支持varroot=document.documentElement;//HTMLfor(varkeyinroot.style){console.log(key);}//将打印//alignContent//alignItems//alignSelf//alignmentBaseline//all//animation//...元素可能有背景属性，但不支持特定的linear-gradinet()属性值。这时候怎么检测呢？你只需要给一个元素赋一个特定的值，然后检查这个属性值是否可以被读取。varroot=document.documentElement;root.style.backgroundImage='linear-gradient(90deg,#888,#ccc)';if(root.style.backgroundImage){//支持}else{//不支持}简单的CSS属性支持封装通过页面隐藏的元素以进行测试。/***用于简单的CSS特征检测*@param[String]property待检测的CSS属性名称*@param[String]value样式的具体属性值*@return[Boolean]是否校验passed*/functioncssTest(property,value){//CSS&&CSS.supports//CSS.supports('display','flex');必须有2个参数，否则返回false//用于测试的元素，隐藏在页面上varele=document.getElementById('test-display-none');//只有一个参数if(arguments.length===1){if(ele.style中的属性){returntrue;}//两个参数case}elseif(arguments.length===2){ele.style[property]=value;如果（ele.style[属性]）{返回真；}}返回假；}position定位详情position:absolute;relative非静态祖先元素的定位如果祖先元素都是静态的，则相对于视口定位一不留神，很容易出现BUG)visibility:hidden,display:none,z-index=-1,opacity:0Clearfloating浮动元素脱离文档流，无法打开元素。需要清除浮动。清除浮动伪元素的方法+clear:both;//所有浏览器通用的clearfix方案//引入zoom来支持IE6/7.clearfix:after{display:table;内容：””;明确：两者；}。clearfix{*缩放：1;}//所有浏览器通用的clearfix解决方案[推荐]//引入zoom来支持IE6/7//同时添加:before来解决现代浏览器的collapsingmargin问题.clearfix:before,.clearfix:after{display:table;内容：””;}.clearfix:after{clear:both;}.clearfix{*缩放：1；}为父元素设置overflow:hidden；空白元素+清除：两者；（与伪元素实现原理相同，但低很多）remempxvwpx：（pixel像素的缩写），相对于显示屏幕分辨率em：相对于父元素的font-sizerem：可以认为是root-em，相对于root(html)的font-sizevw：相对于视口（viewport）的宽度，长度等于视口宽度的1/100伪类和伪元素函数及区别伪类：伪类选择元素是根据当前元素的状态，或者说元素当前的特性，作用类似于类，但是它是基于文档外部的抽象，所以叫伪类(:first-child:link:visitive:hover:focus:lang)伪元素：伪元素控制的内容其实和元素是一样的，只不过是基于元素的抽象和文档中不存在，所以称为伪元素(:first-line:first-letter:befoe:after)欢迎关注公众号《前端进阶教程》，认真学习前端，共同进步。
