DAY1→HTML1-29DAY2→HTML29-53DAY3→HTMLCSS53-79DAY4→CSS79-108DAY5→CSS108-133DAY6→CSS133-147182-18361.伸缩盒模型一简介1轻松控制元素分布方式元素对齐方式元素视觉顺序…2新的布局方案flex布局3传统布局displaypositionfloat二容器与项目box-sizing: border-box;设定的宽和高为盒子的最终大小1伸缩容器给元素设置display: flex;或display: inline-flex该元素就变为了伸缩容器2伸缩项目伸缩容器的所有子元素不包括孙子元素等后代伸缩项目会全部块状化三主轴与侧轴主轴伸缩项目沿着主轴排列主轴默认是水平的默认方向为左→右侧轴与主轴垂直的就是侧轴侧轴默认是垂直的默认方向为上→下四主轴方向flex-directio:常用值row主轴方向水平从左到右默认值row-revers主轴方向水平从右到左column主轴方向垂直从上到下column-revers主轴方向垂直从下到上注改变了主轴的方向侧轴方向也随之改变五主轴上的换行方式flex-wrap:常用值nowrap默认值不换行wrap自动换行wrap-reverse反向换行六复合属性flex-flow写法flex-flow: row wrap七主轴对齐方式justify-content:常用值flex-start主轴的起始位置flex-end主轴的结束位置flex-center中间对齐space-around项目均匀的分布在一行中项目与项目之间的距离是相等的且是项目距边缘的二倍space-between项目均匀的分布在一行中项目与项目之间的距离是相等的且项目距边缘无距离space-evenly项目均匀的分布在一行中八侧轴对齐方式1一行align-itemsstretch默认值如果伸缩项目未设置高度将占满整个容器的高度flex-start侧轴的起点对齐flex-end侧轴的终点对齐center侧轴的中点对齐baseline伸缩项目的第一行文字的基线对齐2多行align-contentstretch默认值如果伸缩项目未设置高度将占满侧轴flex-start侧轴的起点对齐flex-end侧轴的终点对齐center侧轴的中点对齐space-around项目均匀的分布在侧轴中项目与项目之间的距离是相等的且是项目距边缘的二倍space-between项目均匀的分布在侧轴中项目与项目之间的距离是相等的且项目距边缘无距离space-evenly项目均匀的分布在侧轴中九元素水平垂直居中1方案一display:flex;justify-content:center;align-itmes:center;2方案二子元素写上margin:auto;十基准长度flex-basis: auto/30px设置的是主轴方向的基准长度会让宽度和高度失效注主轴横向宽度失效主轴纵向高度失效十一伸缩性_伸flex-grow定义伸缩项目的放大比例默认为0即纵使主轴存在剩余空间也不拉伸放大例子下面代码为inner1占了六分之一inner2占了六分之二inner3占了六分之三.inner1{flex-grow:1;}.inner2{flex-grow:2;}.inner3{flex-grow:3;}十二伸缩性_缩flex-shrink定义了项目的压缩比例默认为1即如果空间不足该项目将会缩小例子三个收缩项目宽度分别为200px300px200px它们的flex-shrink值分别为123若想刚好容下三个项目需要总宽度为700px但目前容器只有400px还差300px所以每个人都需要收缩一下才可以放下具体收缩值这样计算1.计算分母200×1300×2200×314002.计算比例项目一200×1/ 1400比例值1项目二300×2/ 1400比例值2项目三200×3/ 1400比例值33.计算最终压缩大小项目一需要收缩比例值1 × 300项目二需要收缩比例值2 × 300项目三需要收缩比例值3 × 300十三flex复合属性复合了flex-frowflex-shrinkflex-basis三个属性默认值为0 1 auto若写flex: 1 1 auto则可简写为: flex: auto若写flex: 1 1 0则可简写为: flex: 1若写flex: 0 0 auto则可简写为: flex: none若写flex: 0 1 auto则可简写为: flex: 0 auto即flex初始值十四项目排序与单独对齐1项目排序order默认值为0数值越小项目越靠前2单独对齐align-self默认值为auto表示继承父元素的align-items十五布局html,body{width:100%;height:100%;}设置背景图为整个网页background-size: cover;设置边框圆角border-radius: 8px;