[散修弟子]CSS-8584|2020年03月11日的日报-技能树.IT修真院

发表于： 2020-03-11 23:18:20

1 1287

一.今日完成的内容和收获：
（一）.实现img图片垂直居中的三种方法：
1.使用flex完成垂直居中
（1）首先要创建一个包裹着图片的div元素
（2）将div元素的display属性设置为flex
（3）再增加一条属性align-items：center；即可完成垂直居中

2.垄断display：table来完成垂直居中
（1）首先创建一个div元素以及包裹着图片的div元素（两层嵌套）
（2）给img父元素配置display属性为table
（3）把包裹着图片的div元素的display属性配置为table-cell，再设置一个vertical-align：middle；的属性
（4）若同时想实现水平居中，给最外层的div添加text-align：center属性

3.用绝对定位实现垂直居中（兼容性好）
（1）一张包裹在div中的图片，给父元素div配置为相对定位（position：relative），同时给图片img增加绝对定位属性（position：absolute）
（2）将图片元素的top属性配置为50%
（3）在配置一个负的margin-top值，其数值为想要实现垂直居中的元素的高度的一般；若不确定元素的高度，可以不用margin-top，应用transform:translateY(-50%);属性

（二）background属性
1.background-image：规定使用的图像背景
语法： background-image: url(图片路径);

2.background-position：设置背景图片的位置：若都只规定了一个值，那么第二个值是center
（1）top、center、bottom：每个又可分为left、center、right
（2）x% y% 第一个是水平位置，第二个是垂直位置
（3）xpos ypos 第一个是水平位置，第二个是垂直位置单位是像素

3.background-repeat：图像可以无限平铺、沿着某个轴（x 轴或 y 轴）平铺，或者根本不平铺
（1）repeat：默认，背景图像在垂直方向和水平方向重复
（2）repeat-x：背景图像在水平方向重复
（3）repeat-y：背景图像在垂直方向重复
（4）no-repeat: 背景图像仅显示一次
（5）inherit：继承父元素的background-repeat的值

4.background-size：规定背景图像的尺寸
（1）length：设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度
（2）percentage：以父元素的百分比来设置背景图像的宽度和高度
（3）cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
（4）contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

二.遇到的问题
1.无法将图片垂直居中，后来经过百度查找解决了问题，若使用方法一需要使用两个类选择器，父元素div中的选择器用来让图片垂直居中以及图片位置的水平偏移，img中的选择器来负责图片的大小；方法二需要使用的选择器更多，所以最终选择了方法三

2.在移动端布局中，在上下滑动时，fixed失效了，头部不会滚定不动，而且会被下面的内容覆盖住，目前还没有解决，明天继续解决。

三.明天的计划安排
1.解决fixed失效的问题
2.查看学习资料——CSS代码规范，然后对自己的代码进行优化
3.配置ngin，上传学院服务器，上传githu
4.学习深度思考的内容