每天10題，100天后，搞定所有前端面試的高頻知識點，加油！ ！ ！ ，在看文章的同時，希望不要直接看答案，先思考一下自己會不會，如果會，自己的答案是什麼？想過之後再與答案比對，是不是會好一點，當然如果你有比我更好的答案，歡迎留言區留言，一起探討技術之美。
我：呃~，好的，解決自適應問題可以採用「 淘寶無限適配 佈局單位使用rem 」 ，適配所需的js還有說明文件：淘寶的github網址，整出程式碼如下：
<style>
*{margin: 0;padding: 0;}
html{
height: 37.5px;
}
.container{
width: 1rem;
height: 1rem;
background-color: #f00;
}
</style>
<script src="../index.js"></script>
<body>
<div class="container">111</div>
</body>
#【相關推薦：web前端開發】
我：呃~，好的，通俗來講，在html css中，響應式意為：一個URL可以回應多端，簡言之在不同的設備不同尺寸的情況下，相同的url都能對其進行適配，如何做？整出程式碼如下：
<style>
*{margin: 0;padding: 0;}
ul{
list-style: none;
}
ul li {
display: inline-block;
width: 100px;
background-color: #f00;
}
@media only screen and (max-width: 1000px){
ul li:last-child{
display: none;
}
}
@media only screen and (max-width: 800px){
ul li:nth-child(5){
display: none;
}
}
@media only screen and (max-width: 500px){
ul li:nth-child(4){
display: none;
}
}
</style>
<body>
<ul>
<li>首页</li>
<li>消息</li>
<li>题库</li>
<li>面试</li>
<li>内容</li>
<li>offer</li>
</ul>
</body>當然也可以為圖片加上回應式，整出程式碼如下：
<style>
*{margin: 0;padding: 0;}
picture{
width: 300px;
height: 300px;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
};
source {
width: 80%;
height: 80%;
object-fit: contain;
};
</style>
<body>
<picture>
<!-- 如果切换到不同设备上 -->
<source srcset="../7.jpeg" media="(min-width: 1000px)">
<source srcset="../004.jpeg" media="(min-width: 700px)">
<!-- 默认加载该图片 -->
<img src="../4.jpeg">
</picture>
</body>
我：呃~，好的，佈局方案根據項目特點，有以下選擇：一、什麼情況下採用響應式佈局 資料不是特別多，使用者量不是特別大，純粹展示類別的專案適合響應式佈局
2．換1980的電腦四、
例如:公司的官網、專題頁面
特別追求效能的項目，不太適合響應式，因為如果添加了很多的響應式就會造成載入速度變慢。
二、
pc 行動端應該做什麼樣的佈局方案 注意:訪問量還可以或比較大，類似淘寶網。
pc是一套，會加入一點點響應式。
行動端是一套，會使用自適應的佈局方式。
三、
pc的設計圖 ui: 1980
筆記型電腦:1280
ui圖的寬度和電腦的寬度不對該怎麼辦?
1．把ui圖進行等比縮放，縮放成和電腦一樣的尺寸行動端的設計圖 寬度:750
因為750設計圖/2就是375，剛好是iphone6的尺寸，我們要把iphone6的尺寸做成基準點。
我：呃~，好的，總結如下：重排(Reflow)：元素的位置變動時發生重排，也叫回流。此時在關鍵渲染路徑中的 Layout 階段，計算每個元素在裝置視窗內的確切位置和大小。當一個元素位置改變時，其父元素及其後邊的元素位置都可能發生變化，代價極高。重繪(Repaint): 元素的樣式發生變動，但是位置沒有改變。此時在關鍵渲染路徑中的 Paint 階段，將渲染樹中的每個節點轉換成螢幕上的實際像素，這一步通常稱為繪製或柵格化。
另外，重排必定會造成重繪。以下是避免多重拍重繪的方法1）使用DocumentFragment 進行DOM 操作，不過現在原生操作很少也基本上用不到2）CSS 樣式盡量批量修改3）避免使用table 佈局4）為元素提前設定好高寬，且不因多次渲染而改變位置
我：呃~，我对这两者的看法以及优缺点总结如下：
CSS3 的动画：
1.在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化（比如专门新建一个图层用来跑动画）
2.代码相对简单
3.在动画控制上不够灵活
4.兼容性不好
5.部分动画功能无法实现（如滚动动画，视差滚动等）
JavaScript 的动画：
弥补了 css 缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容 IE6，并且功能强大。
总结： 对于一些复杂控制的动画，使用 javascript 会比较好。而在实现一些小的交互动效的时候，可以多考虑 CSS。
我：呃~，因为没有指定元素具体高度和宽度,比如数据还没有加载进来时元素高度是 100px(假设这里是 100px),数据加载进来后,因为有了数据,然后元素被撑大,所有出现了抖动。
我：呃~，如果说是开发阶段，我会用 20%-30% 的时间写 CSS。但是如果项目是采用某种组件库的时候，比如：UI 设计时遵循了 element-ui 的规范，而开发使用的 UI 框架为 element-ui，因此大多数的界面并不需要写大量的 CSS，因为预设样式已足够使用。
我：呃~，好的，隐藏元素的方法有如下几种：
display: none; ：通过 CSS 操控 display，移出文档流。
opacity: 0; ：透明度为 0，仍在文档流中，当作用于其上的事件(如点击)仍有效。
visibility: hidden; ：透明度为 0，仍在文档流中，但作用于其上的事件(如点击)无效，这也是 visibility:hidden 与 opacity: 0 的区别。
content-visibility; ：移出文档流，但是再次显示时消耗性能低。
position: absolute;top: -9000px;left: -9000px; ：绝对定位于当前页面的不可见位置。
font-size: 0; ：字体大小设置为 0
我：呃~，好的，整出代码如下：
<style>
div{
width: 100px;
/* 使用如下来设置一行行超出显示省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
p{
width: 100px;
/* 使用 -webkit-line-clamp 来设置多行超出显示省略号 */
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
</style>
<body>
<div>
1222222222222222222222222222222
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste esse velit illum vel cumque obcaecati. Quae, dicta nihil quod vero mollitia dignissimos autem, necessitatibus, iure a debitis temporibus eaque ratione.</p>
</body>
我：呃~，order 属性定义 Flex 布局中子元素的排列顺序，数值越小，排列越靠前，默认为 0。整出代码如下：
<style>
.container{
width: 500px;
border: 5px solid #ddd;
display: flex;
justify-content: space-around;
}
.container div{
width: 100px;
height: 100px;
background-color: #f00;
}
#d1{
order: 3;
}
#d2{
order: 2;
}
#d3{
order: 1;
}
</style>
<body>
<div class="container">
<div id="d1">老大</div>
<div id="d2">老二</div>
<div id="d3">老三</div>
</div>
</body>
以上是看看這些前端面試題，帶你搞定高頻知識點（四）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
