什么是响应式web网站

以前我写网的网页习惯的网页都是定宽的，比如最外层设置一个宽度为980px的盒子，这是因为那时候的网页主要显示在pc端上，而pc端显示器的大小差异不会特别大。于是固定宽度的样式写法成为了流行趋势。但是随着移动互联网的到来，设备类型的增多，如智能手机，平板。那么屏幕大小的差异也就凸显出来了，如果每一个屏幕设备宽度写一个样式的话，会发现存在大量重复的样式代码，且工作量会很大，于是我们需要一种减少重复样式，让样式能够自动适应屏幕的解决方案就出来了："响应式"。我们知道不同的设备拥有不同屏幕大小即视口(viewport)，那么我们不可能一个样式适应所有的屏幕大小，那么响应式解决的就是网站自动去识别不同屏幕，然后去使用对应的样式去适应屏幕。

哈喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

志同道合的小伙伴跟我一起学习交流哦！

第二阶段 CSS3

15 CSS四种定位及应用

1 为什么学习定位position

在面试的时候，当面试官问我们为什么要使用flex布局的时候，首先我们得先明白一点，问这个问题面试官到底想要了解什么？简单的回答”好用“肯定是不行的，任何方案和技术的出现都是为了弥补之前的缺陷，所以相比传统的布局方案存在的痛点，flex布局肯定有存在的优势和价值。所以接下来我们得说传统的布局是怎样的形式，然后使用了flex布局又是什么样的形式。

布局的传统解决方案，基于盒子模型，依赖 display，position，float 等属性。它对于那些特殊布局非常不方便。

盒子水平垂直居中有几种方式

1、绝对定位。盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;

2、table-cell布局。父级 display: table-cell; vertical-align: middle;  子级 margin: 0 auto;

3、定位 + transform ; 适用于 子盒子 宽高不定时； （这里是本人常用方法）
    
    position: relative / absolute;
    /*top和left偏移各为50%*/
       top: 50%;
       left: 50%;
    /*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
    transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 （至于何是3D加速 请看浏览器进程与线程篇）

4、flex 布局
    父级： 
        /*flex 布局*/
        display: flex;
        /*实现垂直居中*/
        align-items: center;
        /*实现水平居中*/
        justify-content: center;

再加一种水平方居中的方式 ：margin-left : 50% ; transform: translateX(-50%);

效果图（不会截取网页gif动图[捂脸]）

另外写了一个效果拼图

步骤如下：

一、每一张图片放在一个div中，然后用另一个div容器包裹了所有的图片div。

html代码：

<!------------ 第六个图片盒子开始 ------------><div class="box6">

<div class="item"><img src="./images/mi1.jpg" alt="" /></div>

奇月 发自 凹非寺

量子位 | 公众号 QbitAI

你在网页底部分页看到这样的效果是不是看上去还不错？下面就来看看这是如何实现的吧~

第一种方法：利用border

本节是第四讲的第二十二小节，上一节课为大家介绍了Ajax技术，包括XmlHttpRequest对象和FetchAPI的基本用法，本节为大家继续介绍JavaScript绘制图形的方法（Canvas API），有关WebGL的实例请参见视频课程的内容。

网络图形

我们来讨论 HTML 的 多媒体和嵌入式 模块，早先的网页只有单调的文字，后来才引入了图像，起初是通过 <img> 元素的方式，后来出现了类似于 background-image 的 CSS 属性和 SVG 图像等方式。然而，这还不够好。当你能够使用 CSS 和 JavaScript 让 SVG 矢量图动起来时，位图却依然没有相应的支持。同时 SVG 动画的可用工具也少得可怜。有效地生成动画、游戏画面、3D场景和其他的需求依然没有满足，而这些在诸如 C++ 或者 Java 等低级语言中却司空见惯。当浏览器开始支持 HTML 画布元素 <canvas> 和相关的 Canvas API（由苹果公司在 2004 年前后发明，后来其他的浏览器开始跟进）时，形势开始改善。下面你会看到，canvas 提供了许多有用的工具，特别是当捆绑了由网络平台提供的一些其他的 API 时。它们用来生成 2D 动画、游戏画面和数据分析图，以及其他类型的 app。

大公司一般都有专人负责项目管理，但小公司基本上都是产品直接负责了。这种情况怎么破？本文从项目立项准备到跟进到结项三个环节，和大家分享项目管理的实战经验，供大家参考。

越来越多的公司对于公司内部的产研流程，不仅仅是敏捷流程管理，开始以项目制+敏捷进行运作了。中大型需求走项目管理，日常需求走敏捷组迭代。而并不是所有公司都会配备专业的项目经理，产品在一定程度上会承担项目经理的工作。在我司，

很多家长在咨询课程的时候都会说，我的孩子很一般，咱也不打算让他去考个什么奥数，就是提升一下孩子的数学思维，当然了，也有很多老师在做宣传的时候会说，自己十余年培优经验，能够提升孩子的数学思维，好像掌握了数学思维，数学成绩就一定会有突破性的提升，那么到底什么是数学思维呢？今天，我们来聊聊什么是数学思维。

所谓数学思维，肯定是一种思维方式，一种思维模式，按照这样的模式去思考，去解决具体问题，那么数学思维到底是什么呢？每个人可能都能给出不同的答案，我的观点是，数学思维应该包含分类的思维，归纳的思维以及抽象的思维。