1.29 未知高度元素垂直居中、垂直居中的实现方式有哪些？

绝对定位+css3 transform:translate(-50%，-50%)

.wrap{
    position:relative;
}
.child{
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
}

css3 的flex布局

.wrap{
    display:flex;
    justify-content:center;
}
.child{
    align-self:center;
}

table布局

<div class="wrap">
<div class="child">
<div>sadgsdgasgd</div>
</div>
</div>
<style>
.wrap{
    display:table;
    text-align:center;
}
.child{
    background:#ccc;
    display:table-cell;
    vertical-align:middle;
}
.child div{
    width:300px;
    height:150px;
    background:red;
    margin:0 auto;
}
</style>

1.30 图片垂直居中

1. 使用flex实现图片垂直居中

<div class="flexbox">
    <img src="1.jpg" alt="">
</div>
<style>
.flexbox{
    width: 300px;
    height: 250px;
    background:#fff;
    display: flex;
    align-items:center
  }
.flexbox img{
    width: 100px;
    height: 100px;
    align-items: center;
 }
</style>

利用Display: table;实现img图片垂直居中

<div class="tablebox">
<div id="imgbox">
<img src="1.jpg" alt="">
</div></div>
<style>
.tablebox{width: 300px;height: 250px;background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}
#imgbox img{width: 100px}
</style>

用绝对定位实现垂直居中

<div class="posdiv">
<img src="1.jpg" alt=""></div>
<style>
.posdiv{
    width: 300px;height: 250px;
    background: #fff;
    position: relative;
margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}
</style>

1.31 文本元素居中

水平居中：text-align
垂直居中：line-height 和height设置一样
多行文本垂直居中
- 父级元素高度不固定（padding-top和padding-bottom）
- 父级元素高度固定（vertical-align:middle +display:table-cell ）

1.32 CSS实现一个等腰三角形

主要是通过把宽高设置成0，边框宽度设置宽一些，设置其中三个边透明，只留一个边显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
    div {
        width:0px;height:0px;margin:100px auto;
        border-left:80px solid transparent;
        border-right:80px solid transparent;
        border-bottom:138.56px solid #A962CE; /*--三角形的高--*/
    }
</style>
</head>
<body>
<div>
</div>
</body>
</html>

1.33 画 0.5px 的直线

使用scale缩放

<style>
.hr.scale-half {
 height: 1px;
 transform: scaleY(0.5);
}
</style>
<p>1px + scaleY(0.5)</p>
<div class="hr scale-half"></div>
<!--
Chrome/Safari都变虚了，只有Firefox比较完美看起来是实的而且还很细，效果和直接设置0.5px一
样。所以通过transform: scale会导致Chrome变虚了，而粗细几乎没有变化。但是如果加上transform�origin: 50% 100%：
-->
.hr.scale-half {
 height: 1px;
 transform: scaleY(0.5);
 transform-origin: 50% 100%;
}

线性渐变linear-gradient

<style>
.hr.gradient {
height: 1px;
background: linear-gradient(0deg, #fff, #000);
}
</style>
<p>linear-gradient(0deg, #fff, #000)</p>
<div class="hr gradient"></div>

boxshadow

<style>
.hr.boxshadow {
 height: 1px;
 background: none;
 box-shadow: 0 0.5px 0 #000;
}
</style>
<p>box-shadow: 0 0.5px 0 #000</p>
<div class="hr boxshadow"></div>

viewport

<meta name="viewport" content="width=device-width,initial-sacle=0.5">
<!--
width=device-width表示将viewport视窗的宽度调整为设备的宽度，这个宽度通常是指物理上宽度
initial-sacle=0.5 缩放0.5
-->

1.34 移动端适配方案

viewport 适配

<meta name="viewport" content="width=750,initial-scale=0.5">
<!--
initial-scale = 屏幕的宽度 / 设计稿的宽度
为了适配其他屏幕，需要动态的设置 initial-scale 的值
-->
<head>
<script>
const WIDTH = 750
const mobileAdapter = () => {
let scale = screen.width / WIDTH
let content = `width=${WIDTH}, initial-scale=${scale}, maximum�scale=${scale}, minimum-scale=${scale}`
let meta = document.querySelector('meta[name=viewport]')
if (!meta) {
meta = document.createElement('meta')
meta.setAttribute('name', 'viewport')
document.head.appendChild(meta)
}
meta.setAttribute('content',content)
}
mobileAdapter()
window.onorientationchange = mobileAdapter //屏幕翻转时再次执行
</script>
</head>

缺点：边线问题，不同尺寸下，边线的粗细是不一样的（等比缩放后），全部元素都是等比缩放，实际显示效果可能不太好

vw 适配（部分等比缩放）
- 开发者拿到设计稿（假设设计稿尺寸为750px，设计稿的元素标注是基于此宽度标注）
- 开始开发，对设计稿的标注进行转换，把px换成vw。比如页面元素字体标注的大小是32px，换成vw为 (100/750)*32 vw
- 对于需要等比缩放的元素，CSS使用转换后的单位
- 对于不需要缩放的元素，比如边框阴影，使用固定单位px
```
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum�scale=1, minimum-scale=1">
<script>
 const WIDTH = 750
 //:root { --width: 0.133333 } 1像素等于多少 vw
 document.documentElement.style.setProperty('--width', (100 / WIDTH))
</script>
</head>
```
rem适配
弹性盒适配（合理布局）

1.35 link 和 @import 的区别

引入的内容不同

link 除了引用样式文件，还可以引用图片等资源文件，而 @import 只引用样式文件

加载顺序不同

link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载

兼容性不同

link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持

对 JS 的支持不同

link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持

1.36 iframe有什么优点、缺点?

优点：

iframe能够原封不动的把嵌入的网页展现出来。
如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内
容的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以
增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

iframe会阻塞主页面的onload事件；
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。会
产生很多页面，不容易管理。
iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会
分散访问者的注意力，用户体验度差。
代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理
iframe中的内容，所以使用iframe会不利于搜索引擎优化（SEO）。
很多的移动设备无法完全显示框架，设备兼容性差。
iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。