【每天进步一点点系列~赶在十二点前发日报~】

今日完成：

1.白天：修改部分CSS（ife/task7）

2.晚上：学Gird布局的文档资料

明日计划：

1.早上9.30开始继续做任务，完成至少一个页面；

2.学习新git的正确使用方法。（github-desktop已经崩溃，只能本地使用，一同步就错误，百度谷歌各种方法无效TAT）

今日不足：

1.写页面布局的时候没有良好的大局观，导致后面修改时候会有一些麻烦，要学会养成良好的习惯；

2.在github-desktop无法同步问题上耗费大量时间查找解决方法，最终还是无能为力。

3.百度了半天还是不知道路由器中SS代理的地址个端口=。=，这样只能翻网页，客户端翻不了好难受啊=。=

今日收获：【笔记部分】

【1.学会新的翻墙姿势】

（1）SS，全称ShadowSocks，免费又好用，今天试到一个免费的日本节点（下载500K|上传200K），关键SS还能直接丢路由器里实现自动翻墙，规则能自己设置（全局、GFW、大陆白名单、游戏等）；

（2）还是SS，关于负载均衡，因为都是英文所以捣鼓了有些久=。=其实就是多存上几个优质的SS线路，让这该死防火墙长城翻起来轻松加愉快(づ· 3·)づ

    （3）VPN，虽然很早以前就会了，自己还租过腾讯云学生机搭建OPENVPN玩儿，说实话，这货免费的还真没瞧见好用的，不是限速特别厉害就是限制流量；

【2.设置背景图片拉伸background-size】

.test{background-size：100%}

【3.限制浏览器最小宽度】

body{mix：1280px}

【4.全局样式跟局部样式】

在使用全局样式如公共容器.public-container，在CSS的/*reset*/部分设置完了虽好不要在后面部分改动，容器内的元素可能会跑到别的地方=。=比如使用absolute这种依靠父级和祖父级定位的方法时，会发生意想不到的效果。

【5.关于media媒体查询】

（1）横屏、竖屏：(orientation：landscape/ portrait)

@media screen and (orientation：landscape){

    .iPadLandscape{

        width：30%;

        float：right;

        }

        }

@media screen and (orientation：portrait){

    .iPadPortrait{

        clear:both;

        }

        }

（2）窗口尺寸、设备尺寸：(min/max-width:600px)、(min/max-divice-width:600px)

min/max-width可以同时判断设备屏幕尺寸与浏览器实际宽度；

min/max-divice-width用来判断设备本身的屏幕尺寸，忽略其上运行的浏览器是否由于没有最大化而在尺寸上与设备屏幕尺寸产生不一致的情况。

@media screen and (min-width:600px){

    .hereIsMyClass{

        width:30%;

        wloat:right;

        }

    }

@media screen and (min-device-width:600px){

    .hereIsMyClass{

        width:30%;

        wloat:right;

        }

    }

注意：实际操作中min跟max可以组合使用

    @media screen (min-width: 800px) and (max-width: 1200px){

        .class{

            width:30%;

            float:right;

        }

    }

【6.通过display:none来根据需要隐藏模块，如侧边栏】

【7.关于CSS Grid网格系统】

（1）设置容器container

.grid-container {

width : 100%;

max-width : 1200px;

}

（2）关于行：

防止列溢出到其他行

.row:before, .row:after {

content:"";

display: table ;

clear:both;

}

（3）关于列定位：

         a：最不容易出错的方法float

         b：如果列为空，浮动栏将彼此堆叠在一起。为防止这种情况，给列一个1px的最小高度。

         [class*='col-'] {

        float: left;

        min-height: 1px;

    }

（4）列宽设置

    [class*='col-'] {

        float: left;

        min-height: 1px;

        width: 16.66%;

    }

         注意：可以根据每行需要设置不同列宽

    .row .col-1{

        width: 16.66%;

    }

    .row .col-2{

        width: 33.33%;

    }

    .row .col-3{

        width: 50%;

    }

（5）设置列边框

用box-sizing: border-box创建

    .grid-container *{

        box-sizing: border-box;

    }

    [class*='col-'] {

        float: left;

        min-height: 1px;

        width: 16.66%;

        /*-- 下面是边框尺寸 --*/

        padding: 12px;

    }

【今天就写这么多吧，话说回来，英文页面虽然每个词都见过但是连成一句话就不知道什么意思了，还是得好好学英语吖~然后想问问各位大佬有木有好的翻译插件推荐啊，有道翻译单词还好，段落翻译的还不如我自己看QAQ】