发表于： 2019-11-10 13:09:43
4 917
今天完成的事情：1.写完九宫格，重温一遍知识点 2.学习了nginx的使用 3.重温git以及github使用
明天计划的事情：继续做任务，重温遇到的知识点和学习新的知识点
遇到的问题：1. nginx中文编码出现乱码，解决方式时加上<meta charset="utf-8">或者更改配置文件中编码格式为utf-8 2.git远程仓库(解决) 3.验收标准编码规范标签必需合并是什么意思？
收获：
1.九宫格实现
代码：
效果：
本方法主要使用设置格子css display:inline-block与width:30vw达成效果图，由于使用vw单位(1vw为百分之一浏览器宽度)，所以九宫格随着浏览器宽度大小等比例变化不会变形。
由于head部分设置viewport，所以模拟手机查看也达成效果。
涉及知识：
一、css控制样式不得使用id的原因：
1.id在文档中必须是唯一的，随意使用可能会造成同一文档出现同样id的结果，而class没有这方面的顾虑
2.id选择器权重太高，不利于后续对元素的css样式编写
3.通过id选择元素是最快的，所以一般来讲，js使用id作为钩子来对元素进行操作，而css则用于对元素进行样式编写，二者互不冲突，符合分离原则
二、nginx使用
下载后运行，输入localhost就可以查看nginx中html文件夹index.html，可以修改此html文件为自己的文件，也可以给此文件添加链接到自己文件查看。
在手机上输入电脑ip地址(同wifi下)，也可以查看此文件
三、git远程仓库
在github上新建仓库，然后cd到自己的本地git仓库，再git命令行输入：
git clone git@github.com:libingbing-li/it-task.git
那么本地git仓库就会多出一个文件夹it-task，由于我新建此仓库时自动创建了README.md文件，所以这个文件夹中也会有README.md文件。
cd it-task
git push -u origin master
与远程仓库建立完链接，复制css-1文件夹(本次任务)到it-task文件夹中
git add css-1
git commit -m "css任务一 九宫格"
git push
再次刷新github上it-task仓库，发现css-1文件夹已存在，结束。
深度思考：
1.HTML文件里开头的Doctype有什么作用
<!doctype html>可以告诉浏览器应该以html5语法来解析文档，使浏览器进入标准模式，各个浏览器在展现页面的时候就会按同一个标准进行。而如果不写，那么每个浏览器都会按照自己的标准来解析文档渲染页面，称为怪异模式，而在怪异模式下，我们无法预料到各个浏览器会如何渲染，导致每个浏览器呈现出的页面可能都不同，无法解决兼容问题。
2.如何理解盒模型及其content、padding、border、margin？
盒模型是由content、padding、border、margin组成的，一般情况下，设置盒子的宽高是指设置内容区的宽高，所以很容易造成设置好宽高之后加上padding和border页面上的内容会变大，这个问题可以由 box-sizing: border-box; 来解决，这样设置的宽高就包含了padding和border，而margin可以用来控制居中，一般通过设置margin：auto来达成水平居中效果。
padding、border、margin都可以设置单独方向或多个方向
padding和margin的区别：元素的背景色可以在padding部分出现，但不会在margin部分出现。
可以在chrome的开发者工具-Elements部分定位元素查看它的盒模型。
3. 常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别
display: inline-block
行内块元素，行内可有其他元素，宽度由内容撑开，可设置宽高，margin、padding各个方向都有效
常见元素：img、input
display: block
块元素，独占一行，宽度与浏览器宽度同宽(有父元素则和父元素的内容同宽)，可设置宽高，margin、padding各个方向都有效
常见元素：div、h1~h6、p、ol、ul等
dispaly: inline
行内元素，行内可有其他元素，宽度由内容撑开，不可设置宽高，margin、padding只有左右方向有效
常见元素：span、a等
除去以上属性，html还有一种可变元素，根据上下文决定display的值为inline还是bloc
返回列表
评论