一、盒模型
分为标准盒模型 和 怪异盒模型
-
标准盒模型 ： 只包含内容区域（content）的尺寸，不包括内边距（padding）和边框（border）；
总宽 ： 总宽度 = 内容宽度（width） + 左右内边距（padding-left + padding-right） + 左右边框（border-left + border-right） + 左右外边距（margin-left + margin-right）。
-
怪异盒模型：一个块的总宽度是：width（width已经包含了padding和border） + margin（左右）； 总宽：总宽度 = 宽度（包含内容、内边距和边框的width） + 左右外边距（margin-left + margin-right）。 使用
box-sizing: border-box;可以将元素的盒模型切换到怪异盒模型
二、BFC
我们可以把它理解为一个特殊的容器，在这个容器里面的元素布局与外界容器无关，也不会受到外部元素的影响
- 用法 ：
- 将float设置为 非none属性 如 ： float：right等
- 将position设置为 absolute 或者 fixed
- 将 overflow设置为 非 visible 如 hidden，auto等
- 将display 设置为 inline-block、flex等
- 可以解决的问题
- 外边距塌陷：两个垂直相邻的元素都设置了外边距的时候可能发生重叠，导致实际距离变大，将其中一个放入BFC就可以解决
- 父元素高度塌陷 ：如果父元素只包含浮动，他的高度可能坍陷为0，这时候为父元素创建 BFC就可以解决
- 两栏布局 ： 一边宽固定，另一边自适应
三、如何实现一个0.5px的线
通过 css的2D转换进行缩放 ： transform ： scaleY(0.5) // 文字小于12px也是这个
四、文本溢出省略号
五、sass和less有什么区别
- 语法不同：less和普通的css类似容易上手，sass提供两种写法一种是 scss一种是sass
- 功能不同：如sass支持 条件语句 和 循环语句 less就不支持
- less是在客户端进行处理的 sass是在服务端进行处理的
五、盒子垂直水平居中的方式
- flex布局 :
- 定位 :
- grid:
六、flex详解
基本概念
-
容器与项目：采用Flex布局的元素称为Flex容器，其所有直接子元素自动成为容器成员，称为Flex项目。
-
主轴与交叉轴：容器中有两根轴，主轴是Flex项目排列的方向，与之垂直的是交叉轴。主轴方向可通过 flex-direction 属性设置，默认是水平方向。
容器的属性
flex-direction：决定主轴方向
- row （水平从左到右）、
- row-reverse （水平从右到左）、
- column （垂直从上到下）、
- column-reverse （垂直从下到上）。
flex-wrap：控制项目是否换行，
- nowrap （不换行）、
- wrap （换行）、
- wrap-reverse （换行且顺序反转）。
justify-content：定义项目在主轴上的对齐方式，
- flex-start （左对齐）、
- flex-end （右对齐）、
- center （居中）、
- space-between （两端对齐）、
- space-around （项目两侧间距相等）。
align-items：设置项目在交叉轴上的对齐方式
-
flex-start （交叉轴起点对齐）、
-
flex-end （交叉轴终点对齐）、
-
center （居中）、
-
stretch （拉伸占满容器高度）、
-
baseline （项目第一行文字基线对齐）。
-
align-content：多根轴线的对齐方式，取值类似 justify-content ，在项目只有一根轴线时无效。
flex：1是以下三个属性的集合
-
flex-grow：定义项目的放大比例，默认为0，即不放大。若所有项目 flex-grow 为1，则等分剩余空间。
-
flex-shrink：定义项目的缩小比例，默认为1，即空间不足时会缩小。若一个项目 flex-shrink 为0，其他为1，该项目不缩小。
-
flex-basis：定义项目在主轴上的初始大小，可设具体值，如 200px ，或 auto （根据内容自动计算）。
