摘要：一、什么是BFC 1.Formatting context:页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及其他元素的关系和相互作用。 2.Box：css布局的基本单位。元素的类型和display属性决定了这个box的类型。不同类型的box，会参与不同的Formatting 阅读全文

摘要：1.概念 外边距折叠，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距 毗邻：1.两个或多个外边距没有被非空内容、padding、border或clear分隔开。2.margin都处于普通流中，即非浮动，非定位、非浮动元素。 在没有被分隔开的情况下，一个元素的margin-top会 阅读全文

摘要：一、文本居中 文本的水平居中text-align:center; 文本的垂直居中设置行高即可line-height：20px; 二、行内元素的居中 vertival-align是相对兄弟的行高来定位，所有加一个空的兄弟使得高度等于父盒子 三、盒子的居中方法 1.text-align实现水平居中 te 阅读全文

摘要：利用浮动实现三列布局，中间宽度自适应 方法一：父级盒子添加一堵墙，用clear：both清除浮动 方法二：父级盒子添加overflow：hidden 阅读全文

摘要：1.flex-direction：设置伸缩项目的排列方式，即主轴的方向 row 设置从左到右排列 row-reverse 设置从右到左排列 column 设置从上到下排列 column-reverse 设置从下到上排列 2.justify-content：调整主轴方向上的对齐方式，对于弹性盒子内元素 阅读全文

摘要：1.浮动法，左列左浮动，右列右浮动，插入主体。中间内容#main必须要在最后加入，#main占一行会影响后面的浮动元素 2.margin负值法，每个盒子都向一边浮动，通过负margin把盒子拉到左侧，先放中间的盒子 3.绝对定位，左右两列绝对定位，中间用margin撑开距离。最容易理解 4.flex 阅读全文