昨天首先学习了css的盒子模型，了解了盒子由内容content，内边距padding，边框border，外边距margin四部分组成，在标准盒子模型里，宽度width和高度height是指内容content的宽和高，而盒子的总宽度=内容宽度+左右内边距padding宽度+左右边框border宽度+左右外边距margin宽度，高度以此类推。

      内边距padding有背景颜色的属性，可以用来填充边框内部所有区域，由于内边距有四个边，因此写尺寸的时候可以分别写四个边padding-top/right/bottom/left的尺寸，也可以直接空格分开四个值，例如padding：10px 20px 30px 40pc；此时顺序由顶部开始顺时针算，即上右下左。当三个值的时候padding：10px 20px 30px；第四个值等于三者中间的值，即10，20，30，20这样。当两个值的时候padding： 10px 20px；使用反复横跳的算法，即10，20，10，20这样。当有总的边距和分别的边距值时例如padding：10px；padding-right：20px；后面小范围会覆盖前面大范围的描述，即10，20，10，10。如果反过来padding-right：20px；padding：10px；则小范围的被大范围覆盖，失效了，变成10，10，10，10。

    border的属性与padding类似，padding的背景颜色在border直接是颜色，border会多一个属性叫做线型，即是实线，虚线，还是其他的。marght与padding属性类似，但是无法进行颜色修改，默认为透明。此时外边距颜色取决与父类元素的padding背景属性。

    学习完了盒子模型之后，再去学习了浮动float，在了解浮动之前，先要了解没有使用浮动时，默认的标准文档流，此时标签分为块元素和行内元素，块元素可以添加宽度，高度，不写宽度的话会默认占整行，行内元素不能设置宽度，高度，默认宽度就是内容的宽度，标准文档流还有三个默认的现象，1.tab，回车，空格无论多少都会折叠成一个空格。2.行内元素排列时会默认底边对齐。3.自动换行，写满一行会自动跳到下一行。而使用display：inline；可以将块元素变为行内元素，使用display：block；可以将行内元素变为块元素。

   想要脱离标准文本流时，可以使用浮动，绝对定位，固定定位三种方式，用的最多的就是浮动了，也是详细学习的一种方式。使用浮动后会使元素脱离标准文档流，可以和标准文档流的内容重叠，还会有字围的效果，即文字会围绕浮动的元素而不会被遮挡。无论是块元素还是行内与元素，使用浮动后，默认的宽度会成为内容的宽度，而且都能设置宽度高度。当一行占不满时，会按照浮动时的方向进行贴靠，例如float：left；，会使相应的元素都向左贴靠。

    想要清除浮动时，可以使用下列几种方法：1.给父类元素添加大于子类的高度。2.使用clear：both；此时由于父类没有高度，使margin失效。3.使用隔墙法，分为外墙法和内墙法。外墙法是在两个块元素中间添加一个带clear：both；的有高度无内容的空块元素，将两个块元素隔开。内墙法则是在一个块元素里面再放一个带clear：both;的块元素，将这个块元素撑出来一个高度，这个高度会自适应子类元素的高度。4.给父类元素添加overflow：hidden；此时父类元素可以被子类元素撑出高度。

    再然后使用学到的盒子模型和浮动进行九宫格制作，宽度和高度开始设置的px，没办法随屏幕变化，后来看别的师兄日报里提到了vw，知道了自适应宽度这个属性，还有css圆角去菜鸟论坛搜索了一下也找到了，成功制作了九宫格。

     然后学习使用nginx，成功让九宫格在手机显示出来，如图所示。

    接着进行git和github的学习，github安装且使用了（直接翻译页面）将九宫格的文件传上去了。git这个软件安装成功了，但是还没弄懂干啥用的，准备今天学习，再学习一下搭建服务器