发表于: 2019-04-15 14:13:14

1 789


今天完成的事情:

1、熟悉vscode,达到能了解其基本插件安装,文件创建保存,字体设定等常规功能。

2、了解html构成:

    2-1、

<!DOCTYPE html>

   html声明,大概了解了html5之前的声明方式,还无法手写。

    2-2、

<meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

    头部文件内的基本了解,设定html的编码格式,viewport缩放设定。

    2-3、

  <title>Document</title>

    头部title用于设定浏览器标题栏信息。

3、了解行级元素(a span input等)和块级元素(div h1-h6 ol ul p等)

4、了解css格式,基本的选择器,标签选择器(直接写标签名),类选择器(.(class名))

5、了解简单的盒模型。


明天计划的事情:完成任务2,并尽量了解和完成任务3的基本代码


遇到的问题:

1、九宫格通过float宽度设置只显示两个div

解决:

.box{
       height: 200px;
       width: calc(calc(100% / 3) - 12px); /*盒模型计算,每个盒子的宽度设置为总宽度的100%,但是每个盒子的左右边框各占1px,外边距各占5px,所以每个box的实际宽度必须减去2px的边框和10px的margin*/
       margin: 5px;
       float: left;
       border: 1px solid #000;
       border-radius: 2px;
       background-color: #ccc;
   }

     宽度本身设置为100%/3本身没有问题,但是没有考虑计算边框和margin。   解决方式:1、calc再次计算减去边框和margin。2、box-size属性,只减去margin。

2、calc使用时不生效

现象:浏览器调试中提示无效的属性值

解决:

width: calc(calc(100% / 3) - 12px);

calc中运算符左右必须用空格隔开。

3、只能设定固定高度,未达成自适应高度。

padding-bottom: calc(calc(100% / 3) - 12px);

利用内边距撑开高度。

收获:

1、体验目标性任务指导学习

2、通过网络解决简单问题的方式


返回列表 返回列表
评论

    分享到