Day 3

今天完成的事情

       今天完成了任务一

       解决了昨天困扰很久的页面空白显示的问题

       拓展了解了圆角的%及px两种表现形式

       get到还可以运用chorme的f12来直观的观察每一行代码

       配置了ngnix

遇到的问题

       昨天困扰我很久，写好代码但没办法在网页上显示出来，今天咨询了很多人才知道原来是我没有设置html.body的高宽，被默认为auto，又由于我设置的box高度及宽度为百分比，所以body没有被撑开。后添加了代码

html,body{
height: 100%;
 width: 100%;
}
*{
margin: 0;
 padding: 0;
}

以解决问题，并在body内添加了背景色以观察盒子模型的具体变化。

       一开始每个box的宽度及高度都设置为30%，但发现每个格子都独占一行，添加了float :left，随后发现格子并不能以正方形的形式存在，而是会随窗口的变化而变化高宽的矩形，上网查阅了一些资料，得知padding与元素宽度存在依存关系，如果元素的padding属性以百分比形式表现，那么，padding的大小是以该元素的自身宽度为参考的，所以我们可以将height设为0，由padding撑开盒子高度，达到高宽比例相同的效果，但这样岂不是要求所有的元素只能浮动在padding的上方，会不会存在元素们被padding挤出盒子的情况呢？

       好像圆角也可以用px和%来设置，我有了解到 如px

border-radius: 25px;

是将每个圆角的水平及垂直半径设定为15px，并可以以左上角为起点顺时针设置

        又%

border-radius: 25%;

是设置水平及垂直半径为对应高宽的百分占比。

       很伤心的是我的chorme老是出问题，现在偶尔还是会出现打不开的问题，过不久就又自己好了，百度也出不来，但只要可以打开，就可以实时编辑了，努力总算没有白费

      以为自己完成了任务一，去查看任务详情时发现提示说需要配置nginx，虽然师兄说了暂时不需要配置但还是完成了进行到一半的工作

      刚开始怎么都不能出现welcome to nginx的画面，折腾了好久，后似乎是因为换了一个版本然后就成功了，

       紧接着又出现了新的问题，

更改了.conf里的nginx.conf的文件路径

打开浏览器输入localhost:80\test1.html又出错了，出现如下画面，不知道哪里出了问题

收获

       对文档流中将子元素设置为浮动后父元素高度坍塌的问题有了更直观清楚的理解，以后要多加注意这方面的问题。

       对各标签的作用有了进一步的认识。

       对完成一个任务的具体思路有了更清晰的了解

明天计划学习

       开始尝试独立完成任务二，并继续学习其他的标签和css的内容，多学习，多记笔记