视口viewport

视口viewport：    简单点说就是用来预览网页的窗口。

又分为以下两大类：

    pc端视口：就是浏览器的可视区域。

    移动端视口：当前设备的屏幕区域。

一、 pc端视口：

      1.在PC端,浏览器窗口大小会影响HTML大小,进而影响网页布局

       2. 在PC端视口其实就是我们浏览器大小(在PC端,视口可以影响HTML元素大小)

二、移动端视口：

1.视觉视口visual viewport   ：眼睛看到的区域大小

2.布局视口layout viewport   ：当前视口就是用来布局的（默认大小980px）

3.理想视口ideal viewport     ：又叫标准视口

               设置步骤：1.容器水平方向不能出现滚动条（百分比）

                                 2.页面内容不能出现缩放

                语法：<meta   name=“viewport”     content=“width=device-width，initial-scale=1.0”>

三、屏幕适配：

网页不能出现滚动条和缩放.(控制缩放)

解决方式: 通过<meta  name = "viewport"  content = ""> 设置就可以控制

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

width=device-width    宽度等于当前设备宽度,满足多个终端

 <meta name="viewport"  content="initial-scale=1">

initial-scale=1  不缩放

 <meta name="viewport" content="user-scalable=0">

user-scalable=0  禁止用户缩放

 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

四、多行文本溢出显示省略号

/* 设置超出部分的显示方式 */

overflow: hidden;

/* 文字溢出显示省略号 */

text-overflow: ellipsis;

/* 用来控制显示行数 */

-webkit-line-clamp: 2;

/* 文字显示方式,默认水平 */

-webkit-box-orient: vertical;

/* 将盒子转为弹性盒子 */

display: -webkit-box;

注意: 如果是纯字母实现多行文本溢出,需要加一个属性 word-break: break-all;

      默认字母不会自动换行的,所以需要加 word-break: break-all 并且在文字中设置一个空格或者回车符

五、定位脱标元素盒子居中

1. margin: 0 auto; 

    只能实现标准流下的盒子居中显示

2.  position: absolute;

    left: 50%;

    margin-left: -25px;

3.  position: absolute;

    left: 50%;

    top: 50%;

    /* 也是向左移动当前元素宽度的一半 */

    transform: translate(-50%, -50%);（注意用逗号）