前几天，都是看了一下css的知识点，昨天没有把九宫格弄出来，今天鼓捣了一天终于弄出来了。

其实是参考了一位同学的代码的。

下面是自己记的笔记（有的直接是copy的内容）：

一 html 标签讲解：https://www.cnblogs.com/qianguyihao/p/4852863.html

二 盒子模型:CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，

通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。对于是盒子的元素，如果没有特殊设置，其默认总是占独立的一行，

宽度为浏览器窗口的宽度，在其前后的元素不管是不是盒子，都只能排列在它的上面或者下面，即上下累加着进行排列。HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，

即内容区（content）、填充(padding)、边框(border)和空白边(margin)。 

https://baike.baidu.com/item/CSS%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B/9814562?fr=aladdin#reference-[2]-2758739-wrap

三 html 引入外部css 通过标签<link rel="stylesheet"type="text/css"href="nine.css">

四 为什么出现手机适配问题： 手机单位尺寸下像素比pc多

   出现上述的原因，主要还是因为屏幕css渲染的逻辑像素与屏幕的物理像素意义上不同导致的。以前在PC浏览器页面的开发上，

   css使用的1px逻辑像素跟电脑屏幕的1px的物理像素是对应的。但是换在手机上却不一样了，因为移动设设备屏幕尺寸一般恒定的在4-6寸，

   而屏幕物理像素点越来越多。那么单位区域内，一个逻辑像素就需要多个物理像素点去展示，这个概念就称为设备像素比例（devicePixelRatio，可以通过Window对象获取但不一定准确。

   devicePixelRatio = 物理像素 / 逻辑像素）。 根据像素比例的公式，我们可以通过物理像素和设备像素比（与屏幕密度有关,可以网上搜索下如何获取设备屏幕密度以及设备像素比）

   去得出实际需要的逻辑像素。最后通过设备实际物理长宽像素值，去计算出逻辑长宽像素值，此时的1px才与css中1px是等同的概念（如果设计师给的是1080P的设计稿，

   这时候就要根据实际的逻辑像素，对标注单位进行等量放缩了）。

   适配方法：   引入下面的标签

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0， user-scalable=no">

width         设置layout viewport  的宽度，为一个正整数，或字符串"width-device"

initial-scale 设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数

height         设置layout viewport  的高度，这个属性并不重要，很少使用

user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

   上述代码就是告诉浏览器，使其layout viewport等于设备的宽度，设置缩放值为1，禁止用户缩放，强行设置最大最小缩放比为1.0。最后我们可以得到的效果就是一个没有横向滚动条的，

   且页面最大的宽度等于设备宽度的这么一个页面了。后续我们页面设计就可以按照实际的逻辑像素进行设计。这里我贴下一些设备通过其物理像素和设备比例计算出来后的一个合适的逻辑分辨率值。

  viewport 解决屏幕宽度适配的方法 加上<meta name="viewport" content="width=device-width, initial-scale=1"> 标签 

参考文章：https://www.cnblogs.com/2050/p/3877280.html

五 linux 下nginx 默认安装，文件的路径

   linux 下 nginx 的安装 https://www.cnblogs.com/xdp-gacl/p/5290155.html

路径 作用

/usr/sbin/nginx nginx启动路径

/etc/nginx 存放nginx的配置文件

/usr/share/nginx 默认的nginx资源库

六 window 链接linux 可以用xshell 这个工具，有可视化页面，而且可以在windows 电脑直接修改linux 文件。

在做第一个任务的过程中，遇到了内部div 刚开始是30px 改成31% 内容直接消失 的问题，看来之前同学的解答才知道，是因为父元素的空间为0 所以子元素的定义百分比也就为0，所以显示不出来内容 。

明天准备看下任务2