# 盒子模型

# 背景

先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即占窗口宽度的100%，但边框border和内边距padding是用像素来表示的，此时就会造成一个问题是div总宽度超过窗口宽度。为了避免这种问题，可以使用属性box-sizing:border-box来把 标准盒模型 变成 代替(IE)盒模型 ，从而使div的总宽度依然是100%

# 文字在一行或多行时超出显示省略号

# 一行超出显示省略

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

# flex布局语法

# 一、flex 布局是什么？

Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器 都可以指定为 Flex 布局。