盒子模型
关于盒子模型
对于页面中的所有元素，都可看成一个长方形盒子，进而根据属性值来确定盒子的大小
属性值：
- width
- height
- padding
- border
- margin
盒子的总宽为margin-right + border-right + padding-right + width + padding-left + border-left + margin-left
盒子的总高同理
所以在设置盒子属性值时，需要进行计算具体最外层宽和高，防止溢出
关于width与height
只在非内联元素中才生效，如：p，div....
内联元素宽度随内容变化
width
块状元素具有其默认宽度，为100%，占据整行
heigh
heigh的高度取决于元素内容，可对非内联元素进行设置
关于内外边距
padding
在内容盒子外部添加padding值，相当于扩充了盒子的大小
margin
在盒子的内容中添加margin，相当于填充了盒子内部，使得盒子内的内容不从边沿开始，而有一定的距离，不改变盒子的大小，只改变内容可占据的大小
关于缩写
margin/padding：上，右，下，左；
当设置内容较少时，使用普通的属性设置方法更为有效
关于颜色
内外边距的颜色是透明的，外边距颜色为其父元素设置的颜色，内边距颜色为该元素所设置的背景色
关于边框
border属性值后必须设置边框样式，否则无法显示
其次，border属性还可设置颜色及宽度等属性
border也可以单独设置四边的某一边
border-radius
border-radius属性值可用像素，百分比改变半径来确定圆弧弧度，缩写用法同上
display属性
- block
- inline
- inline-block
- none
改变元素本身的display值，使得块级元素和内联元素的显示方式
flex布局
弹性布局
基本概念：
容器属性值
flex-direction
决定主轴排列方向
- row（默认值）：主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在上沿
- column-reverse：主轴为垂直方向，起点在下沿
四种情况的实现结果 row
flex-wrap
决定当一排放不下时，如何进行换行问题
- nowrap（默认值）：不换行
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
wrap：
flex-flow
flex-direction和flex-wrap的简写形式
eg：
.box{
flex-flow:<flex-direction>||<flex-wrap>;
}
justify-content
定义项目在主轴上的对齐方式(水平对齐方式)
- flex-start：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目之间间隔相等
- space-around：每个项目两侧间隔相等，故项目之间的间隔比项目与边框的间隔大一倍
eg:
.box{
justify-content:flex-start|flex-end|center|space-between|space-around;
}
align-items
定义项目在交叉轴上的对齐方式
- flex-start:起点对齐
- flex-end：终点对齐
- center：居中
- baseline：项目的第一行文字的基线对齐
- stretch：默认值，占满整个容器的高度
eg：
.box{
align-items:flex-start|flex-end|center|baseline|stretch;
}
align-content
定义多跟轴线的对齐方式，若项目只有一根轴线，则该属性不起作用
- flex-start:与交叉轴起点对齐
- flex-end：与交叉轴终点对齐
- center：与交叉轴中点对齐
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around：每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边框的间隔大一倍
- stretch：轴线占满整个交叉轴
eg：
.box{
align-content:flex-start|flex-end|center|space-between|space-around|stretch;
}
项目的属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order
定义项目的排列顺序，数值越小，排列越前
eg：
.item{
order:<integer整数>；
}
flex-grow
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
如果所有项目放大属性都为1时，等分剩余空间，若其中一个项目属性为2，其余为1时，则第一个2占据的剩余空间为1的二倍
.item{
flex-grow:num;
}
flex-shrink
定义项目的缩小比例，默认为1
若所有项目属性值都为1，当空间不足时，等比例缩小，若其中一个项目属性为0，其他为1，则空间不足时，为0的不缩小
.item{
flex-shrink:num;
}
flex-basis
定义再分配多余空间之前，项目占据的主轴（main size）空间，即元素的原始尺寸
eg:
.item{
flex-basis:<length>|auto;
}
flex
是flex-grow，flex-shrink，flex-basis的简写，默认值为0，0，auto
快捷值：auto（1 1 auto）和（0 0 auto）
eg:
.item{
flex:none|[flex-grow flex-shrink flex-basis];
}
align-self
align-self允许单个项目设置与其他项目不一样的对齐方式，可以覆盖整体的align-items属性
eg：
.item{
align-self:auto|flex-start|flex-end|center|baseline|stretch
}
