前端面試題總結(jié)
JavaScript面試題總結(jié)
CSS面試題總結(jié)
VUE面試題總結(jié)
img中alt和title的區(qū)別
圖片中的 alt屬性是在圖片不能正常顯示時出現(xiàn)的文本提示。alt有利于SEO優(yōu)化
圖片中的 title屬性是在鼠標(biāo)在移動到元素上的文本提示雨涛。
如何理解CSS的盒子模型
盒子模型由Margin(外邊距) +Border(邊框)+Padding(內(nèi)邊距)+Content(內(nèi)容)
標(biāo)準(zhǔn)盒模型：屬性width,height只包含內(nèi)容content灵莲，不包含border和padding宏粤。
IE 盒模型：屬性width,height包含border和padding宁炫，指的是content+padding+border吼畏。
在ie8+瀏覽器中使用哪個盒模型可以由box-sizing(CSS新增的屬性)控制积担，默認(rèn)值為content-box霉颠，即標(biāo)準(zhǔn)盒模型；如果將box-sizing設(shè)為border-box則用的是IE盒模型事期。
用純CSS創(chuàng)建一個三角形
<style>
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 50px solid #000000;
}
</style>
</head>
<body>
<div></div>
</body>
如何讓一個div水平居中
已知寬度滥壕，block元素 ，添加添加margin:0 auto屬性兽泣。
已知寬度绎橘，絕對定位的居中 ，上下左右都為0，margin:auto
如何讓一個div水平垂直居中
不夠全面称鳞，歡迎補充
<div class="parent">
<div class="child"></div>
</div>
<style>
/* 第一種 */
div.parent {
display: flex;
justify-content: center;
align-items: center;
}
/* 第二種 */
div.parent {
position: relative;
}
div.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 或者 */
div.child {
width: 50px;
height: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -10px;
}
/* 或 */
div.child {
width: 50px;
height: 10px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
/* 第三種 */
div.parent {
display: grid;
}
div.child {
justify-self: center;
align-self: center;
}
/* 第四種 */
div.parent{
display:flex;
}
div.child{
margin:auto;
}
</style>
如何清除浮動涮较？
萬能清除法 after偽類 清浮動（現(xiàn)在主流方法，推薦使用）
float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}
CSS中 link 和@import 的區(qū)別是冈止？
link屬于HTML標(biāo)簽狂票，而@import是CSS提供的，頁面被加載時熙暴，link會同時被加載闺属，而@import引用的CSS會等到頁面被加載完再加載
import只在IE5以上才能識別，而link是HTML標(biāo)簽周霉，無兼容問題
link方式的樣式的權(quán)重 高于@import的權(quán)重.
CSS優(yōu)先級
不同級別：!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性
同一級別：后寫的會覆蓋先寫的
ID選擇器, 權(quán)重:100;class,屬性選擇器和偽類選擇器掂器，權(quán)重:10;標(biāo)簽選擇器和偽元素選擇器，權(quán)重:1;
BFC（塊級格式化上下文俱箱，用于清除浮動唉匾，防止margin重疊等）
塊級格式化上下文，是一個獨立的渲染區(qū)域匠楚，并且有一定的布局規(guī)則巍膘。
BFC區(qū)域不會與float box重疊
BFC是頁面上的一個獨立容器，子元素不會影響到外面
計算BFC的高度時芋簿，浮動元素也會參與計算
哪些元素會生成BFC：
根元素
float不為none的元素
position為fixed和absolute的元素
display為inline-block峡懈、table-cell、table-caption与斤，flex肪康，inline-flex的元素
overflow不為visible的元素
了解重繪和重排嗎，知道怎么去減少重繪和重排嗎
DOM的變化影響到了預(yù)算內(nèi)宿的幾何屬性比如寬高撩穿，瀏覽器重新計算元素的幾何屬性磷支，其他元素的幾何屬性也會受到影響，瀏覽器需要重新構(gòu)造渲染樹食寡，這個過程稱之為重排雾狈，瀏覽器將受到影響的部分重新繪制在
屏幕上的過程稱為重繪。
引起重排重繪的原因有：
- 添加或者刪除可見的DOM元素抵皱，
- 元素尺寸位置的改變
- 瀏覽器頁面初始化善榛，
瀏覽器窗口大小發(fā)生改變，重排一定導(dǎo)致重繪呻畸，重繪不一定導(dǎo)致重排移盆，
減少重繪重排的方法有：
- 不在布局信息改變時做DOM查詢，
- 使用csstext,className一次性改變屬性
- 使用fragment
- 對于多次重排的元素伤为，比如說動畫咒循。使用絕對定位脫離文檔流，使其不影響其他元素
使元素消失的方法有哪些？
- opacity：0叙甸，該元素隱藏起來了颖医，但不會改變頁面布局，并且蚁署，如果該元素已經(jīng)綁定一些事件便脊，如click事件蚂四，那么點擊該區(qū)域光戈，也能觸發(fā)點擊事件的
- visibility：hidden，該元素隱藏起來了遂赠，但不會改變頁面布局久妆，但是不會觸發(fā)該元素已經(jīng)綁定的事件
- display：none，把元素隱藏起來跷睦，并且會改變頁面布局筷弦，可以理解成在頁面中把該元素刪除掉。
