11月22日笔记

补充

盒子模型：外边距（margin）+border（边框）+内边距（padding）+content（内容）

添加box-sizing:border-box属性，padding和border的值就不会影响元素的宽高，相当于把padding和border的值算在content里。盒子模型会自动根据padding和border的值来调整content的值，不需要手动调整。

Css3弹性盒子

弹性盒子由弹性容器和弹性子元素组成。弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。弹性容器内包括一个或多个弹性子元素。

Display:flex是一种布局方式既可以应用于容器中，也可以应用于行内元素，使子元素在一行。给最近的父元素添加。

Flex是flexible box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。设为flex布局后，子元素的float、clear和vertical-align属性将失效。

Flex-direction（容器内元素的排列方向 默认横向排列）

Flex-direction:row（默认）  主轴为水平方向，起点在左端

Flex-direction:row-reverse  主轴为水平方向，起点在右端

Flex-direction：column  主轴为垂直方向，起点在上沿

Flex-direction：column-reverse  主轴为垂直方向，起点在下沿

Flex-wrap（容器内元素的换行 默认不换行）

Flex-wrap：nowrap（默认） 不换行

Flex-wrap：wrap  换行，第一行在上方

Flex-wrap：wrap-reverse  换行，第一行在下方

Justify-content（元素在主轴上的排列）

Justify-content:flex-start（默认） 左对齐

Justify-content:flex-end  右对齐

Justify-content:center  居中

Justify-content:space-around  平分剩余空间

Justify-content:space-between  先两边贴边，在平分剩余空间

Align-items（元素在侧轴方向上的对齐方式）

Align-items:flex-start  从上到下

Align-items:flex-end  从下到上

Align-items:center  挤在一起居中

Align-items:stretch（默认）  拉伸

Align-items:baseline  项目的第一行文字的基线对齐

Align-content（在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项垂直）

Align-content:flex-start（默认） 在侧轴头部开始排列

Align-content:flex-end  在侧轴尾部开始排列

Align-content:center  在侧轴中间显示

Align-content:space-around  子项在侧轴平分剩余空间

Align-content:space-between  子项在侧轴先分布在两头，再平分剩余空间

项目属性

Order：项目的排列顺序。数值越小，排列越靠前，默认值为0

Flex-grow：项目的放大比例，默认值为0，即如果存在剩余空间，也不放大

flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

Flex-basis

Flex：属性是Flex-grow、flex-shrink和Flex-basis的简写，默认值为0 1 auto  后两个属性可选

Align-self：属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性

grid布局

Display:grid  默认是块元素

Display:inline-grid  行内块元素

注意：设置为grid后，子元素的float,display:inline-block,display:table-cell,vertical-align,column等设置都将失效。

Grid-template-columns  定义每一列的宽

Grid-template-columns:100px 100px 100px;或Grid-template-columns:repeat(3,100px);

总共三列，每列列宽是100px。

Grid-template-rows  定义每一列的行高

Grid-template-rows:100px 100px 100px;或Grid-template-rows:repeat(3,100px);

从上到下，每行高度为100px。

Fr(fraction):倍数  

如果有两列，Grid-template-columns:1fr 2fr;

后者是前者的两倍

Row-gap:定义行间隙的尺寸

Column-gap:定义列间隙的尺寸