今天完成的事情：

1.完成任务5  2.总结知识点

明天计划的事情：

完成任务6

遇到的问题：

已解决

收获：

用户头像页面：

主要在于背景，为达到效果图，设置

background: url(images/task5-1_02.png) no-repeat ;

background-size: cover;

background-size ：length（设置宽高）、%（以父元素百分比设置）、contain（图像尺寸扩大到最大，以便完全适应内容区域）、cover（图像扩展到足够大，以完全覆盖背景，图像某些部分可能无法出现）

自我介绍：

这部分一开始我使用flex布局固定自我介绍部分的标题部分flex-basis为200px，但发现缩小了。原因是由于自我介绍文本太多导致子项目宽度比父元素大，所以剩余空间为负。由于flex-shrink默认为1等比例缩放，所以达不到目标效果，可以使用gflex-shrink：0达成效果。

总结：flex-grow、flex-shrink、flex-basis这三个属性最好还是一起使用flex属性全部写比较好。

虽然已经找到解决方法，但之前想了很久都没有想透，于是使用了grid布局：

display: grid;

grid-template-columns: 100px 13px auto;

align-items: center;

align-content: center;

grid-template-columns: 100px 13px auto;

设置了三列 放置 ‘自我介绍’‘竖线’‘文本’

align-items: center;

设置单元格内的项目，居中显示

align-content: center;

设置整个表格，居中显示

接下来讲一讲grid布局。

grid布局，是将网页划分为网格的布局，出来容器和项目的概念，还有网格线的概念。

容器属性

dispaly：grid |inline-grid;

grid-template-rows/colums：设置容器的行高列宽。

1. 可以设置：
2. 1.grid-template-rows：10px 10px 10px ;
3. 就是设置三行，每行10px（也可为%）
   

2.grid-template-rows：repeat(3,10px) ;

同上，repeat(重复，行宽) 数值也可设置length、%、或者如repeat(2,10px 30px)，那就相当于.grid-template-rows：10px 20px 10px 20px; 

3.grid-template-rows：repeat(auto-fill,10px) ;

行宽10px，尽可能放置多个行，根据容器大小来定。

4.grid-template-rows：1fr 1fr 1fr ;

三行，每行占容器高度1/3。可以与length、% 同用。

5.grid-template-rows：1fr 1fr minmax(10px,1fr);

第三行行高在10px与1fr之间。

6.grid-template-rows：50px auto 50px;

第二行行高由浏览器决定，一般是占据剩余空间。

7.grid-template-rows：[c1] 50px [c2] auto [c3] 50px [c4];

设置了四个水平网格线的名字分别为c1,c2,c3,c4（由上至下）默认是数字1-4

grid-template-area：“a . c”

假如有一行三列，那就是给第一个单元格起名a、第三个c，第二个 ‘.’ 表示忽略。也可以全部设置成“a a a”即本行三个单元格均为区域a的组成部分

grid-template：以上二者简写

grid-auto-rows/columns：有时候项目超出定好的网格数目，那么浏览器就会自动生成多余的网格来放置它们，这是设定如果出现这种情况自动出现的网格行高列宽。如不指定，浏览器会根据项目大小自动决定。

grid-auto-flow: row | column | row dense | column dense

设定网格内项目如何排列，row为先行后列，row dense 为先行后列且尽量紧密排列，其余同理。

grid：以上六者简写（没有grid-template）

row/column-gap：length；设定项目与项目之间的间距，但不设定项目与容器边框的间距

gap：以上二者简写 r c

justify/align-items:   start | end | center | stretch（默认）

单元格内容对齐方式

place-items: 以上二者简写 align justify

justify/align-content:    start | end | center | stretch | space-around | space-between | space-evenly

整个网格相对于容器对齐方式

space-evenly：同space-around，但列与列/行与行 之间间隔和二者与容器边框之间间隔相同。

place-content: 以上二者简写 align justify

项目属性

justify/align-self：同justify/align-items。

单个项目对齐方式

place-self： 以上二者简写 align justify

grid-column/row-start/end: 网格线

设置项目对应方向的网格线是哪根。

grid-column/row：start/end;   简写

grid-area: 单元格区域名 或者     row-start-网格线/c-s/r-e/c-e

设置项目在哪个区域

补充：

由于切图的psd文件大概是600*1000的页面，所以全部数值减半设定，切出图标使用ps缩小，之后才达成效果图。（如果不在乎pc端也可使用viewport initial-scale为0.5达成）

深度思考：

1.css可以绘制哪些常见的特殊形状？  

使用css绘制形状的好处是：1.放大图像不失真 2.文件占用空间小 3.减少http请求

主要运用属性：position、border-radius(radius：半径)、transform(转变)。

其中，position不再多说，border-radius的值可以设定为具体数值或者百分比，当设置为百分比时，相对的盒子包含border和padding之后的尺寸，如 border-radius: 10% 5% 2% 1%；

第一个10%是指左上角--左边（高）和上边（宽）的10%。

transform属性，对应的值有   rotate-旋转、scale-缩放、skew-倾斜、translate-移动 以及

matrix-矩阵和perspective-透视。

transform的总结我写在了下面网页中：

https://libingbing-li.github.io/myblog/study/css-drawing/transform.html

2.如何理解vertical-align与line-height？

line-height：是指文本行基线(x的下端沿)之间的垂直距离

vertical-align：使行内元素的基线相对于该元素所在行的基线的垂直对齐，常用于图标与文本之间的对齐。

line-height：normal(默认)、number（数字与当前字体尺寸相乘得行间距）、length（固定行间距）、%（基于当前字体尺寸）和inherit。

vertical-align值：baseline(默认，元素在父元素基线上）、sub（垂直对齐文本下标）、super（垂直对齐文本商标）    、top（元素顶端与行中最高元素顶端对齐）、text-top（元素顶端与父元素字体顶端对齐）、bottom（元素底端与最低元素顶端对齐）、text-bottom（元素底端与父元素字体底端对齐）、length、inherit、%（使用line-height的%来排列此元素，允许复制）以及 middle（元素放置在父元素的中部）

line-height会继承，但假如设置父元素line-height：1.5，那么父元素行高就是1.5*字体大小，子元素行高=1.5*子元素字体大小，并非继承父元素行高

3.title与h1、img的alt与title、src与href有什么区别  

1.title与h1

title标签中的内容会在浏览器的标签页上显示，是网页的标题，而h1是网页内部的一个标题标签

2.img的alt和title

alt 是img中的图片资源无法加载的时候，代替图片显示的内容

title 是当鼠标放置在元素上时，显示出的元素的补充说明

3.src和href

href：标识超文本引用 常用a、link

src：引用资源替换当前元素  常用img、script

浏览器识别href的资源会认为是css文件，会并行下载资源而不会停止对当前html文档的解析。

解析src则会停止对html的解析（img中的src不会），直到src的资源加载编译并执行完毕为止。

这也是为什么使用src的script标签要放在body标签最底部的原因，为了让用户尽早看到页面，我们要把js脚本的内容延后下载执行。

5.HTML中dl、ul、ol用哪个比较好？ 

1.dl 定义列表      dt 列表标题 dd列表项

2.ul 无序列表      li列表项

3.ol 有序列表      li列表项