今天的我还菜嘛

在CSS中最常用的就是居中对齐的样式，flex布局方法使得垂直水平居中变得非常容易，但是flex具有浏览器兼容问题，掌握其他CSS居中对齐的方法也是重要的。 其中，水平居中较为简单，通过判断元素是行内元素还是块级元素就能轻松区分： 行内或类行内元素：text-align: center; 块级元素：margin: 0 auto; 而垂直居中具有一定的难度，也有很多种方法；只要学好了垂直居中的几种方法，与水平居中轻松组合就能得出垂直水平居中的方案。 line-height 行高 适用于单行文本，不能应用于

BFC的定义 BFC（Block formatting context）块级格式化上下文，BFC里面的元素与外面元素隔离，使得里外元素的定位不会相互影响。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），有Block formatting context（BFC）和Inline formatting context（IFC）等。 BFC内部布局规则 BFC作为一种 Formatting Context，是脱离文档流的，其内部具有特殊的布局规则，掌握其内

相信大家用过flex布局都会用到flex:1这样的语句来平分空间，但是关于flex：1实际等于什么却没有细细探索过。 首先flex这个属性是一个缩写，实际上代表的是： flex:flex-grow || flex-shrink || flex-basis flex:1实际上是以上三种属性的缩写形式。 flex-grow//定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 flex-shrink //定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 flex-basis//定义了在

有时候当浏览器屏幕变小的时，希望一张长图的中间始终在屏幕中间，这个时候可以使用相对定位进行图片的动态移动： 移动距离=图片长度 * 0.5—div长度 * 0.5 /*向左移动img的一半*/ img{ position：relative; left:-960px; transform:translate(-50%);/*不写死，相对于自己图片的百分之50*/ /*向右移动父元素（div）的一半*/ margin-left:50%; } ...

margin在使用过程中往往会出现难以预料的问题，比如在垂直方向会出现兄弟元素合并问题、父子元素传递问题。 上下margin传递（左右不会传递）： margin-top传递：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素； margin-bottom传递：如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素； 解决办法： 触发BFC，设置overflow为auto/hidden