Html+css(面试自用)

超链接标签 a herf指定跳转路径（地址是文件或压缩包会直接下载），target设置打开方式 _blank表示新窗口打开。

有序列表，无序列表，自定义列表各自父容器只能放各自的 li或dt，dd。

表单标签 input 里type常用属性radio单选按钮，checkbox复选框。

select下拉列表，子元素为option。

textarea多行文本框。

2.H5新特性

新增语义化标签，header，nav导航标签，article内容标签，aside侧边栏标签，footer尾部标签。

多媒体标签 vidio audio。

新增表单属性 placeholder，autofocus自动聚焦，required必填。

3. 说一下对HTML语义化的理解?(重点)

语义化就是选择与语义相符合的标签，使代码语义化，这样不仅便于开发者进行阅读，同时也能维护和写出更优雅的代码，还能够让搜索引擎和浏览器等工具更好地解析。 通俗的讲语义化就是让正确的标签做正确的事情，比如段落用p标签，头部用header标签，主要内容用main标签，侧边栏用aside标签等等。

4. meta viewport 是做什么用的

将视口大小设置为可视区域的大小。

什么是视口 分为布局视口，视觉视口，理想视口

布局视口就是网页布局的大小，在移动端为980px，所以pc上的网页大多数能在手机上显示，只不过元素看上去很小。

视觉视口就是用户正看到的网站区域。

理想视口，设备有多宽，布局视口就有多宽。用meta实现

为什么移动端视口宽度是980而不是其他的值 因为过去网页的版心都是980的，为了能够让网页在移动端完美的展示, 所以将手机视口的大小定义为了980。

移动端自动将视口宽度设置为980带来的问题 虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页，但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的，所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小。 但是缩小后用户看到的是一个缩小版的整个页面，字体、图标和内容等等都非常小，想要点击或者查看都需要去放大页面进行操作，放大页面之后就会出现横向滚动条，这对用户体验来说是非常不好的。

如何保证在移动端不自动缩放网页的尺寸 通过meta设置视口大小 <meta name="viewport" content="width=device-width, initial-scale=1.0"> viewport 是指 web 页面上用户的可视区域。 meta标签的属性:

width=device-width 设置视口宽度等于设备的宽度
initial-scale=1.0 初始缩放比例, 1不缩放
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放

CSS

1.选择器

基础选择器有，标签选择器，类选择器，id选择器，通配符选择器。

复合选择器有，后代选择器，子元素选择器（亲儿子）,并集选择器，

伪类选择器，这些“伪类”不用在 HTML 文档中输入，可以直接对其添加样式。分别为：

• 指示这个元素拥有输入“焦点”——即可以接受键盘输入，或通过某种方式可以激活；

:focus

• 指示当鼠标停留在这个元素上时，外观可以作相应改变；

:hover

• 指示这个元素可以被用户输入“激活”，如，用户停留在一个超链接上，当点击鼠标时，这个链接就会“激活”。

:active

属性选择器

[attribute] 用于选取带有指定属性的元素。

[attribute=value] 用于选取带有指定属性和值的元素。

[attribute~=value] 用于选取属性值中包含指定词汇的元素。

[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[attribute^=value] 匹配属性值以指定值开头的每个元素。

[attribute$=value] 匹配属性值以指定值结尾的每个元素。

[attribute*=value] 匹配属性值中包含指定值的每个元素。

结构伪类选择器

注意，E是元素自己

1. 选择父元素的第一个子元素。
E:first-child
​
2. 选择父元素的最后一个子元素。
E:last-child
​
3. 选择父元素下第 n 个元素或奇偶元素，n 的值为：数字/odd/even。
E:nth-child(n)
​
4. 选择父元素中唯一的子元素————该父元素只有一个子元素。
E:only-child
​

伪元素选择器

::bfore和 ::after

他们创建一个元素属于行内元素，这个元素在文档树中是找不到的，所以称伪元素，他们必须具有content属性，表示伪元素的内容

用伪元素清除浮动

给父盒子添加类 clearfix

.clearfix:after { 
    /*生成内容作为最后一个元素*/ 
    content: ""; 
    /*使生成的元素以块级元素显示,占满剩余空间*/ 
    display: block; 
    /*避免生成内容破坏原有布局的高度*/ 
    height: 0; 
    /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/ 
    visibility: hidden; 
    /*清除浮动元素对当前元素的影响*/ 
    clear: both; 
} 
.clearfix { 
    /*用于兼容IE, 触发IE hasLayout*/ 
    *zoom:1; 
}

为什么需要清除浮动

由于父盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子，还有浮动的子元素不会撑开父盒子。

清除浮动本质

本质是清除浮动元素造成的影响，清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流了。

清除浮动几种方法：

额外标签法也叫隔墙法，是W3C推荐的做法。

父级添加overflow属性

父级添加after伪元素

父级添加双伪元素

2.元素显示模式

常见块级元素：h，p，div，ul，ol，li，（p，h里不能放块元素）特点：独占一行，宽高边距可控，宽度默认父级100%，是一个容器。

行内元素：a,span,i,em,特点：一行显示多个，宽高设置无效，宽度默认本身。

行内块：img，imput，td。特点：一行显示多个，之间会有空隙，宽度默认本身，宽高边距可控。

3.背景

background:背景颜色 背景图片地址 背景平铺 图像滚动 背景图位置；

3.css三大特性

层叠性，继承性，优先级

选择器权重

css的权重可以分为6级

1.第一级，!important 无穷大；它的权重最高；

2.第二级，内嵌样式(style)；1000

3.第三级，id选择器；100

4.第四级，类选择器，伪类选择器(:hover, :link, :active, :visited),属性选择器；10

5.第五级，标签选择器。伪元素选择器（::after，::before, ::first-line, ::first-letter);1

6.第六级，继承的样式，*通配符的样式。0

它们的权重依次降低。

4,边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

解决办法，给父元素添加overfllow：hidden；给父元素定义上边框，给父元素定义内边距。

5.阴影

盒子阴影

box-shadow：水平 垂直 模糊距离 阴影尺寸 颜色 内/外；

文字阴影

6.传统网页布局方式

标准流 浮动 定位

7.关于浮动

特点：浮动的元素会脱离标准流，一行显示，顶部对齐。浮动的元素具有行内块元素特性。

8.定位

为啥需要定位：使元素可以自由的在盒子内移动，并且压住其他盒子。

静态定位，

相对定位：参照物为自己，不脱标。

绝对定位：相对于祖先元素，如果没有祖先元素，或祖先元素无定位，以浏览器为准定位。脱标，不在占有原来位置。

固定定位：以浏览器可视窗口为参照点移动元素，是一种特殊的绝对定位。

使用定位后，浮动会失效

9.元素显示与隐藏

display

visibility：他会继续占有原来位置

overfllow：scroll不管超出与否显示滚动条，auto超出才显示滚动条。

10.精灵图

为什么需要精灵图

  一个网页中经常会应用很多小 的背景图像作为修饰，当网页中的图像过多时，服务就会频繁地接收和发送请求图片，造成服务器压力过大，这将大大降低页面的加载速度。 因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

精灵图原理

将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。 使用总结：

0. 精灵图主要针对于小的背景图片使用。
1. 主要借助于背景位置来实现--background-position。
2. 一般情况下精灵图都是负值（网页中坐标：x轴右边走是正值，左边走是负值。y轴上边走是负值，下边走是正值）

11.字体图标

解决精灵图的不足

本质上属于字体，优势：

1.轻量级：一个图标新字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求 2.灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等 3.兼容性：几乎支持所有的浏览器，请放心使用 注意：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化。

12.css三角（重点）

.box {
      width: 0;
      height: 0;
      border-top: 50px solid black;
      border-right: 50px solid transparent;
      border-left: 50px solid transparent;
    }

13.verticall-align

常用于图片或行内块元素与文本之间的对齐

可能的值 值 描述 baseline 默认。元素放置在父元素的基线上。。 middle 把此元素放置在父元素的中部。 默认的verticall-align是基线对齐

14.文本溢出

/* 单行超出范围显示省略号 */
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

//多行 
overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
 -webkit-line-clamp: 3; /*限制文本的行数，只显示3行*/
 -webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式 */

15. BFC及其应用(重点)

BFC（块级格式化上下文）是一个独立的渲染区域，让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性，它属于定位方案的普通流。

触发条件：

• 根元素
• 浮动元素：float 除 none 以外的值（left、right）
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

约束规则：

• 属于同一个 BFC 的两个相邻 Box 垂直排列
• 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
• BFC 的区域不会与 float 的元素区域重叠
• 计算 BFC 的高度时，浮动子元素也参与计算
• 文字层不会被浮动层覆盖，会环绕于周围

作用：

• 阻止元素被浮动元素覆盖 一个正常文档流的块级元素可能被一个浮动元素覆盖，挤占正常文档流，因此可以设置一个元素的float、display、position或者overflow值等方式触发BFC，以阻止被浮动盒子覆盖。
• 可以包含浮动元素（清除浮动） 通过改变包含浮动子元素的父盒子的属性值，触发BFC，以此来包含子元素的浮动盒子。
• 阻止相邻元素的margin合并 属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。

16. 水平垂直居中(重点)

• 子绝父相 + transform

.parent {
    position: relative;
}
​
.son {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
复制代码

• 伸缩布局

.parent {
    display:flex;
    justify-content:center;
    align-items: center;
}

17.Grid布局

Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

display:grid;

grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高，

18.css3盒子模型

//以前
box-sizing:content-box;
//css3  这样padding和border就不会撑大盒子
box-sizing:border-box;

19.css3其他特性

滤镜

filter:blur(5px);

calc()函数，用于计算，例如

width:calc(100%-80px);

20.过渡

transiton:要过渡的属性 花费时间 运动曲线 何时开始；

如果想要所有的属性，all。

运动曲线，默认是ease 可以省略。

何时开始默认是0，可以省略。

口诀：谁做过渡给谁加。

21.2D转换

主要通过transform 属性，该属性使用函数来定义的。

包含以下方法

1.位移

• translate（）：translate（x）接受一个参数表示沿x轴位移x像素，沿y轴默认为0，接受两个参数translate（x,y）表示沿x轴位移的距离和沿y轴位移的距离
• 分开写法translateX(x) 、translateY(y)

2.旋转

• rotate(angle): 只有一个参数，表示选择的角度，单位用deg（度）
• 2d空间只能围绕元素中心的z轴旋转
• 参数为正值则顺时针旋转，为负值则逆时针旋转

3.缩放

• scale(): 一个参数的时候表示同时在x轴和y轴两个方向缩放相同的倍数，两个参数表示分别x和y轴方向缩放相应的倍数

4.转换中心

通过该属性transform-origin可以改变 旋转、缩放、变形的原点。默认为center，可以设置为关键字：top bottom center left right，也可以使用px、em、百分比值位置的。

22.3D转换

既然是3D，我们就知道肯定是一个立体的，那么就有了空间感觉。既有了x轴、y轴、z轴。

下表列出了所有 3D 变换属性：

CSS 3D 转换方法

1.应用在父元素上属性

• 设置3D变换：transform-style: preserve-3d，默认值为flat表示不保留3D变换
• 设置视角深度,又叫景深：perspective: 1000px 3D 元素距视图，视线的距离，单位为px，不了解的可以百度一下视角深度
• 观察点位置：perspective-origin：和上面的变换中心一样，只是变成了三维的，多了一个z轴的坐标。

2.旋转

translate3d` `translateX` `translateY` `translateZ

• rotate3d(x, y, z, angle)：沿着x，y，z三个方向矢量值确定的坐标点旋转angle角度
• backface-visibility 属性定义当元素旋转到背面向屏幕时是否可见，visible背面可见，hidden背面不可见
• rotateX(angle)、rotateY(angle) 、rotateZ(angle)：沿着对应轴旋转对应度数。

例子：

    .item{
        width: 200px;
        height: 300px;
        border: 2px solid red;
        margin: 200px auto;
        background: powderblue;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
复制代码

效果：这个一般要配合动画才显示好的效果。 我们要知道围绕x轴、y轴、z轴是什么样的效果？在以后就不会犯迷糊了 3.位移

translate3d` `translateX` `translateY` `translateZ

• translate3d(x, y, z)：必须传递三个参数
• translateX(x)：为正则沿着x轴向右位移，为负则沿着x轴向右位移
• translateY(y):为正则沿着y轴向下位移，为负则沿着y轴向上位移
• translateZ(z):为正则沿着z轴向屏幕外位移，为负则沿着z轴向屏幕内位移

4.缩放

scale3d` `scaleX` `scaleY` `scaleZ

• scale3d(num, num, num)：必须传递三个参数
• scaleX(x) scaleY(y) scaleZ(z)，分别代表x和y轴和z轴方向缩放相应的倍数。

23.动画

animation 8个属性

定义一个简单动画，比如我们一个 div 旋转一圈，只需要定义开始和结束两帧即可：

@keyframes rotate{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

等价于：

@keyframes rotate{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

定义好了关键帧后，下来就可以直接用它了：

animation: rotate 2s;

通过 animation-name 来指定动画使用的关键帧，这个是必须的。用 JS 来理解的话，相当于：只有变量声明是不行的，还需要使用。

另外上述代码还指定了动画运行的时间 animation-duration 为 2s。最后运行效果如下： 动图的效果不是太明显，方块在旋转时，不是匀速的。因为此时刻画动画速度的属性 animation-timing-function 默认值是 ease，即先快后慢。

下面动图演示了计时函数属性一些值的情形： animation-timing-function 常见值有：linear、ease、ease-in、ease-out、ease-in-out。这些值其实都是 cubic-bezier(n,n,n,n) 的特例。它们被称为贝塞尔曲线。除了开发者工具外，《CSS揭秘》作者也写了的一个在线调试贝塞尔曲线的网站：cubic-bezier.com。贝塞尔曲线这个知识点很有用，canvas 里也有相应的 API。可以展开的点其实比较多，这里只是初步介绍。

需要提一下，计时函数属性另外的一个好玩的值是 steps 函数，可以用来实现逐帧动画： 计时函数属性介绍到此，后面一律使用值 linear，即表示匀速动画。

回到关键帧，我们除了指定开头和结束位置的关键帧（如果不指定 0% 和 100%，浏览器会自动推断），当然也可以指定任意百分比的帧是什么情况，比如开篇例子的另一种实现：

div{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0ff;
  animation: move 6s linear both;
}
@keyframes move{
  0%{
    transform: translate(0,0);
  }
  33%{
    transform: translate(200px,0);
  }
  66%{
    transform: translate(0,0);
  }
  100%{
    transform: translate(200px,0);
  }
}
复制代码

关键帧代码有冗余，可以进一步简写：

@keyframes move{
  0%, 66%{
    transform: translate(0,0);
  }
  33%,100%{
    transform: translate(200px,0);
  }
}
复制代码

此时，动画时长改成了 6s，动画进行到三分之一处时，让 div 位于 200px，三分之二回到开始位置，结束时移动到 200px 处。

这种是比较直观的实现方式，有很多面试者一般都会想到这种。

注意 animation: move 6s linear both; 声明中的 both。它是属性 animation-fill-mode 的一个值。这个属性容易被忽略，然而却是 CSS 动画比较重要的一个属性。直译为动画填充模式，具体说的是什么事情呢？

@keyframes 只是定义了动画过程中每一帧的值，然而在动画开始前和动画结束后，元素改处于什么状态呢？animation-fill-mode 说的就是这个事情。除了默认值 none 外，还有另外 3 个值：

• forwards，表示，动画完成后，元素状态保持为最后一帧的状态。
• backwards，表示，有动画延迟时，动画开始前，元素状态保持为第一帧的状态。
• both，表示上述二者效果都有。

举个例子，div 从 100px 处移动到 200px 处的关键帧定义为：

@keyframes move{
  0%{
    transform: translate(100px,0);
  }
  100%{
    transform: translate(200px,0);
  }
}
复制代码

设置填充模式为 forwards 时，动画最后停留在 200px 处： 设置动画延迟 1s 后执行，且填充模式为 backwards 时，可以看到动画在开始前是处于 100px 处，动画结束后回到 0px 处： 最后设置填充模式为 both 的情形：

24.圣杯布局和双飞翼布局

圣杯布局和双飞翼布局作为经典的三栏式布局是面试中的常客。两种布局达到效果上基本相同，都是两边两栏宽度固定，中间栏宽度自适应。在HTML结构上中间栏在最前面保证了最先渲染中间提升性能

圣杯布局实现

巧用margin负值，父元素padding

注意，center在前面，让他最先渲染，但是布局上要放在中心。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    header {
      width: 100%;
      height: 100px;
      background-color: pink;
    }
    footer {
      width: 100%;
      height: 100px;
      background-color: red;
    }
    .father {
      padding: 0 100px;
    }
    .center {
      float: left;
      width: 100%;
      height: 200px;
      background-color: green;
    }
    .left {
      position: relative;
      left: -100px;
      float: left;
      margin-left: -100%;
      width: 100px;
      height: 200px;
      background-color: blue;
    }
    .right {
      position: relative;
      left: 100px;
      float: left;
      margin-left: -100px;
      width: 100px;
      height: 200px;
      background-color: yellow;
    }
    .clearfix::after {
      content: '';
      display: block;
      height: 0;
      visibility: hidden;
      clear: both;
    }
  </style>
</head>
<body>
  <header>header</header>
  <div class="clearfix father">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
  <footer>footer</footer>
</body>
</html>

flex实现圣杯布局

双飞翼布局

以后补充

25.flex布局

1、容器的属性

容器和项目各有6个属性，见下图

1.1 flex-direction

flex-direction 属性决定主轴的方向（即项目的排列方向）

flex-direction: row | row-reverse | column | column-reverse;
复制代码

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

1.2 flx-wrap

默认情况下，项目都排在一条线上，无论是否给定宽度，都是不会主动换行的：

.main {
    width: 500px;
    height: 300px;
    background: skyblue;
    display: flex;
}
​
.main div {
    width: 100px;
    height: 100px;
    background: pink;
    font-size: 20px;
}
复制代码

如果需要换行，需要设置flex-wrap

  flex-wrap: nowrap | wrap | wrap-reverse;
复制代码

• nowrap（默认值）：不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。

1.3 flex-flow

flex-flow` 属性是 `flex-direction` 属性和 `flex-wrap` 属性的简写形式，默认值为 `row nowrap
flex-flow: <flex-direction>|| <flex-wrap>;
复制代码

1.4 justify-content

justify-content 属性定义了项目在主轴上的对齐方式

justify-content: flex-start | flex-end | center | space-around | space-between | space-between;
复制代码

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-around：每个项目两侧的间隔相等。
• space-between：两端对齐，项目之间的间隔都相等。
• space-evenly：每个项目的间隔与项目和容器之间的间隔是相等的。

1.5 align-items

align-items 属性定义项目在交叉轴上如何对齐

align-items: flex-start | flex-end | center | baseline | stretch;
复制代码

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）: 如果项目未设置高度或设为auto，将占满整个容器的高度。

1.6 align-content

align-content 属性定义了多根轴线的对齐方式，前提是需要设置flex-wrap: wrap，否则不会有效

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
复制代码

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。
• stretch（默认值）：轴线占满整个交叉轴。

2、项目的属性

2.1 order

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以是负数。

order: <integer>;
复制代码

2.2 flex-grow

flex-grow flex容器中剩余空间的多少应该分配给项目，也称为扩展规则。最终的项目的宽度为：自身宽度 + 容器剩余空间分配宽度，flex-grow最大值是1，超过1按照1来扩展

flex-grow: <number>;
/* default 0 */
复制代码

2.3 flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值，默认值是1

flex-shrink: <number>;
/* default 1 */
复制代码

默认情况下，第一个div宽度是200，第二个div宽度是300，两个相加应该超过父元素的400，但是由于 flex-shrink 都设置为1，将两个div都收缩在父元素中

.item {
    width: 400px;   
    height: 300px;   
    background: skyblue;   
    display: flex;    
    padding: 5px; 
}
.item div {
    height: 100px;   
    font-size: 20px;
}
.item div:nth-child(1) {
    flex-shrink: 1;  
    width: 200px;   
    background: pink;
}
.item div:nth-child(2) { 
    flex-shrink: 1;   
    width: 300px;   
    background: cadetblue;
}

如果将第一个div设置为 flex-shrink: 0; 不收缩，则按容器实际宽度展示 那收缩后的子项宽度是怎么样计算的呢？实际上有一个公示：

0. (200+300)所有子项的宽度的和 - (400)容器的宽度 = (100)
1. 第一个子项的宽度占比：2/5，第二个子项的宽度占比：3/5
2. 则第一个子项的的宽度为：200 - 2/5 * 100 = 160，第二个子项的宽度为：300 - 3/5 * 100 = 240

2.4 flex-basis

flex-basis 指定了子项在容器主轴方向上的初始大小，优先级高于自身的宽度width

flex-basis: 0 | 100% | auto | <length>
复制代码

宽度是200，但是由于设置了 flex-basis: 300px; ，所以子项最终宽度是大于自身设置的宽度

.item {    width: 400px;    height: 300px;    background: skyblue;    display: flex;    padding: 5px;}.item div {  height: 100px;  font-size: 20px;}.item div {  width: 200px;  flex-basis: 300px;  background: pink;}
复制代码

2.5 flex

flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。

flex: none | [ <'flex-grow'><'flex-shrink'>? || <'flex-basis'>]
复制代码

2.6 align-self

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto ，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch 。

align-self: auto | flex-start | flex-end | center | baseline | stretch;
复制代码
.item {    width: 400px;    height: 300px;    background: skyblue;    display: flex;    padding: 5px;}.item div {    height: 100px;    font-size: 20px;}.item div {    width: 200px;    flex-basis: 300px;}.item div:nth-child(1) {    background: pink;    align-self: flex-start;}   .item div:nth-child(2) {    background: violet;    align-self: center;}   .item div:nth-child(3) {    background: greenyellow;    align-self: flex-end;}  
复制代码

3、布局案例

3.1 等高布局

每一列的内容不一样，但容器的高度时等高的

.item {    width: 400px;    height: 300px;    background: skyblue;    display: flex;    justify-content: space-between;    padding: 5px;}.item div {    width: 100px;    font-size: 20px;    background: pink;}.item div p {        text-align: center;}
复制代码

3.2 左侧宽度固定，右侧自适应布局

常见的TOB系统布局方式，左侧是菜单树，右侧是内容

html, body {    margin: 0;    padding: 0;}.container {    display: flex;    width: 100%;    height: 100vh;    background: skyblue;}.left-tree {    width: 200px;    height: 100%;    background: pink;}.main {      flex: 1 1 auto;}
复制代码

3.3 粘性页脚

无论中间的内容有多少，页脚始终在底部展示

html, body {    margin: 0;    padding: 0;}.container {    display: flex;    flex-direction: column;    width: 100%;    height: 100vh;}.header {    width: 100%;    height: 60px;    background: pink;}.main {    flex: 1 1 auto;    background: skyblue;}.footer {    width: 100%;    height: 60px;    background: pink;}
复制代码

26.像素，像素比

设备像素(又叫物理像素)

• 由一个个发光的点组成，通过控制每个点的颜色，屏幕就会显示不同的颜色；

• 屏幕上有多少个点就用分辨率表示；屏幕从出厂开始，点的数量就固定了；

  比如：华为mate40 的分辨率为2340 x 1080 像素，那么屏幕上一共有2376*1080=2,566,080个点

• 设备像素是真实存在的；

• 

• 这个点的单位叫pt，是绝对单位；1pt = 1/72 (inch), inch 及英寸，而1英寸等于2.54厘米。

• 常用叫法:

  720p：1280x720

  1080p：1920X1080

  5k: 5120x2880

css像素(又叫设备独立像素、逻辑像素)

• 就是样式里的px，是相对单位，大小不固定；

  一般默认情况下，1px等于1pt，如果我们把浏览器放大到200%，那么1px等于2pt

• 这事一个抽象的概念

屏幕尺寸

• 单位英寸，是长度单位，比如华为mate40的屏幕尺寸是6.5英寸，指的就是对角线长度，而不是屏幕面积

  

• 1英寸(inch) = 2.54厘米(cm)

• 屏幕尺寸=屏幕斜边像素/PPI

  如何算iphone13 pro max的屏幕尺寸？已知分辨率为2778 x 1284， ppi为458

  var _px = Math.sqrt(Math.pow(2778,2) + Math.pow(1284,2))
  var _inch = _px/458
  console.log(_inch) // 6.682057487022466
  复制代码
  

像素密度(PPI)

• 1英寸面积上的设备像素点的数量；

• PPI = 屏幕斜边像素/屏幕尺寸;

• PPI越高，代表在一定尺寸的屏幕上设备像素点数量越多；屏幕越清晰；

  

• 如何查阅PPI

• \

• PPI是由厂家决定的

• 什么是高清屏？同等尺寸下，PPI翻了一倍，苹果管高清屏叫视网膜屏

• PPI增加n倍，设备像素点的数量会增加n乘n倍，同时，设备像素点的大小会缩小1/4

  

像素比(DPR)

• 一个css像素占用几个设备像素，比如，下面这个图标占用几个设备数量

  

• DPR = 物理像素/css像素

• 获取像素比window.devicePixelRatio，比如：iphoneX的像素比是3

  

总结

• 像素分为设备像素和css像素；
• 设备像素对应的是手机中的分辨率，一出厂数量就固定了，永远不会变；
• 像素密度PPI由设备像素决定，PPI = 屏幕斜边像素/屏幕尺寸，屏幕斜边像素等于屏幕分辨率的平方相加再开根；PPI越大代表设备像素点越多， 图像越清晰；PPI如果翻一番，设备像素点数量增加四倍，那么每一个点占的空间就被压缩，缩小成原来的1/4；
• css像素是会变的，css像素跟设备像素之间的关系就是像素比DPR；DPR = 物理像素/css像素，如果像素比为2，代表一个css像素占两个设备像素点；像素比的意义就是能够让图像在高清屏下正常显示，比如有时候UI设计的图在手机上显示出来有点模糊，那可能UI在设计的时候就要做大点，因为现在手机的分辨率越来越高了，即设备像素点越来越多了，按照iphone6的尺寸设计可能在现在主流手机上会不够清晰。

27.移动端布局

1是单独制作移动端页面（流式布局，flex布局，less+rem+媒体查询布局，混合）

2是响应式（媒体查询，bootstrup）

1.前置知识

视窗（viewport）

以 iPhone11 Pro 举例，设备像素数为 1125×2436，逻辑像素数为 375×812，DPR 为 3。写一个宽高为 200px、字体大小为 16px 的 div，结果如下：

可以发现，文字几乎看不清，div 所占的比例也很小，说明这里的 px 使用的是设备像素，所以 200px 的宽高 和 16px 的文字 相对屏幕来说很小。

给 head 标签中添加一个 meta 元信息标签，让 px 使用逻辑像素。

<meta name="viewport" content="width=device-width" />

结果如下图所示，可以发现，设置一个 width=device-width，可以让类似 IPhone 这种 DPR 不为 1 的高分屏使用逻辑像素来渲染，显示预想的正确宽高。

几个长度单位

除了常用的 px 和%，还有 em、rem、vw、vh、vmax、vmin，原文可见CSS 工作组草案。

px

px 是上文介绍的 CSS 像素，作为长度单位来说就是：该长度有多少个 CSS 像素就是多少 px。一般浏览器默认的字体大小是 16px。

%

百分比符号的参照规则：

0. 普通定位，%参照的是父元素的对应属性；
1. position: absolute，%参照的是定位后的父元素的对应属性；
2. position: fixed，%参照的是 viewport（可视窗口）；

后两种很容易理解，毕竟脱离了普通文档流，肯定以新文档流的父元素做对应。

em

草案原文如下:

Equal to the computed value of the font-size property of the element on which it is used.

em 单位的大小相当于所在元素的 font-size 属性大小。

详细的说，em 优先参照的自己的字体大小 font-size、次之参照父元素的字体大小，如果没有就一直继承到 body。比如父元素设置 font-size: 10px；，那么 1em=10px，1.6em 就是 16px。

rem

草案原文如下：

Equal to the computed value of font-size on the root element.

If used in the font-size property of the root element, or in a document with no root element, 1rem is equal to the initial value of the font-size property.

rem 单位的大小相当于根元素的 font-size 属性大小。

如果如果在根元素的 font-size 属性中使用，或者 document 中没有根元素，1rem 相当于 font-size 初始值的大小。

rem 与 em 的区别就是多了一个 root，所以 rem 是以根元素 html 的 font-size 为参照，避免了中间多层 em 的混乱。比如根元素 font-size: 16px，如果想得到 10px的大小，就用 10/16=0.625rem。

vw 和 vh

草案原文如下：

vw unit Equal to 1% of the width of the initial containing block.

vh unit Equal to 1% of the height of the initial containing block.

vw 单位大小相当于初始包含块（不含滚动条的视窗）宽度的 1%。

vh 单位大小相当于初始包含块（不含滚动条的视窗）高度的 1%。

vw、vh 就是 viewport width、viewport height 的意思，这两个单位只与视窗高宽有关系，1单位 vw 或 vh 是视窗高度或宽度的 1%。

vmax 和 vmin

草案原文如下：

vmin unit Equal to the smaller of vw or vh.

vmax unit Equal to the larger of vw or vh.

vmin 单位大小相当于 vw 和 vh 中较小的那个。

vmax 单位大小相当于 vw 和 vh 中较大的那个。

有了 vh 和 vw 的铺垫，vmax 和 vmin 就比较清晰了，vmax = max(vh, vw)，vmin = min(vh, vw)。

使用这两个单位有一个很明显的好处，如果给一个块级元素的赋予了 vmax 或 vmin 做单位的宽高，当视窗被缩放时，这个块级元素既会跟随视窗一起缩放，又不会改变块级元素的宽高比导致内容畸形。

2.媒体查询

可以监听屏幕宽度，设置不同的样式。

样例：

/* screen 当设备是 电脑屏幕，平板电脑，智能手机等。并且 width > 900px 使用 .article 样式块  */
@media screen and (min-width: 900px) {
  .article {
    padding: 1rem 3rem;
  }
}

媒体类型

• 描述了设备的类别。媒体类型是可选的，默认是all类型。

0. all 所有设备上都加载。
1. print 在打印预览模式下在屏幕上查看的分页材料和文档中加载。
2. screen 电脑屏幕，平板电脑，智能手机等，中加载。
3. speech 屏幕阅读器等发声设备中加载。

• CSS2.1和媒体查询3定义了几种其他媒体类型（tty，tv，projection，handheld，braille，embossed，和aural），现在基本上已经弃用。

逻辑运算符

• 逻辑运算符 not，and以及only可以被用于组成一个复杂的媒体查询。还可以通过用逗号分隔多个媒体查询来将它们合并为一个规则。

0. not 用于媒体查询取反值，如果媒体查询返回 false，则返回 true。如果出现在以逗号分隔的查询列表中，它只会在当前范围中取反。如果使用not运算符，还必须指定媒体类型。

    /* 在 screen 类型 加载  */
    @media screen {
      .box {
        background-color: red;
      }
    }
    /* 取反 */
    @media not screen {
      .box1 {
        background-color: red;
      }
    }
复制代码

0. and 用于将多个媒体特征组合到一个媒体查询中。它还用于将媒体功能与媒体类型连接起来。

    /* 在 screen 类型 大于960px 加载  */
    @media screen and (min-width: 560px) {
      .box {
        background-color: red;
      }
    }
    /* 在 screen 类型 大于960px 小于 1200px 加载 */
    @media screen and (min-width: 560px) and (max-width: 700px) {
      .box1 {
        background-color: burlywood;
      }
    }
复制代码

0. only 是为了在不支持媒体查询的浏览器中不添加样式。浏览器处理以only开头的关键词时将会忽略only。

@media only screen{
    .box {
        background-color: red;
    }
}
// 浏览器中等同于
@media screen{
    .box {
        background-color: red;
    }
}
复制代码

0. , （逗号) 逗号用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为真，则整个媒体语句返回真。换句话说，列表的行为就像一个逻辑or运算符。

    /* 在 screen 类型 小于240px 或 大于240px 加载  */
    @media screen and (min-width: 560px), (max-width: 240px) {
      .box {
        background-color: red;
      }
    }
    /* 在 screen 类型 小于 240px 或 大于360px 小于 700px 加载 */
    @media screen and (max-width: 240px), (min-width: 360px) and (max-width: 700px) {
      .box1 {
        background-color: burlywood;
      }
    }
复制代码

媒体功能

• 根据属性判断当前使用 css 所在的设备，或是浏览环境的具体特征。表达式是可选的，它负责判断这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。

常用媒体：

0. height 输出设备中的页面可见区域高度。
1. width 输出设备中的页面可见区域宽度。
2. max-aspect-ratio 输出设备的屏幕可见宽度与高度的最大比率。
3. max-device-aspect-ratio 输出设备的屏幕可见宽度与高度的最大比率。
4. max-device-height 输出设备的屏幕可见的最大高度。
5. max-device-width 输出设备的屏幕最大可见宽度。
6. max-height 输出设备中的页面最大可见区域高度。
7. max-width 输出设备中的页面最大可见区域宽度。
8. min-height 输出设备中的页面最小可见区域高度。
9. min-width 输出设备中的页面最小可见区域宽度。

其他加载方式

style标签上加载

<style media="(min-width: 500px)">
  .box {
    background-color: red;
  }
</style>
<style media="(max-width: 500px">
  .box {
    background-color: burlywood;
  }
</style>
复制代码

• 根据media属性定义的媒体查询判断加载那个样式。

@import 使用时加载

@import url(./index.css) (min-width:350px);
@import url(./home.css) (max-width:750px);
复制代码

• 在加载最后添加()定义媒体查询判断加载那个样式。

<picture>标签

<picture>
  <source media="(min-width: 650px)" srcset="demo1.jpg">
  <source media="(min-width: 465px)" srcset="demo2.jpg">
  <img src="img_girl.jpg">
</picture>
复制代码

• 根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素：

3.less

变量

声明变量

@img: "~@src/img"; // 作为url，可以配合路径别名一起使用，这里可以把图片路径进行声明，减少后期使用时的路径冗余
@link-color: #428bca; // 作为属性值
@i: 1; // 作为选择器
@ml: margin-left; // 作为属性名
复制代码

在less中使用的变量有两种形式

• 作为属性值

  a.link {
      color: @link-color;
  }
  复制代码
  

• 作为选择器、属性名、url时，插入变量与普通作为属性值的形式有所区别，需要使用

  @val 转变为 @{val}

  // 作为选择器
  .mt-@{i} {
      margin-top: @i * 1rem;
  }
  // 作为url
  .content {
      .bg-img("@{img}/common/popup1.png");
  }
  // 作为属性名
  a {
      @{ml}: 10rem;
  }
  复制代码
  

混入

这一块内容比较常用，很多常用代码块都能通过函数的形式封装，不使用时，不会编译到css中。

举个栗子：

• 不带参数

  设置混合块

  ```less
  // 设置文字不可选中
  .unselect() {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  ```
  复制代码
  

  使用

  .class1 {
      .unselect();
  }
  .class2 {
      .unselect();
  }
  复制代码
  

• 带参数

  // 设置背景图
  .bg-img(@u) {
      background-image: url(@u);
  }
  // 这两个可以一起使用（使用时，取决于传参数量）
  .bg-img(@u1, @u2) {
      background-image: url(@u1);
      &:hover {
          background-image: url(@u2);
      }
  }
  复制代码
  

  使用时（调用的混合块取决于传参数量）

  .bg-img("~@src/img/first_item.png");
  ​
  .bg-img("~@src/img/first_item.png", "~@src/img/first_item_hover.png");
  复制代码
  

实际开发中，可以封装不同类型功能代码块，减少重复样式代码量。

比如单行省略号：

// 单行显示，超出省略号
.ellipsis() {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
复制代码

再比如多行显示省略号：

.ellipsis-mult (@l: 3) {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @l;
    word-break: break-all;
}
复制代码

循环

很多像：margin、padding、width、height这种常用的，并且值是和数字方面相关的。就可以使用循环一次性遍历出来啦！

.size-factory(@n, @i: 1) when (@i =< @n) {
    .mt-@{i} {
        margin-top: @i * 1rem;
    }
    .mr-@{i} {
        margin-right: @i * 1rem;
    }
    .mb-@{i} {
        margin-bottom: @i * 1rem;
    }
    .ml-@{i} {
        margin-left: @i * 1rem;
    }
    .size-factory(@n, (@i + 1)); // 进入下一次循环
}
.size-factory(30);
复制代码

通过这样的遍历我们就可以得到如下结果啦：

.mt-1 {
  margin-top: 1rem;
}
.mr-1 {
  margin-right: 1rem;
}
.mb-1 {
  margin-bottom: 1rem;
}
.ml-1 {
  margin-left: 1rem;
}
....
​
.mt-30 {
  margin-top: 30rem;
}
.mr-30 {
  margin-right: 30rem;
}
.mb-30 {
  margin-bottom: 30rem;
}
.ml-30 {
  margin-left: 30rem;
}
复制代码

编译less文件

再送一个小tips，不知道写出来的结果时，可以使用以下命令进行输出编译后的结果：

lessc .\common.less .\common.css
复制代码

如果提示没有这个指令的话，可以全局安装一下

npm install less -g

可以使用运算

可以嵌套

4.实现在不同屏幕设备下等比例缩放

使用rem+less+媒体查询