1、實現一個div在不同分辨率下的水平垂直居中
方法1：table-cell
<div class="box box1">
<span>垂直居中</span>
</div>
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法2：display:flex
.box2{
display: flex;
justify-content:center;
align-items:Center;
}
方法3：絕對定位和負邊距
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid pink;
width: 100px;
height: 100px;
}
方法4：絕對定位和0
.box4 span{
width: 50%;
height: 50%;
background: #000;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
方法5：translate
.box6 span{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
}
方法6：display:inline-block
.box7{
text-align:center;
font-size:0;
}
.box7 span{
vertical-align:middle;
display:inline-block;
font-size:16px;
}
.box7:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
方法7：display:flex和margin:auto
.box8{
display: flex;
text-align: center;
}
.box8 span{
margin: auto;
}
2、左右固定，中間自適應樣式
<style>
.box {
display: flex;
height: 200px;
}
.left {
flex: 0 0 200px;
background-color: pink;
}
.center {
flex: 1;
background-color: yellow;
}
.right {
flex: 0 0 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
3、闡述清楚浮動的幾種方式（常見問題）
1、浮動的產生
float: left/right（設置后產生浮動）
初衷：浮動原先的設計初衷是為了實現文字環繞效果
結果：父元素高度塌陷，理解起來就是元素浮動飄起來了，失去高度，下面的元素會頂上來，就造成了原有的元素背景不見了，margin/padding也不能正常顯示
2、解決浮動的方法
（1）clear: both，在元素最后下加一個元素設置clear：both屬性，缺點是會增加多余無用的html元素
<div class="container">
<div class="left">left浮動</div>
<div class="right">right浮動</div>
<div style="clear:both;"></div>
</div>
（2）使用after偽元素
.box 父元素
.box::after {
content: ' ';
display: block;
clear: both;
}
（3）給父元素設置明確的高度，缺點是並不是所有元素的高度都是固定
（4）給父級元素設置overflow:hidden, 缺點：不能和position配合使用
4、解釋css sprites ，如何使用？
1、什么是精靈圖
將一些小圖標放在一張圖上
2、精靈圖的優點
減少圖片的總大小
減少下載圖片資源請求，減小建立連接的消耗
3、精靈圖的使用方式
.icon1 {
background-image: url(css/img/sidebar.png);
background-repeat: no-repeat;
background-position: 20px 20px;
}
// 第一個數是x軸， 第二個數是y軸
5、box-sizing常用的屬性有哪些？分別有什么作用？
（1）content-box
寬高是元素本身的寬高 不包含border+padding
（2）border-box
元素的寬高已經包含了border+padding
（3）inherit
從父元素繼承box-sizing屬性
6、CSS樣式覆蓋規則
!important > 內聯樣式 > id選擇 > （class選擇 = 偽類選擇） > (標簽選擇 = 偽元素選擇)
7、請簡要描述margin重合問題，及解決方式
問題：相鄰兩個盒子垂直方向上的margin會發生重疊，只會取比較大的margin
解決：（1）設置padding代替margin
（2）設置float
（3）設置overflow
（4）設置position：absolute 絕對定位
（5）設置display： inline-block
8、對標簽有什么理解
1、meta是html文檔頭部的一個標簽，這個標簽對用戶不可見，是給搜索引擎看的。
2、meta標簽屬性用法分成兩大類
3、<meta charset="UTF-8"> 使用的編碼格式，大部分是utf-8
9、display none visibility hidden區別？
10、重繪和回流（哪些情況重繪，哪些回流）
11、說說你對語義化的理解？
12、為什么要初始化css樣式？
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值不同，如果不初始化css，會導致不同瀏覽器頁面間的顯示差異。
13、移動端適配1px問題
* {
margin: 0;
padding: 0;
}
ul, li{
list-style: none;
}
.hairlines {
width: 300px;
margin: 100px auto;
}
.hairlines li{
position: relative;
border:none;
margin-top: 10px;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
background: #cccccc;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
14、居中為什么要使用transform（為什么不使用marginLeft/Top）
transform 屬於合成屬性，不會引起整個頁面的回流重繪，節省性能消耗，但是占用內存會大些
top/left屬於布局屬性，會引起頁面layout回流和repaint重繪。
15、介紹css3中position:sticky
<div class="div1">
元素一
</div>
<div class="div2">
元素二
</div>
.div1 {
width: 100%;
height: 50px;
background-color: yellow;
position: sticky;
top: 0;
}
.div2 {
width: 100%;
height: 1500px;
background-color: pink;
}
設置了sticky的元素，在屏幕范圍（viewport）時該元素的位置並不受到定位影響（設置是top、left等屬性無效），
當該元素的位置將要移出偏移范圍時，定位又會變成fixed，根據設置的left、top等屬性成固定位置的效果。
該元素並不脫離文檔流，仍然保留元素原本在文檔流中的位置。
當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。亦即如果你設置了top: 50px，那么在sticky元素到達距離相對定位的元素頂部50px的位置時固定，不再向上移動。
元素固定的相對偏移是相對於離它最近的具有滾動框的祖先元素，如果祖先元素都不可以滾動，那么是相對於viewport來計算元素的偏移量
16、上下固定，中間滾動布局如何實現
<div class="father">
<div class="top">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
.father {
display: flex;
flex-direction: column;
height: 100vh;
}
.header,
.footer {
width: 100%;
height: 100px;
}
.main {
width: 100%;
flex: 1;
overflow: auto;
}
17、css實現border漸變
從上到下的線性漸變（默認情況下）：background-image: linear-gradient(#e66465, #9198e5);
從左到右的線性漸變：background-image: linear-gradient(to right, red , yellow);
從左上角到右下角的線性漸變：background-image: linear-gradient(to bottom right, red, yellow);
帶有多個顏色節點的從上到下的線性漸變：background-image: linear-gradient(red, yellow, green);
從左到右的線性漸變，帶有透明度：background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
一個重復的線性漸變： background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
顏色節點均勻分布的徑向漸變：background-image: radial-gradient(red, yellow, green);
18、純css實現一個高寬比為1：3的盒子 列舉幾種方式
方法1：使用vh視窗單位；屏幕百分比
方法2：使用padding內邊距顯示內容
<p class="father">
<img src="./p1.png">
</p>
.father {
width: 100px;
height: 0; /* 設置高為0 */
padding-bottom: 50px;
overflow: hidden;
border: 1px solid red;
}
img {
width: 100%;
}
方法3：使用calc計算屬性
div {
width: 100px;
height: calc(100px * 2 / 3); /* 設置高為0,使用padding內邊距顯示內容 */
border: 1px solid red;
}
方法4：使用偽元素::before或者::after，使其變成塊元素,再配合padding或者calc計算寬高比
div::after {
content: "";
display: block;
width: 100px;
/* padding-bottom: 50px; */
height: calc(100px /2);
border: 1px solid red;
}
19、 css實現一個旋轉的圓
transform:rotate(7deg);屬性
20、BFC，IFC，FFC的區別
BFC:塊級格式化上下文
1. 內部的盒子會在垂直方向，一個個地放置；
2. 盒子垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的上下margin會發生重疊；
3. 每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此；
4. BFC的區域不會與float重疊；
5. BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之也如此；
6. 計算BFC的高度時，浮動元素也參與計算。
哪些元素會產生BFC
* 根元素；
* float的屬性不為none；
* position為absolute或fixed；
* display為inline-block，table-cell，table-caption，flex；
* overflow不為visible
IFC:內聯格式上下文
框會從包含塊的頂部開始，一個接一個地水平擺放。
擺放這些框的時候，它們在水平方向上的外邊距、邊框、內邊距所占用的空間都會被考慮在內。在垂直方向上，這些框可能會以不同形式來對齊：它們可能會把底部或頂部對齊，也可能把其內部的文本基線對齊。能把在一行上的框都完全包含進去的一個矩形區域，被稱為該行的行框。水平的margin、padding、border有效，垂直無效。不能指定寬高。
行框的寬度是由包含塊和存在的浮動來決定。行框的高度由行高計算這一章所描述的規則來決定。
GFC（GrideLayout formatting contexts）：網格布局格式化上下文
當為一個元素設置display值為grid的時候，此元素將會獲得一個獨立的渲染區域，我們可以通過在網格容器（grid container）上定義網格定義行（grid definition rows）和網格定義列（grid definition columns）屬性各在網格項目（grid item）上定義網格行（grid row）和網格列（grid columns）為每一個網格項目（grid item）定義位置和空間。那么GFC有什么用呢，和table又有什么區別呢？首先同樣是一個二維的表格，但GridLayout會有更加豐富的屬性來控制行列，控制對齊以及更為精細的渲染語義和控制
FFC（Flex formatting contexts）:自適應格式上下文
display值為flex或者inline-flex的元素將會生成自適應容器（flex container），可惜這個牛逼的屬性只有谷歌和火狐支持，不過在移動端也足夠了，至少safari和chrome還是OK的，畢竟這倆在移動端才是王道。Flex Box 由伸縮容器和伸縮項目組成。通過設置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設置為 flex 的容器被渲染為一個塊級元素，而設置為 inline-flex 的容器則渲染為一個行內元素。伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數量的。伸縮容器外和伸縮項目內的一切元素都不受影響。簡單地說，Flexbox 定義了伸縮容器內伸縮項目該如何布局
21、css3有哪些新特性
CSS3有哪些新特性？
新增選擇器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}
彈性盒模型 display: flex;
多列布局 column-count: 5;
媒體查詢 @media （max-width: 480px） {.box: {column-count: 1;}}
個性化字體 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}
顏色透明度 color: rgba（255, 0, 0, 0.75）；
圓角 border-radius: 5px;
漸變 background:linear-gradient（red, green, blue）；
陰影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；
倒影 box-reflect: below 2px;
文字裝飾 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
邊框效果 border-image:url（bt_blue.png） 0 10;
轉換
旋轉 transform: rotate（20deg）；
傾斜 transform: skew（150deg, -10deg）；
位移 transform:translate（20px, 20px）；
縮放 transform: scale（。5）；
平滑過渡 transition: all .3s ease-in .1s;
動畫 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
22、CSS3新增偽類有那些？
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或復選框被選中。
23、介紹一下標准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
在標准盒模型中，元素寬度 = width + padding + border + margin。
怪異(IE)盒模型中，元素寬度 = width + margin
標准瀏覽器通過設置 css3 的 box-sizing: border-box 屬性，觸發“怪異模式”解析計算寬高
24、display:inline-block 什么時候不會顯示間隙？
原因：
元素被當成行內元素排版的時候，元素之間的空白符（空格、回車換行等）都會被瀏覽器處理，
根據white-space的處理方式（默認是normal，合並多余空白），
原來HTML代碼中的回車換行被轉成一個空白符，在字體不為0的情況下，空白符占據一定寬度，所以inline-block的元素之間就出現了空隙。
這些元素之間的間距會隨着字體的大小而變化，當行內元素font-size:16px時，間距為8px。
解決方案：
* 將子元素放置在同一行
* 為父元素中設置font-size: 0，在子元素上重置正確的font-size
* 為inline-block元素添加樣式float:left
* 設置子元素margin值為負數
* 設置父元素，display:table和word-spacing
25、行內元素float:left后是否變為塊級元素？
行內塊級元素，
設置成這個屬性的元素會同時擁有行內和塊級的特性，最明顯的不同是它的默認寬度不是100%，行內元素默認100%寬度占據一行
這時候給行內元素設置 padding-top 和 padding-bottom 或者 width、height 都是有效果的
26、在網頁中的應該使用奇數還是偶數的字體？為什么呢？
偶數字號相對更容易和 web 設計的其他部分構成比例關系
Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣
27、::before 和 :after中雙冒號和單冒號 有什么區別？解釋一下這2個偽元素的作用
單冒號（：）用於css3的偽類
雙冒號（：：）用於css3的偽元素
想讓插入的內容出現在其它內容前，使用::before，否者，使用::after；
在代碼順序上，::after生成的內容也比::before生成的內容靠后。
如果按堆棧視角，::after生成的內容會在::before生成的內容之上
::before就是以一個子元素的存在，定義在元素主體內容之前的一個偽元素。
並不存在於dom之中，只存在在頁面之中。:before 和 :after 這兩個偽元素，是在CSS2.1里新出現的。
起初，偽元素的前綴使用的是單冒號語法，但隨着Web的進化，在CSS3的規范里，偽元素的語法被修改成使用雙冒號，成為::before ::after
28、如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）
多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。
29、CSS3動畫（簡單動畫的實現，如旋轉等）
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
30、base64的原理及優缺點
優點可以加密，減少了 HTTTP 請求
缺點是需要消耗 CPU 進⾏編解碼
31、流體布局、聖杯布局、雙飛翼布局
流式布局:
* 百分比布局，同時搭配 max-width、min-width使用，解決屏幕差異化
* 缺點：頁面元素寬度是百分比，但是頁面的字體等元素大小是固定的px，導致屏幕如果過大的話，
雖然元素被拉伸邊長了，但是字體沒有變大，導致頁面顯示非常不協調。
聖杯布局： 兩側寬度固定，中間寬度自適應的“三欄布局“
<div id="container">
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
container包裹中，先展示center，再讓left和right的float顯示
雙飛翼布局：兩側寬度固定，中間寬度自適應的“三欄布局”
<div id="container">
<div id="center">center</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
* 和聖杯布局不同的是，container 容器只是包裹 center 元素，且 container 容器進行浮動
* left 和 right 都在 container 容器外部浮動
flex實現 三欄布局：他們其實都是差不多的
32、stylus/sass/less區別
都是CSS 預處理器技術
Less 使用 .less 擴展名
Sass 使用.scss 擴展名
Stylus 支持的語法要更多樣性一點，它默認使用 .styl 的文件擴展名
Sass 同時也支持老的語法，就是不包含花括號和分號的方式, 縮進式寫法：
變量的定義：
Less css中變量都是用@開頭的
sass變量必須是以$開頭的，然后變量和值之間使用冒號（：）隔開，和css屬性是一樣的
stylus對變量是沒有任何設定的，可以是以$開頭，或者任何的字符，而且與變量之間可以用冒號，空格隔開，但是在stylus中不能用@開頭
嵌套：
CSS中相同的 parent 引用多個元素
sass，Less，stylus都支持多層嵌套
運算符：
sass，Less，stylus都支持運算
body {
margin: (14px/2);
top: 50px + 100px;
right: 80 * 10%;
}
顏色函數：
sass的顏色處理函數：
lighten($color, 10%);
darken($color, 10%);
saturate($color, 10%);
$color: #0982C1;
h1 {
background: $color;
border: 3px solid darken($color, 50%);
}
Less css顏色處理函數：
lighten(@color, 10%);
darken(@color, 10%);
saturate(@color, 10%);
@color: #0982C1;
h1 {
background: @color;
border: 3px solid darken(@color, 50%);
}
Stylus顏色處理函數：
lighten(color, 10%);
darken(color, 10%);
saturate(color, 10%);
color = #0982C1
h1
background color
border 3px solid darken(color, 50%)
導入 (Import)，預處理css的導入最后都會生成一個css文件
@ import "1.css";
@ import "file.{type}";
繼承：
sass可通過@extend來實現， Less 表現的稍微弱一些，更像是混入寫法：
sass如下：
.success {
@extend .message;
border-color: green;
}
less如下：
.success {
.message;
border-color: green;
}
Mixins（混入）：：：
Sass 的混入語法：
@mixin error($borderWidth: 2px) {
border: $borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
@ include error(); //這里調用默認 border: 2px solid #F00;
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
@ include error(5px); //這里調用 border:5px solid #F00;
}
Less CSS 的混入語法：
.error(@borderWidth: 2px) {
border: @borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
.error(); //這里調用默認 border: 2px solid #F00;
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
.error(5px); //這里調用 border:5px solid #F00;
}
.Stylus 的混入語法：
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error();
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px);
}
在sass中，還支持條件語句：
$lte7: true;
$type: monster;
.ib{
display:inline-block;
@if $lte7 {
*display:inline;
*zoom:1;
}
}
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
for循環有兩種形式：
1.@for $var from <start> through <end>
2.@for $var from <start> to <end>。
同時支持each命令，作用與for類似：
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
33、postcss的作用
它可以被理解為一個平台，可以讓一些插件在上面跑
它提供了一個解析器，可以將CSS解析成抽象語法樹
通過PostCSS這個平台，我們能夠開發一些插件，來處理CSS。熱門插件如autoprefixer
npm install -g postcss-cli //全局安裝postcss
npm install -g autoprefixer //全局安裝autoprefixer
autoprefixer 插件會幫我們做好兼容處理
34、垂直塌陷及解決方法
.parent {
margin-top: 200px;
width: 200px;
height: 200px;
background: red;
}
.child {
margin-top: 50px;
width: 100px;
height: 100px;
background: black;
}
parant的margintop=200px,正常效果，但是child的margintop=50px卻沒有給到我們預期的效果
border，給parent加上border，就是說child有了頂部的參考了，所以他的margintop就起效
35、粘性定位通常在什么場景下使用，使用方法，使用條件？
* 場景：場景自定義，我通常用在header，很好用
* 使用方法：設置 position:sticky 同時給一個 (top,bottom,right,left) 之一即可
* 使用條件：
1. 父元素不能overflow:hidden或者overflow:auto屬性。
2. 必須指定top、bottom、left、right4個值之一，否則只會處於相對定位
3. 父元素的高度不能低於sticky元素的高度
4. sticky元素僅在其父元素內生效
36、css有哪些內置函數？舉兩個具體用法？
calc()
cubic-bezier()
hsl()
hsla()
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rgb()
rgba()
var()
