发表于： 2019-04-28 17:56:31
1 813
今天完成的事情：
1.学会给图片添加一个遮罩。
首先给图片外添加一个Div盒子，其次给盒子设置背景色#000000，给图片添加透明度（opacity:0.7），让黑色能透过来。这个方法能实现很多复杂效果。任务五使用这个方法会带来其他问题，头像背景是透明的，会变成灰色。
2.让背景图片随着浏览器保持缩放。
background-repeat: no-repeat;background-size: 100%;
background-size有宽度和高度两个属性值，只设置第一个100%，高度默认是auto，不会拉伸。
size还有cover（使得图片超出容器范围），contain（容器范围内显示最大的图片）。
3.弄清楚flex哪些属性是作用在弹性盒子上，哪些是作用在项目上的。
作用在弹性盒子上的有：display:flex;flex-direction;justify-content;align-itmes;
作用在项目上的有：order;align-self;
4.页面布局首先是设定好元素之间的结构，理清楚盒子与盒子之间的关系。通过css中的flex或者浮动+position等实现。
5.图片保存不同格式有不一样的特点，jpg格式会将图片透明部分填充为白色。
6.插入图片需要设置高度和宽度，才会显示。span标签是具有行局元素的盒子，用来包裹图片不会显示。
7.使用精灵图设置，background-position要设置单位。
8.white-space用来处理元素内的空白。能够使文本强制不换行。
9.任务五完成。
明天计划的事情：
1.优化任务五css代码，写简洁些
2.开始任务六
3.整理水平居中和垂直居中的几种方法
返回列表
评论