面試題：介紹一下CSS的盒子模型
css的盒子模型有哪些：標(biāo)準(zhǔn)盒子模型 亲铡、 IE盒子模型
css的盒子模型區(qū)別：
標(biāo)準(zhǔn)盒子模型：margin 芙盘、border侦锯、padding剖踊、content
IE盒子模型：margin庶弃、content(border + padding + content)
通過(guò)css如何轉(zhuǎn)換盒子模型：
box-sizing:content-box //標(biāo)準(zhǔn)盒子模型
box-sizing:border-box //IE盒子模型
面試題：line-height和height的區(qū)別？
line-height是每一行文字的高德澈，如果文字換行則整個(gè)盒子高度會(huì)增大(行數(shù)*行高)歇攻。
height是一個(gè)定值，就是這個(gè)盒子的高度梆造。
CSS選擇符合有哪些缴守？哪些屬性可以繼承？
css選擇符：
通配()
id選擇器()
類選擇器(.)
標(biāo)簽選擇器(div p h1)
相鄰選擇器(+)
后代選擇器(ul li)
子元素選擇器(>)
屬性選擇器(a[href])
css屬性哪些可以繼承
文字系列：font-size镇辉、color屡穗、line-height、text-align..
css屬性不可繼承屬性：
border忽肛、padding鸡捐、margin...
css優(yōu)先級(jí)算法如何計(jì)算?
優(yōu)先級(jí)比較：
!important>內(nèi)聯(lián)樣式>id>class>標(biāo)簽>通配
css權(quán)重計(jì)算：
第一：內(nèi)聯(lián)樣式(style) 權(quán)重值：1000
第二：id選擇器 權(quán)重值：100
第二：類選擇器 權(quán)重值：10
第二：標(biāo)簽&偽元素選擇器 權(quán)重值：1
第二：通配、>麻裁、+ 權(quán)重值：0
面試題：用CSS畫一個(gè)三角形
用邊框畫(border)
面試題：一個(gè)盒子不給寬度和高度如何水平垂直居中？
方式一：
<div class="container">
<div class="main">main</div>
</div>
.container{
display:flex;
justify-content:center;
align-items:center;
width:300px;
height:300px;
border:5px solid #ccc;
}
方式二：
<div class="container">
<div class="main">main</div>
</div>
.container{
position:relative;
width:300px;
height:300px;
border:5px solid #ccc;
}
.main{
position:absolute;
left:50%;
top:50%;
background:red;
transform:translate(-50%,-50%);
}
面試題：display有哪些值？說(shuō)明他們的作用煎源？
none 隱藏元素
block 把某某元素轉(zhuǎn)換成塊元素
inline 把某某元素轉(zhuǎn)換成內(nèi)聯(lián)元素
inline-block 把某某元素轉(zhuǎn)換成行內(nèi)塊元素
面試題：對(duì)BFC規(guī)范(塊級(jí)格式化上下文：block formatting context)的理解色迂？
BFC就是頁(yè)面上一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素手销。
1歇僧、了解BFC：塊級(jí)格式化上下文。
2锋拖、BFC的原則：如果一個(gè)元素具有BFC诈悍，那么內(nèi)部元素再怎么弄，都不會(huì)影響到外面的元素兽埃。
3侥钳、如何觸發(fā)BFC：
float的值非none
overflow的值非none
display的值為：inline-block 、table-cell
position的值為：absoute柄错、fixed
面試題：清除浮動(dòng)有哪些方式舷夺？
1、觸發(fā)BFC
2售貌、多創(chuàng)建一個(gè)盒子给猾，添加樣式：clear:both
3、after方式
ul:after{
content:'',
display:block;
clear:both;
}
面試題：position有哪些值颂跨？敢伸？分別是根據(jù)什么定位的？
static [默認(rèn)] 沒(méi)有定位
fixed 固定定位 相對(duì)于瀏覽器窗口進(jìn)行定位
relative 相對(duì)于自身定位 不脫離文檔流
absolute 相對(duì)于第一個(gè)有relative的父元素恒削，脫離文檔流池颈。
relative和absolute區(qū)別
1、relative不脫離文檔流蔓同，absolute脫離文檔流饶辙。
2、relative相對(duì)于自身斑粱，absolute相對(duì)于第一個(gè)有relative的父元素弃揽。
3、relative如果有l(wèi)eft则北、right矿微、top、bottom ==> left尚揣、right
absolute如果有l(wèi)eft涌矢、right、top快骗、bottom ==>left娜庇、right塔次、top、bottom
面試題：寫一個(gè)左中右布局占滿屏幕名秀，其中左励负、右倆塊固定寬200，中間自適應(yīng)寬匕得，要求先加載中間塊继榆、請(qǐng)寫出結(jié)構(gòu)以及樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width='device-width', initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
body{
height:100vh;
width:100vw;
}
.container > div{
float: left;
}
.l{
margin-left: -100%;
width:200px;
height:100vh;
background: red;
}
.c{
width:100%;
height:100vh;
background: pink;
}
.r{
margin-left: -200px;
width:200px;
height:100vh;
background: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="c">
<div style="padding:0 200px">中</div>
</div>
<div class="l">左</div>
<div class="r">右</div>
</div>
</body>
</html>
面試題 什么是CSS reset?
reset.css 是一個(gè)css文件 重置css樣式的
Normalize.css 為了跨平臺(tái)一致性汁掠，一個(gè)css重置庫(kù)樣式 性能會(huì)更好
面試題 css sprite（雪碧圖）是什么略吨，有什么優(yōu)缺點(diǎn)？
1考阱、是什么
把多個(gè)小圖標(biāo)合并成一張大圖片
2翠忠、優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：減少了http請(qǐng)求的次數(shù) 提升了性能
缺點(diǎn)：維護(hù)比較差 例如 圖片位置進(jìn)行修改 或者內(nèi)容寬高進(jìn)行修改
面試題：display：none 與 visibility:hidden的區(qū)別？
1羔砾、占用位置的區(qū)別
display:none 是不占用位置
visibilit:hidden 雖然隱藏了 但是占用位置
2负间、重繪和回流的問(wèn)題
display:none、visibilit:hidden 產(chǎn)生重繪
display:none 還會(huì)產(chǎn)生一次回流
回流一定會(huì)產(chǎn)生重繪 但是 重繪不一定產(chǎn)生回流
產(chǎn)生回流的情況 ：改變?cè)氐奈恢茫╨eft top）顯示隱藏元素姜凄。政溃。
產(chǎn)生重繪的情況：樣式改變（background、color....）
面試題：opacity和rgba的區(qū)別
共同性：實(shí)現(xiàn)透明效果
1态秧、opacity 取值范圍0到1之間董虱，0表示完全透明 1表示不透明
2、rgba R代表紅色 G代表綠色 B 表示藍(lán)色 取值可以在正整數(shù)或者百分?jǐn)?shù)之間
表示的透明度 取值0到1 之間
區(qū)別：
opacity 會(huì)繼承父元素的opacity屬性申鱼，而rgba設(shè)置元素的后臺(tái)元素不會(huì)繼承不透明屬性
