ruslik's questions

请告诉我将图像增加到一个点的算法，具体取决于这张图片上的鼠标光标。我不知道如何计算图像需要移动的增量

Vue.component('range-slider', {
    props: ['name', 'min', 'max'],
    template: '<div class="form-group"> ' +
                    '<label class="control-label">{{name}}</label>' +


                    '<input type="text" class="form-control" v-model="value(тут value это initialPayment, либо monthyPayment)" v-on:keypress="isNumber($event)"> ' +
                    '<vue-slider ref="slider"' +
                        'v-model="value"' +
                        ':tooltip="false"'+
                        ':min="parseInt(min, 10)"' +
                        ':max="parseInt(max, 10)">' +
                    '</vue-slider>' +
              '</div>',
    components: {
        'vueSlider': window[ 'vue-slider-component' ]
    }
});

new Vue({
    el: '.app',
    data: {
        initialPayment: 10,
        monthyPayment: 0,
    }
});

<div class="app">
    <range-slider 
      name="Текст" 
      min="10"
      max="1000"
      // Как то передать initialPayment>
   </range-slider>

    <range-slider 
      name="Текст" 
      min="10"
      max="1000">
      // Как то передать monthyPayment
    </range-slider>
</div>

有必要将父数据与表示为组件的子数据连接起来。或者更确切地说，在组件内部输入。并且当输入中的数据发生变化时，父块了解发生了什么变化，例如初始支付，并开始某种重新计算或计算

如何制作3个相同宽度的块（在一行中），前提是父级的宽度可以是任意的。块之间有标准的 20px 间距。块可以排成几行。

例子

在示例中，只有第三个块移出，而是一个新行。需要 3 列

const path = require('path');
const ExtractTextPlugin = require ('extract-text-webpack-plugin');

module.exports = {
    context: __dirname,

    entry : {
        common: './source/js/common.js'
    },

    output: {
        path: path.resolve(__dirname, './public/js'),
        filename: '[name].js'
    },

    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        'css-loader',
                        'sass-loader'
                    ]
                })
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('common.css')
    ]
}

时间：133ms 资产大小块块名称 common.js 2.53 kB 0 [emitted] common [0] ./source/js/common.js 53 bytes {0} [built]

未生成 CSS 文件。如何查看插件是否正在运行。也许有一个记录器？

<div class="wrapper">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div

CSS

.wrapper {
  display: flex;
  flex-wrap: wrap;

}

.col {
  width: 50%;
  height: 100px;
  border: 1px solid red;
}

.col:nth-child(2n) {
  margin-left: 20px
}

当您不指定 flex-wrap 时，浏览器会调整元素的宽度并将它们设置为固定填充。我需要与 flex-wrap 相同的行为为了使列在具有固定填充和正确换行的同时拉伸（每行 2 列）

有一个 Tahoma 字体：

font-weight: normal; font-style: normal;

我想给某个元素赋值

{
   font-family: Tahoma
   font-weight: 900
}

并获得一个版本的字体。

如果您连接 Tahoma-Bold：

font-weight: normal; font-style: normal;

并为同一个元素放下

{
   font-family: Tahoma-Bold
}

然后在2个选项中会显示不同粗细的字体。

一直认为 Bold = Normal + font-weight: 900

- 塔霍马粗体

- Tahoma，字体粗细：900

为什么 (===) 在比较 2 个对象时返回false。

但是使用其他操作（>、<、+、-、*、/）2 个对象 - 给出所需的结果（即valueOf方法计算出来）

let man = {
    name: 'Sergey',
    surname: 'Sergeev',
    age: 30,
    valueOf(){
        return this.age;
    }
}


let man2 = {
    name: 'Ivan',
    surname: 'Ivanov',
    age: 30,
    valueOf(){
        return this.age;
    }
}

console.log(man === man2)

如何循环滑块？当从上方移除元素时，其余的块将移动。

小提琴

$('button').click(function() {
  var currentPosY = parseInt($('.slider').css('transform').match(/-?[\d\.]+/g)[5], 10)
  $('.slider').css({
    'transform': 'translate(0,' + (currentPosY - 130) + 'px)'
  })
})

.wrapper {
  width: 300px;
  height: 130px;
  border: 1px solid red;
}

.slider {
  transform: translate(0, 0);
  transition: transform 0.5s
}

.slider-item {
  width: 300px;
  height: 130px;
  background-color: orange;
  font-size: 44px;
  line-height: 120px;
  text-align: center;
}

button {
  float: right;
}

<div class="wrapper">
  <div class="slider">
    <div class="slider-item">1</div>
    <div class="slider-item">2</div>
    <div class="slider-item">3</div>
    <div class="slider-item">4</div>
  </div>
</div>
<button>кнопка</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

告诉我如何重定向到某些页面 有一个站点，有 nginx nginx 设置

location / {

        location ~ [^/]\.ph(p\d*|tml)$ {
                try_files /does_not_exists @php;
        }

        location / {
                try_files $uri /index.html;
        }

    }

该站点在 ajax 上——也就是说，所有请求都转到 index.html，并且 js 已经处理了哈希并给出了某些内容。

有一个php文件要发送到邮件

如果请求是http://site.ru/prices?_escaped_fragment_=则返回其特定目录的页面，例如 /static/prices.html

http://site.ru/about?_escaped_fragment_= - /static/about.html

如果已经有设置怎么写这个异常

location / {
                    try_files $uri /index.html;
            }

您可以使用自己的位置对每个页面进行硬编码

无法使用rewrite，因为它不在nginx的初始组装中，没有办法重新构建nginx

server {                                                                                                        
        server_name site.ru www.site.ru;                                                                
        charset off;                                                                                            
        disable_symlinks if_not_owner from=$root_path;                                                          
        index index.html;                                                                                       
        root $root_path;                                                                                        
        set $root_path /var/www/user/data/www/site.ru;                                                      
        access_log /var/www/httpd-logs/site.ru.access.log ;                                                 
        error_log /var/www/httpd-logs/site.ru.error.log notice;                                             
        include /etc/nginx/vhosts-includes/*.conf;                                                              
        gzip on;                                                                                                
        gzip_disable "msie6";                                                                                   
        gzip_types                                                                                              
                application/atom+xml                                                                            
                application/javascript                                                                          
                application/json                                                                                
                application/rss+xml                                                                             
                application/vnd.ms-fontobject                                                                   
                application/x-font-ttf                                                                          
                application/x-web-app-manifest+json                                                             
                application/xhtml+xml                                                                           
                application/xml                                                                                 
                font/opentype                                                                                   
                image/svg+xml                                                                                   
                image/x-icon                                                                                    
                image/png                                                                                       
                image/gif                                                                                       
                image/jpeg                                                                                      
                image/jpg                                                                                       
                text/css                                                                                        
                text/plain                                                                                      
                text/x-component;                                                                               

        location /about$ {                                                                                          

        if ($args ~* "_escaped_fragment_") {                                                                    
            set $args "";                                                                                       

            rewrite ^/.* http://yandex.ru permanent;                                                            
        }                                                                                                       
        }                                                                                                           

        location /prices$ {                                                                                         
        if ($args ~* "_escaped_fragment_") {                                                                    
            set $args "";                                                                                       
            rewrite ^/.* http://yandex.ru permanent;                                                            
        }                                                                                                       
        }                                                                                                           

        location / {                                                                                            

        location ~ [^/]\.ph(p\d*|tml)$ {                                                                        
                try_files /does_not_exists @php;                                                                
        }                                                                                                       

            location / {                                                                                        
                try_files $uri /index.html;                                                                     
        }                                                                                                       

        }                                                                                                           

        location ~* ^.+\.(jpg|jpeg|gif|png|svg|js|css|mp3|ogg|mpe?g|avi|zip|gz|bz2?|rar|swf|woff)$ {            
            expires 30d;                                                                                    
            etag on;                                                                                        
        }                                                                                                       


    location @fallback {                                                                                    
    }                                                                                                       

        location @php {                                                                                         

                fastcgi_index index.php;                                                                        
                fastcgi_param PHP_ADMIN_VALUE "sendmail_path = /usr/sbin/sendmail -t -i -f webmaster@site.ru
";                                                                                                              
                fastcgi_pass unix:/var/www/php-fpm/user.sock;                                                   
                fastcgi_split_path_info ^((?U).+\.ph(?:p\d*|tml))(/?.+)$;                                       
                try_files $uri =404;                                                                            
                include fastcgi_params;                                                                         
        }                                                                                                       
        ssi on;                                                                                                 
        listen xxx.xxx.xxx.xxx:80;                                                                               
}

几十张图片中只有一张 svg 精灵。网站上的所有图像都是通过使用连接起来的。您如何为 SEO 优化这些图像。写正文和标题。一般来说，搜索引擎如何对待这样的图片和精灵。他们可以使用 use 和 sprite 读取此类文件吗？

var counter = 1;

$('button').click(function(){
        $.ajax({
            url: 'index.json',
            method: 'GET',
            success: function(res){

                $('body').append(JSON.stringify(res))

                if (!!(window.history && history.pushState)) {
                    history.replaceState(null, null, '?page=' + counter);
                }

                counter++;

            }
        });
    });

网站上出现了一个门框，与以下事实有关：当单击按钮时，数据通过 ajax 加载，浏览器历史记录通过 replaceState 方法通过历史 api 更新，重写历史记录。

问题是，如果我按下后退按钮，则不会显示上一页，而是显示 ajax 请求的结果。也就是说，ajax 结果似乎写入了历史记录，尽管 url 是正确的

这是在 chrome 中，在 FF 中它工作正常，我可以看到整个页面。我试图在一个单独的 html 页面上重现它 - 所有浏览器中的一切都在嗡嗡作响 - 有人遇到过这个吗？

如果将 GET 请求改为 POST，则一切正常

就像历史记住了这个 GET 请求（只能在 chrome 中播放）

Bootsrap 4 中的这个块是什么以及如何在其中设置正确的值

$spacer:   1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: $spacer-x,
    y: $spacer-y
  ),
  2: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  3: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
) 

为什么添加到.circle属性后scale它不再居中对齐？

.furniture-item {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: scale(4);
  transform-origin: 50%;
  background-color: rgba(110, 100, 204, 0.5);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
  transition: transform 1s;
}
.circle {
  position: absolute;
  opacity: 1;
  width: 25px;
  height: 25px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50%;
  border-radius: 50%;
  background-color: rgba(0, 100, 204, 0.5);
  z-index: 1;
}

<button onclick="document.querySelector('.circle').style.transform='scale(2) translate(-50%, -50%)'">Zoom</button>

<div class="furniture-item active">
  <div class="circle"></div>
</div>

例子

你能告诉我如何制作响应式图像吗？

你想要什么：

1. 每个断点都有自己的图像加载
2. 考虑到视网膜显示器的图像
3. 图像被缩放

SCCS 有 指向父级的链接

如何链接到第一个最近的父母

SCSS

.checkbox {
    input[type="checkbox"] {
        display: none;
    }

    .checkbox-label {
        display: inline-block;
        vertical-align: middle;
        font-size: 12px;

        &:before {
            content: "";
            display: inline-block;
            vertical-align: middle;
            width: 12px;
            height: 12px;
            border: 1px solid #CCC;
            margin-right: 5px;
        }

        input[type="checkbox"]:checked + & {

            &:before {
                background-color: #0066cc;
            }
        }
    }
}

输出是 CSS

 .checkbox input[type="checkbox"] {
  display: none;
 }

 .checkbox .checkbox-label {
      display: inline-block;
      vertical-align: middle;
      font-size: 12px;
 }

 .checkbox .checkbox-label:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 12px;
        height: 12px;
        border: 1px solid #CCC;
        margin-right: 5px;
 }

 input[type="checkbox"]:checked + .checkbox .checkbox-label:before {
        background-color: #0066cc;
 }

为什么不应用样式，或者如何将& 作为对第一个最近的父项的引用？

但值得排队

input[type="checkbox"]:checked + .checkbox-label:before {
        background-color: #0066cc;
 }

风格开始起作用

JSFIDDLE示例

问题。如何使用数据库

有这样一个conf文件——docker-compose.yml

我是否正确理解这些步骤？

1. 我有sql文件

2. 我将它复制到 lemp_mariadb 容器中

3. 我在那里进行数据库导入并且一切正常？是否需要采取其他措施？

然后事实证明，为了更改结构或数据，我总是需要进入容器内部并更改那里的结构？

另一个时刻

laravel使用的，有artisan进行迁移。所以我知道结构问题会得到解决，但是可以更新的数据呢？

情况： 另一个开发人员将下载应用程序，他还需要进入容器并部署数据库？

version: '2'
    services:
      nginx:
        image: evild/alpine-nginx:1.9.15-openssl
        container_name: lemp_nginx
        restart: always
        links:
          - php
        volumes:
          - ./project:/var/www/
          - ./docker/nginx/conf/nginx.conf:/etc/nginx/conf/nginx.conf:ro
          - ./docker/nginx/conf.d:/etc/nginx/conf.d:ro
        ports:
          - 8080:80
          - 443:443
      php:
        image: evild/alpine-php:7.0.6
        working_dir: /var/www
        container_name: lemp_php
        restart: always
        volumes:
          - ./project:/var/www/
        depends_on:
          - db

        links:
          - db
        environment:
          - DB_NAME=mysql
          - DB_USER=root
          - DB_PASSWORD=password
      db:
        image: mariadb:latest
        container_name: lemp_mariadb
        restart: always
        volumes:
          - db-data:/var/lib/mysql

表达式中的 100% 来自哪里

height: calc(100%-65px);

从父母的高度？如果没有明确指定父母的身高？

有一个 docker-copmose.yml 文件您需要安装 copmoser 容器才能使应用程序正确部署我该怎么做？

docker-compose.yml 的描述

version: '2'
services:
  nginx:
    image: evild/alpine-nginx:1.9.15-openssl
    container_name: lemp_nginx
    restart: always
    links:
      - php
    volumes:
      - ./project:/var/www/
      - ./docker/nginx/conf/nginx.conf:/etc/nginx/conf/nginx.conf:ro
      - ./docker/nginx/conf.d:/etc/nginx/conf.d:ro
    ports:
      - 8080:80
      - 443:443
  php:
    image: evild/alpine-php:7.0.6
    working_dir: /var/www
    container_name: lemp_php
    restart: always
    volumes:
      - ./project:/var/www/
    depends_on:
      - db

    links:
      - db
    environment:
      - DB_NAME=mysql
      - DB_USER=root
      - DB_PASSWORD=password
  db:
    image: mariadb:latest
    container_name: lemp_mariadb
    restart: always
    volumes:
      - db-data:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=password


volumes:
  db-data:
    driver: local

通过 为站点部署了环境docker-compose。该站点在laravel中并且需要执行composer install，但是运行此命令表明我有旧版本的php。原来容器里也需要安装composer ？也许还有其他解决方案？

docker-compose.yml 文件

version: '2'
services:
  nginx:
    image: evild/alpine-nginx:1.9.15-openssl
    container_name: lemp_nginx
    restart: always
    links:
      - php
    volumes:
      - ./project:/var/www/
      - ./docker/nginx/conf/nginx.conf:/etc/nginx/conf/nginx.conf:ro
      - ./docker/nginx/conf.d:/etc/nginx/conf.d:ro
    ports:
      - 8080:80
      - 443:443
  php:
    image: evild/alpine-php:7.0.6
    working_dir: /var/www
    container_name: lemp_php
    restart: always
    volumes:
      - ./project:/var/www/
    depends_on:
      - db

    links:
      - db
    environment:
      - DB_NAME=mysql
      - DB_USER=root
      - DB_PASSWORD=password
  db:
    image: mariadb:latest
    container_name: lemp_mariadb
    restart: always
    volumes:
      - db-data:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=password


volumes:
  db-data:
    driver: local

docker-compose.yml中有一个php镜像

php:
    image: evild/alpine-php:7.0.6
    container_name: lemp_php
    restart: always
    volumes:
      - ./project:/var/www/
    depends_on:
      - db
    links:
      - db**

最初行

volumes:
          - ./project:/var/www/

曾是

volumes:
              - ./project:/var/www/html

图像正在运行。将行更改为- ./project:/var/www/

显示错误

错误：对于 php 无法启动服务 php：无效的标头字段值“oci 运行时错误：container_linux.go:247：启动容器进程导致 \”chdir 到 cwd (\\“/var/www/html\\”) 在配置中设置.json 失败：没有这样的文件或目录\"\n" 错误：启动项目时遇到错误。