ul横向排列css_CSS盒模型

HTML文档中的每个元素都会被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。

由四部分构成：由里到外依次是content(内容)，padding(内边距)，border(边框)，margin(外边距)。

content—-padding—-border—-margin

1.标准盒模型(W3C)

通过CSS设置元素的宽高，width和height指的是content的宽和高。

2.IE盒模型

通过CSS设置元素的宽高，width和height指的是content+padding+border的宽和高。

3.弹性盒模型(CSS3)

使元素被绘制成一个“有弹性”的盒子，包括它的子元素，默认情况都会根据空间大小进行伸缩。

如何根据需要设置盒模型以哪种规范呢？

通过CSS属性box-sizing：

content-box:标准盒模型

border-box:IE盒模型

通过CSS属性display:flex;将元素设置为弹性盒模型。

弹性盒子常用属性：

HTML

子元素

CSS

.box{ display:flex;  flex-direction: row|column;  //元素横向排列,主轴为水平方向 || 元素纵向排列，主轴为垂直方向  align-items: center|flex-start|flex-end;  //元素在主轴上居中、由起始排列、由末尾排列  justify-content: center|flex-start|flex-end|space-around|space-between; //元素在辅轴上居中、由起始排列、由末尾排列、等距排列，靠头尾排列 flex-wrap:wrap|nowrap; //是否可以换行}.box p{ align-self:center|flex-start|flex-end; //该单一元素在主轴上居中、由起始排列、由末尾排列 flex-grow:1; //多余空间放大倍数 flex-shrink:1; //空间不够缩小倍数}