文章目录1.什么是BFC?2.BFC的布局规则?3.BFC的触发条件?4.html,body到到底哪个触发了BFC?4.1 关于用overflow：hidden触发不了body元素BFC的疑问?5.BFC的应用场景5.1 清除浮动（高度坍塌）5.2 防止外边距折叠5.3 防止外边距坍塌5.3 自适应两栏布局1.什么是BFC?BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域， 它规定了内部的Block Box如何布局，并且与这个区域外部毫不相干。

前言好久没有写css了，当我回顾flex布局时候，发现有些知识已经遗忘了，所以专程写一篇文章来记录下，这篇文章不会介绍flex的基础用法，只是记录下flex布局中其中比较难理解，比较容易忘记的部分！文章目录前言1. flex属性各种写法1. 1 flex-basis1. 2 flex-grow1. 3 flex-shrink2. align-items和align-content的区别1. flex属性各种写法flex 的缩写： flex-grow、flex-shrink、flex-basis

1.什么是伪类?伪娘:伪娘并不是女性，是男性，不过他们穿上女装，如果他们不说话，你可能就无法辨别,一样的道理，伪类，它不是真正类（在css中的类是class），为什么要用伪类呢，因为你在Dom树中你无法正常描述，比如一个按钮，正常的时候是灰色背景，鼠标悬浮的时候是蓝色背景，这种情况你在Dom树无法描述，如果用js实现的话你可能会写两个类，正常的时候定义一个类，鼠标悬浮的时候又定义一个类，这样通过js可以实现（通过hover事件添加和删除类）<style> .btn {

margin属性平时写css几乎天天写，再熟悉不过了！今天我们来深入讨论下margin的一些居中的问题（本来这篇文章早就想写的，一直忘记了），话不多说，直接进入正题！1.margin:auto有人可能要问了，margin:auto 这个有啥好讨论的？先看下小测试的代码！<style> .auto{ width: 200px; height: 200px; background-color: aqua; margin:

最近做项目做一个弹出框，然后垂直居中定位，发现很模糊，当时还可以是我屏幕问题，然后在同事上看也是一样模糊，然后发现是CSS的transform: translate(-50%,-50%)导致的，英文这种垂直居中会出现小数点像素，像素是基数的时候就会糊掉，偶数的时候不会！其实原理很简单：元素的边缘应该和像素点对齐，但是经过 CSS translate 后，计算的结果并非整数的像素点，导致本来一个像素...

1.行高的定义：行高是相邻两行文本基线之间的垂直距离。看清除是基线，估计有很多前端搞了几年的都说不出个所以然。小时候我们写英文26个英文字母的单词本（随便找个图）一行里面有四条线，在css中一个行内非替换元素（例如span，em等），其内容区都会存在四条假想的线，分别是底线（bottom）、基线（baseline）、中线（middle）、顶线（top），它们就类似于书写英文时的四条线，其中两...

好久没写样式，前2天有个新来的同事问我background-clip这个css3 的属性，我当时只记这个是裁剪，具体怎么裁剪已经忘记了，找了下资料整理下方便以后记忆,它有三个属性：1.border-box这个看上去有点像box-sizing的属性，其实不是，border-box是默认值，大概意思是背景延伸到border的外边缘。看下面代码 <style> .test...