发表于: 2019-05-13 15:43:02

1 866


今天完成的事情: 

1.完成提交任务11,完成任务12第一图

明天计划的事情:

1.提交任务12

遇到的问题:

1下面服务价格跟自我介绍, 服务价格那一块设置的是padding-left;14px;  width:85%; margin:0 auto; 

然后我给自我介绍哪一块设置的是margin-left:calc(7.5% + 14px),但是并不对齐,下面是我设置的

margin-left:calc(7.5% + 7px)然后才对齐,找不到原因

   1.1 询问师兄后发现原因,因为我没给服务价格那一块设置box-sizing:border-box;没有设置这个padding就会变成原先的宽度是85%,变成85%+14px,外面margin平分的15%就少了14px,所以左边的边距是(15%-14px)/ 2+14px 右边就是 (15%-14px)/ 2

2 做任务八的时候给父元素设置border-left:1px solid green;box-sizing:border-box; 然后给他的子元素设置宽度为100%,发现子元素的宽度比父元素少了1px

    询问师兄后发现是因为border的宽度占了1px,而子元素的100%并不包括border的宽度,所以少了1px


收获:



任务名称:css11

成果链接:

任务耗时:2019.5.12-2019.5.13 两天

官网脑图:

我的脑图:

任务总结:

这一个任务主要是了解sass,运用sass,sass的安装以及如何在vscode中使用,了解这个后精简一下之前的代码,其他的没有什么难度

sass是一种css开发工具,提供更多便利的写法,使得css的开发变得简单,可维护

1 变量:以$开头,如果变量需要镶嵌在字符串之中,就必须写在#{ }中  

2 计算功能

3 嵌套:允许选择器嵌套,属性也能嵌套,但注意加上冒号,父元素选择&

4 注释:/* */会保留到编译后的文件 /*后面加 ! 表示是重要注释即使是压缩模式编译,也会保留这行注释   //这注释之保留在saa原文件中,编译后被省略

5 继承:@extend命令

6 混合:@mixin定义代码块(可以指定参数和缺省值)         @mixin x( )          @include调用代码块(可以根据需要加入参数)      @include x( )

7颜色参数

8插入文件:@import

9 条件语句:@if   @else

10 循环语句:@for   @while  @each

11 自定义函数




返回列表 返回列表
评论

    分享到