搜狗：

1忿峻、觸發(fā)BFC的方法：
1）float的值不為none辕羽。
2）overflow的值不為visible。
3）position的值不為static或releative中的任何一個绰寞。
4）display的值為table-cell、table-caption和inline-block之一觉壶。
2件缸、css選擇器
p:first-child：p標(biāo)簽的父元素的首個子p元素。
p~ul：選擇前面有 <p> 元素的每個 <ul> 元素旷坦。
div+p：選擇緊接在 <div> 元素之后的<p> 元素佑稠。
p:first-of-type：選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素舌胶。
3、padding-top:50%的含義
定義基于父元素寬度的百分比上內(nèi)邊距辆它。
4履恩、常見的塊級元素：p標(biāo)簽
常見的行內(nèi)元素：span標(biāo)簽
5、ul子元素不允許放置除除li外的任何元素
6飒筑、CSS3 box-sizing屬性
content-box:默認(rèn)屬性绽昏，寬度和高度不包括 內(nèi)邊距和邊框全谤。
border-box:寬度和高度包括內(nèi)邊距和邊框。
inherit:從父元素繼承box-sizing屬性补憾。
7卷员、promise用法
8、let命令和const命令
let命令
1）let用法類似var威酒，用于聲明變量葵孤。但是所聲明的變量只在let命令所在的代碼塊內(nèi)有效。
2）不存在變量提升箫津，所以變量一定要在聲明后使用宰啦，否則報錯。
3）暫時性死區(qū)田炭。只要塊級作用域內(nèi)存在let命令漓柑，它所聲明的變量就“綁定”在這個區(qū)域辆布，不再受外部的影響。比如 ：

var a = 1;
if(true){
a = 2; //報錯
?let a;
}?

?上面的代碼中存在全局變量a景用，但是塊級作用域中l(wèi)et又聲明了一個局部變量a惭蹂，導(dǎo)致后者綁定這個塊級作用域剿干，所以在let聲明變量前穆刻，對a賦值會報錯。
4）不允許重復(fù)聲明榜轿。let不允許在相同的作用域內(nèi)聲明同一變量朵锣。

function?( ){
let a = 1;
var a =2;
}   //報錯?

const命令?
1）const用來聲明常量诚些。一旦聲明其值不能改變皇型。這就意味著const一旦聲明常量弃鸦，就必須初始化幢痘，不能留到以后賦值。
2）與let命令相同购岗，只在聲明所在的塊級作用域內(nèi)有效门粪。
3）const命令聲明的變量也不提升庄拇，同樣存在暫時性死區(qū)，只能在聲明后使用溶弟。同樣不可重復(fù)聲明變量辜御。
4）對于復(fù)合類型的變量屈张，變量名不指向數(shù)據(jù)，而是指向數(shù)據(jù)所在的地址碳抄。const命令只是指向的地址不變场绿，并不保證改地址的數(shù)據(jù)不變焰盗，所以將一個地址聲明為變量需要非常小心。

const foo = {}爷光；
foo.prop = 123;
foo= { }; ?// 報錯

上面的代碼澎粟，常量foo存儲的是一個地址，指向一個對象引有。不可變的只是這個地址倦逐，即不能把foo指向另一個地址，但對象本身是可變的曾我，所以依然可以為其添加屬性抒巢。如果想使對象不可變秉犹，可以將對象凍結(jié)，使用object.freeze方法型诚。
5）跨模塊常量的寫法鸳劳。

//constants.js模塊
export const A = 1;
export const B = 2;
export const C = 3;

//text1.js模塊
import? * as constants from './constants';
console.log(constants.A ); // 1?
console.log(constants.B ); // 2

//text2.js模塊
import? {A, B} from './constants';
console.log(constants.A ); // 1?
console.log(constants.B ); // 2

參考文獻(xiàn)：ES6學(xué)習(xí)筆記--let和const命令
7赏廓、reflow和repaint
reflow：對于DOM結(jié)構(gòu)中的各個元素都有自己的盒子（模型）幔摸，這些都需要瀏覽器根據(jù)各種樣式（瀏覽器的、開發(fā)人員定義的等）來計算并根據(jù)計算結(jié)果將元素放到它該出現(xiàn)的位置驱负。
repaint：當(dāng)各種盒子的位置尿贫、大小以及其他屬性庆亡，例如顏色捞稿、字體大小等都確定下來后，瀏覽器于是便把這些元素都按照各自的特性繪制了一遍彰亥，于是頁面的內(nèi)容出現(xiàn)了任斋。
引起Repain和Reflow的一些操作:
1）增加、刪除瘟檩、修改 DOM 結(jié)點
2）移動 DOM 的位置澈蟆，或動畫
3）修改 CSS 樣式
（例如：display:none 會觸發(fā) reflow趴俘，而 visibility:hidden 只會觸發(fā) repaint，因為沒有發(fā)現(xiàn)位置變化）
4） Resize 窗口（移動端沒有這個問題）太惠，或滾動窗口
5）修改網(wǎng)頁的默認(rèn)字體
Reflow 的成本比 Repaint 的成本高得多的多垛叨。DOM Tree 里的每個結(jié)點都會有 reflow 方法柜某，一個結(jié)點的 reflow 很有可能導(dǎo)致子結(jié)點喂击，甚至父點以及同級結(jié)點的 reflow。
優(yōu)化方法：
1）不要一條一條地修改 DOM 的樣式佩谷〖嗍龋可以預(yù)先定義好 css 的 class裁奇，然后修改 DOM 的 className。
2）把 DOM 離線后修改溃肪。
3）不要把 DOM 節(jié)點的屬性值放在一個循環(huán)里當(dāng)成循環(huán)里的變量惫撰。不然這會導(dǎo)致大量地讀寫這個結(jié)點的屬性。
4）盡可能的修改層級比較低的 DOM節(jié)點扼雏。當(dāng)然夯膀，改變層級比較底的 DOM節(jié)點有可能會造成大面積的 reflow棍郎，但是也可能影響范圍很小涂佃。
5）為動畫的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他們的 CSS 是會大大減小 reflow 汽抚。
6）盡量不使用 table 布局伯病。因為可能很小的一個小改動會造成整個 table 的重新布局午笛。

參考文獻(xiàn):[ JS 進(jìn)階 ] Repaint 、Reflow 的基本認(rèn)識和優(yōu)化 (2)
8告组、下圖實現(xiàn)方法

.div{   
    width:10px;
    height:0px;
    border:10px solid red;
    border-right:10px solid yellow;
    }

<div class="div"></div>

9木缝、移除display:inline-block水平空隙的方法
問題描述：
1）真正意義上的inline-block水平呈現(xiàn)的元素間我碟，換行顯示或空格分隔的情況下會有間距姚建；
2）使用CSS更改非inline-block水平元素為inline-block水平，也會有該問題

.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
}

<div class="space">
    <a href="##">惆悵</a>
    <a href="##">淡定</a>
    <a href="##">熱血</a>
</div>

問題原因：
標(biāo)簽段之間存在空格或換行
解決：

1）移除標(biāo)簽段之間的空格

方式1：

<div class="space">
    <a href="##">
    惆悵</a><a href="##">
    淡定</a><a href="##">
    熱血</a>
</div>

方式2：

<div class="space">
    <a href="##">惆悵</a
    ><a href="##">淡定</a
    ><a href="##">熱血</a>
</div>

方式3：借助HTML注釋。

<div class="space">
    <a href="##">惆悵</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">熱血</a>
</div>

2）使用margin負(fù)值

.space a {
    display: inline-block;
    margin-right: -3px;
}

3）讓閉合標(biāo)簽吃膠囊

<div class="space">
    <a href="##">惆悵
    <a href="##">淡定
    <a href="##">熱血</a>
</div>

4）使用font-size:0

.space {
    font-size: 0;
 -webkit-text-size-adjust:none;//Chrome兼容性處理，Chrome默認(rèn)有最小字體大小限制缎罢。
}
.space a {
    font-size: 12px;
}

5）使用letter-spacing(Opera下存在兼容性問題：最小間距1像素)

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

6）使用word-spacing

.space {
   display: inline-table;//解決chrome兼容性問題
    word-spacing: -6px;
}
.space a {
    word-spacing: 0;
}

參考文獻(xiàn)：去除inline-block元素間間距的N種方法
10策精、左圖右文排版

<div>
<div id="left">圖片</div>
<div id="right">文字</div>
</div>

要求：左邊固定寬咽袜，右邊自適應(yīng)。
參考文獻(xiàn)：
CSS面試題(一)
11谜嫉、單行沐兰、多行文本溢出省略號
單行文本溢出省略號：

.div{   
border:1px solid black;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
<div class="div">如果實現(xiàn)單行文本的溢出顯示省略號同學(xué)們應(yīng)該都知道用text-overflow:ellipsis屬性來住闯，當(dāng)然還需要加寬度width屬來兼容部分瀏覽澳淑。</div>

text-overflow:當(dāng)文本溢出包含元素時發(fā)生的事情杠巡。
text-overflow:ellipsis.顯示省略號來代表被修改的文本。
white-space:這個屬性聲明建立布局過程中如何處理元素中的空白符绑改。
white-space:nowrap:文本不會換行厘线，文本會在在同一行上繼續(xù)出革，直到遇到
標(biāo)簽為止。
多行文本溢出省略號：

.div{   
border:1px solid black;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
<div class="div">-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數(shù)成箫。 為了實現(xiàn)該效果旨枯，它需要組合其他的WebKit屬性攀隔。常見結(jié)合屬性：
display: -webkit-box; 必須結(jié)合的屬性 ，將對象作為彈性伸縮盒子模型顯示 明刷。
-webkit-box-orient 必須結(jié)合的屬性 满粗，設(shè)置或檢索伸縮盒對象的子元素的排列方式 映皆。</div>

Paste_Image.png

-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數(shù)劫扒。 為了實現(xiàn)該效果沟饥，它需要組合其他的WebKit屬性。常見結(jié)合屬性：
display: -webkit-box; 必須結(jié)合的屬性 广料，將對象作為彈性伸縮盒子模型顯示 幼驶。
-webkit-box-orient 必須結(jié)合的屬性 盅藻，設(shè)置或檢索伸縮盒對象的子元素的排列方式 。
12勃蜘、html如下面所示假残，編寫CSS實現(xiàn)下面效果。

<div class="ul-container">
<ul>
<li>你好</li>
<li>同學(xué)</li>
<li>搜狐</li>
<li>公司</li>
<li>歡迎</li>
<li>你的</li>
<li>到來</li>
</ul>
</div>

每排有3個，第3個和最后一排沒有右邊的間隔線莹汤。

.ul-container{  
width:304px;/*這里寬度=3個li標(biāo)簽的寬度+2個間隔線的寬度*/
}
/*div最后要清除浮動否則父元素包不住ul和li*/
.ul-container:after{
    content:'';
    display:block;clear:both;
    }
/*清除ul和li的原始格式*/
ul,li{
    list-style-type:none;
    margin:0px;
    padding:0px;
    }
li{
    float:left;
    border-right:2px solid gray;
    width:100px;
    height:40px;
    line-height:40px;
    text-align:center;
margin-bottom:10px;
    }
li:nth-of-type(3n+3){
    border-right:0px;
    }
li:nth-last-of-type(1){
    border-right:0px;
    }