css怪异盒模型和弹性盒布局(flex)详解及其案例

一、怪异盒模型

怪异盒模型的属性是box-sizing，他有两个属性值：

1、content-box

　　这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

　　简而言之就是，一般的盒子都是属于这种，最显著的特点就是加上padding后，盒子会被撑大，需要减去对应的高度或宽度。

2、border-box

　　为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

　　简而言之，为盒子添加高度或宽度之后，再给盒子添加border和padding不会使盒子撑大，边框和padding都限制在盒子内部，常用于移动端。

二、弹性盒布局

Flex容器：采用 Flex 布局的元素的父元素；
Flex项目：采用 Flex 布局的元素的父元素的子元素；
容器默认存在两根轴：水平的主轴和垂直的交叉轴。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；

交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。

单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

能实现下面这种骰子布局，那么恭喜你，就说明弹性盒已经掌握了，下面介绍弹性盒具体的用法及案例

flex容器属性

1、触发弹性盒：display:flex、inline-flex

　　注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

2、flex-direction属性决定主轴的方向（即项目的排列方向）

　　flex-direction: row | row-reverse | column | column-reverse;

3、flex-wrap属性，定义子元素是否换行显示　　

　　flex-wrap: nowrap(默认值，不换行) | wrap（换行） | wrap-reverse(反向换行);

4、 flex-flow

　　flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;

5、 justify-content属性定义了项目在主轴（）上的对齐方式

　　justify-content: flex-start | flex-end | center | space-between(两端对齐) | space-around（自动分配）;

6、align-items属性定义项目在侧轴上如何对齐

　　align-items: flex-start | flex-end | center | baseline | stretch（默认值）;

7、align-content属性定义了多根轴线的对齐方式。对于单行子元素，该属性不起作用。　

flex项目属性

1、align-self属性　

说明：

　　Internet Explorer 和 Safari 浏览器不支持 align-self 属性
　　align-self 属性规定灵活容器内被选中项目的对齐方式。
　　注意：align-self 属性可重写灵活容器的 align-items 属性。
　　属性值
　　　　auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
　　　　Stretch 元素被拉伸以适应容器。
　　　　Center 元素位于容器的中心。
　　　　flex-start 元素位于容器的开头。
　　　　flex-end 元素位于容器的结尾。

2、order

说明：
　　number排序优先级，数字越大越往后排，默认为0，支持负数。

3、flex　

说明：
　　复合属性。设置或检索弹性盒模型对象的子元素如何分配空间
　　详细属性值：
　　缩写「flex: 1」, 则其计算值为「1 1 0%」
　　缩写「flex: auto」, 则其计算值为「1 1 auto」
　　flex: none」, 则其计算值为「0 0 auto」
　　flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

4、flex-xxx　　

　　flex-grow
　　　　一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
　　flex-shrink
　　　　一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
　　flex-basis
　　　　项目的长度

具体实现代码如下所示：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

html,body{

width: 100%;

height: 100%;

}

body{

display: flex;

justify-content: space-around;

align-items: center;

flex-wrap: wrap;

}

body>div{

width: 100px;

height: 100px;

background-color: #eee;

}

span{

display: block;

width: 24px;

height: 24px;

background-color: #000;

border-radius: 12px;

}

div:nth-child(1){

display: flex;

justify-content: center;

align-items: center;

}

div:nth-child(2){

display: flex;

justify-content: space-between;

}

div:nth-child(2) span:nth-child(2){

align-self: flex-end;

}

div:nth-child(3){

display: flex;

justify-content: space-between;

}

div:nth-child(3) span:nth-child(2){

align-self: center;

}

div:nth-child(3) span:nth-child(3){

align-self: flex-end;

}

div:nth-child(4){

display: flex;

justify-content: space-between;

}

div:nth-child(4) p{

display: flex;

flex-direction: column;

justify-content: space-between;

}

div:nth-child(5){

display: flex;

justify-content: space-between;

}

div:nth-child(5) p{

display: flex;

flex-direction: column;

justify-content: space-between;

}

div:nth-child(5) p:nth-child(2){

justify-content: center;

}

div:nth-child(6){

display: flex;

justify-content: space-between;

}

div:nth-child(6) p{

display: flex;

flex-direction: column;

justify-content: space-between;

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

<p>

</p>

<p>

</p>

</div>

<div>

<p>

</p>

<p>

</p>

<p>

</p>

</div>

<div>

<p>

</p>

<p>

</p>

</div>

</body>

</html>

如果感觉对自己有帮助，麻烦点一下关注，会一直盒大家分享知识的，谢谢！！！