vw/vh:(能够使用vw单位设置网页元素的尺寸)

相对单位  相对视口的尺寸计算结果  vw:viewport width(1vw=1/100视口宽度)  vh:viewport height(1vh=1/100视口高度)

vw适配原理:(实现在不同宽度的设备中,网页元素尺寸等比缩放效果)

vw单位尺寸:

1.确定设计稿对应的vw尺寸(1/100视口宽度)   查看设计稿宽度 > 确定参考设备宽度(视口宽度)> 确定vw尺寸(1/100视口宽度) 

2.vw单位的尺寸 = px单位数值 /(1/100视口宽度)  

思考:开发中,会不会vw和vh混用呢? 不会。
因为 vh是1/100视口高度,全面屏视口高度尺寸大,如果混用可能会导致盒子变形。
a标签在一行,给父级加 display: flex;  不加display:inline-block;的原因是默认有间距,去掉间距太麻烦

视频布局:父级左右padding  每个视频盒子  宽度为50%  左右padding(拉开内容的距离)

/* 弹性盒子换行 */  flex-wrap: wrap;

随机推荐

  1. SQL语句查询关键字:where筛选、group by分组、distinc去重、order by排序、limit分页、操作表的SQL语句布补充

    目录 SQL语句查询关键字 前期数据准备 编写SQL语句的小技巧 查询关键字之where筛选 查询关键字之group by分组 查询关键字之having过滤 查询关键字值distinct去重 查询关键 ...

  2. Python面试常见算法题集锦(递归部分)

    0x1 前言 开始学习python基础的时候,有以下几种算法是面试中常见的,也是前期学习python的时候可以连带学习了解的,不卡门槛哟 0x2 实现算法的方式很多种,而算法的实现也是分程序语言的,此 ...

  3. 详解Python当中的pip常用命令

    原文链接:https://mp.weixin.qq.com/s/GyUKj_7mOL_5bxUAJ5psBw 安装 在Python 3.4版本之后以及Python 2.7.9版本之后,官网的安装包当中 ...

  4. 还原火山引擎 A/B 测试产品——DataTester 私有化部署实践经验

      作为一款面向ToB市场的产品--火山引擎A/B测试(DataTester)为了满足客户对数据安全.合规问题等需求,探索私有化部署是产品无法绕开的一条路.   在面向ToB客户私有化的实际落地中,火 ...

  5. Note: further occurrences of HTTP request parsing errors will be logged at DEBUG level

    云服务器很久没管过了,今天去看了下云服务器日志,不看不知道,一看吓一跳. 日志里竟然是一排的报错,再翻下此前的日志,每天都报一个错误: [http-nio-80-exec-10] org.apache ...

  6. DVWA靶场实战(一)——Brute Force

    DVWA靶场实战(一) 一.Brute Force: 1.漏洞原理: Brute Force是暴力破解的意思,大致原理就是利用穷举法,穷举出所有可能的密码. 2.攻击方法: Burpsuite中的In ...

  7. Java学习记录:2022年1月13日(其二)

    Java学习记录:2022年1月13日(其二) ​ 摘要:本篇笔记主要记录了在设计类时的一些注意事项,类加载时类中各个部分的加载顺序以及继承和多态的知识. 目录 Java学习记录:2022年1月13日 ...

  8. Java线程池中的execute和submit

    一.概述 execute和submit都是线程池中执行任务的方法. execute是Executor接口中的方法 public interface Executor { void execute(Ru ...

  9. .NET 入门到高级路线

    .NET 入门到高级路线 [c# 基础语法](# CSharp基础语法) [.NET Core 基础知识](# .NET Core 基础知识) [ASP.NET Core 基础知识概述](# ASP. ...

  10. DQL_排序查询-DQL_聚合函数

    DQL_排序查询 排序查询 语法: order by 子句 order by 排序字段1  排序方式1 ,  排序字段2  排序方式2 ,  排序字段3  排序方式3   ..... 排序方式 : A ...