怪异盒模型 / 弹性盒模型

怪异盒模型 / 弹性盒模型

标准盒模型
我们平常状态下所写的，即为标准盒模型状态下的css样式

.box{
		width:200px;
		height: 200px;
		background-color: purple;
		padding: 20px;
		margin: 20px;
		box-sizing:content-box;	/*开启标准盒模型（通常为默认状态，一般不写）*/ 
	}

怪异盒模型（IE盒模型）

• 开启怪异盒模型
  • box-sizing :
    参数：border-box 怪异
    参数：context-box 标准
    参数：inherit 默认
    参数：initial 继承父级

.p-box{
	width: 200px;
	height: 200px;
	background-color: #CA0000;
	color: wheat;
	box-sizing: border-box; /*开启IE盒模型*/
	padding: 20px;
	margin: 20px;
}

两种模式的区别
标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。
标准模式：box-sizing:content-box; 　　
怪异模式：box-sizing:border-box;

弹性盒模型

盒子阴影

• box-shadow：

  属性值1： 水平位置的偏移 必填
  属性值2： 垂直位置的偏移 必填
  属性值3： 模糊度 可选
  属性值4： 阴影面积 可选
  属性值5： 阴影的颜色 可选
  属性值6： 内外阴影 默认外部阴影
  inset: 内部阴影*

 box-shadow: 10px 10px 15px 3px black;

开启弹性盒模型

display: flex;

主轴上的对齐方式

• justify-content

  • flex-start: 开始位置 (默认值)

  • flex-end: 结束位置

  • center: 中心位置

  • space-around: 两端对齐 (元素到边框的距离是 元素之间的一半)

  • space-between: 两端对齐 (元素到边框之间没有距离)

justify-content:space-around;

主轴的方向

• flex-direction
  • row（默认值）：从左到右
  • row-reverse： 从右到左
  • column：从上到下
  • column-reverse：从下到上

flex-direction: column-reverse;

交叉轴上的对齐方式

• align-items:

  • flex-start：交叉轴的起点对齐

  • flex-end：交叉轴的终点对齐

  • center：交叉轴的中点对齐

  • baseline: 项⽬的第⼀⾏⽂字的基线对齐

  • stretch（默认值）：如果项⽬未设置高度或设为auto，将占满整个容器的高度

align-items: center;

开启换行
弹性盒模型下， 默认是不换行

• flex-wrap：
  • nowrap: 不换行
  • wrap: 换行
  • wrap-reverse : 倒序换行

flex-wrap: wrap;

解决换行时出现的bug：

！align-content 规定多行，必须为多行，对单行无效，去掉多于的行间距

• align-content：
  align-content 的功能和 align-item类似

！不同点： 该属性必须多行的时候，对单行元素无效；同时，也可以去掉多余的行间距

align-content: flex-start;

设置单个元素在交叉轴上的位置

• align-self:
  • flex-start：交叉轴的起点对齐
  • flex-end：交叉轴的终点对齐
  • center：交叉轴的中点对齐
  • baseline: 项⽬的第⼀⾏⽂字的基线对齐
    stretch（默认值）：如果项⽬未设置高度或设为auto，将占满整个容器的高度

.main>div:nth-child(2){
		/*设置 单个元素 在交叉轴上的 对齐方式*/
		align-self: center;
	}
	.main>div:nth-child(3){
		align-self: flex-end;
	}

元素的排序
需要将当前层级的每一个元素都排列
否则： 排序的元素和未排序的元素 将按照两套排序规则走

.box:nth-child(1){
	order: 3;
}
.box:nth-child(2){
    order: 2;
}
.box:nth-child(3){
	order: 1;
}

元素的缩放
flex 的收缩 默认是按照等比
超出的部分 / 元素总个数 = 每个元素要收缩的面积
如果划分的话，那么所有的元素全部要设置比例

.main{
		width: 300px;
		height: 500px;
		border: 1px solid;
		display: flex;
	}
    .main>div{
        width: 98px;
        height: 98px;
        background-color: #00AAFF;
        border: 1px solid;
    }
    /* 自定义的收缩 */
    .main>div:nth-child(1){
		flex-shrink: 2;
    }
    .main>div:nth-child(2){
        flex-shrink: 1;
    }
    .main>div:nth-child(3){
        flex-shrink: 1;
    }
    .main>div:nth-child(4){
        flex-shrink: 0.5;
    }
    .main>div:nth-child(5){
        flex-shrink: 0.5;
     }
     
    /* 自定义的扩张 */
    /*  .main>div:nth-child(2){
            flex-grow: 1;
        } */
        
	<div class="main">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>