css基础。。。。。

1.水平垂直居中：

（1）flex布局：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

     其中   flex-direction：row的时候，需要垂直居中使用：align-items: center;

               相反是column的时候，需要水平居中：需要设置 justify-content:center;

（2）使用绝对定位和负边距：

.container {
  position: relative;
}

.centered-element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

   2.盒模型

margin：外边距

padding：内边距

border：边框

content：内容

盒模型两种方式，一种是标准盒模型（content-box），一种是ie的盒模型（border-box）

通过box-sizing设置进行设置，标准盒模型的宽高只包含内容，ie盒模型是包括：内边距+边框+内容；

3.超出隐藏

.实现单行、多行文本溢出隐藏

单行文本溢出

overflow: hidden;           // 溢出隐藏
text-overflow: ellipsis;    // 溢出部分使用省略号显示
white-space: nowrap;        // 规定段落中的文本不可换行

多行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

4.BFC

1.BFC：可以理解为一块独立的区域，不受外界样式的影响

2.BFC触条件：

根元素body

float：除none；

overfloat：除visible；

display：inline-block、flex、table-cell、table-caption

position：absolate、fixed；

3.BFC作用：

1.解决子元素设置成float之后，父元素塌陷问题；解决方法：给父元素设置成bfc；（overfloat：hidden）

2.margin重叠问题：两个元素外边距不会相加，而是会取较大的那个（两个正数取max，两个负数取0-边距较大的那个，一正一负取相加的绝对值）；解决方法，给一个元素增加一个div，设置触发bfc的代码（overfloat：hidden）

3.设置成自适应两栏布局，左侧元素左边的宽度固定，右侧宽度自适应；左侧使用float：left，右侧设置overflow: hidden触发bfc，不会与左侧浮动元素发生重叠。