发表于: 2019-08-10 18:14:14

1 924


今天完成的事情:今天完成了任务五,学会了rem的用法,学会了边框的样式设置做出了单侧边框和不全包裹的边框,学会了flex布局,学会了fix窗口定位的方法
明天计划的事情:明天计划做任务六,学习CSS Sprite雪碧图,学习各种不同布局的优缺点
遇到的问题:1、文本自动换行的问题,解决办法是在css中加入white-space:nowrap;

                     2、布局的时候开始使用定位来布局,最后在调试的时候发现文本溢出边框,文本边框以及里面图片不能做到等比例缩放,最后师兄让我查看flex布局方法解决了问题

                 3、背景图片不能完全适应容器大小,查找资料找到一种办法代码如下

background:url(./image/bg.png) no-repeat;
background-size: 100%;
width: 100%;
height: 330px;

收获    :1、flex布局(弹性布局),弹性布局的项目(item)默认没有间隔。默认不改变项目宽度,并且默认左对齐,flex-grow默认0不改变宽度,等于1的时候占据所有剩余宽度

                默认改变高度,用align-self改变高度的变化可以用flex-star(顶部对齐) flex-end(底边对齐) center(居中) stretch(默认高度自动拉伸)而align-items则可以设置                    所有子项目的align-self

              2、字体使用rem单位可以自适应变化,但是要在css中用html声明font-size:62.5%;


返回列表 返回列表
评论

    分享到