整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文資料來源于
https://github.com/qiu-deqing/FE-interview
目前已在github獲得4700個star，在前端知識項目中名列第一。
上一篇主要分享了該項目中的HTML， HTTP，web綜合問題部分。
本文主要分享該項目中的CSS部分的知識點及面試題部分，后續分享剩余5個章節。
歡迎關注筆者，優質文章都在這里等你。
概念：將多個小圖片拼接到一個圖片中。通過background-position和元素尺寸調節需要顯示的背景圖案。
優點：
缺點：
聯系：它們都能讓元素不可見
區別：
原理：利用不同瀏覽器對CSS的支持和解析結果不一樣編寫針對特定瀏覽器樣式。常見的hack有1）屬性hack。2）選擇器hack。3）IE條件注釋
<!--[if IE 6]> Special instructions for IE 6 here <![endif]-->
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
specified value,computed value,used value計算方法
link與@import的區別
參考資料： 選擇正確的圖片格式 GIF:
JPEG：
PNG：
CSS有哪些繼承屬性
.target {
min-height: 100px;
height: auto !important;
height: 100px; // IE6下內容高度超過會自動擴展高度
}
<style type="text/css">
.outer {
width: 215px;
height: 100px;
border: 1px solid red;
overflow: auto;
position: relative; /* 修復bug */
}
.inner {
width: 100px;
height: 200px;
background-color: purple;
position: relative;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
<style type="text/css">
.p:hover,
.hover {
background: purple;
}
</style>
<p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p>
<script type="text/javascript">
function addClass(elem, cls) {
if (elem.className) {
elem.className +=' ' + cls;
} else {
elem.className=cls;
}
}
function removeClass(elem, cls) {
var className=' ' + elem.className + ' ';
var reg=new RegExp(' +' + cls + ' +', 'g');
elem.className=className.replace(reg, ' ').replace(/^ +| +$/, '');
}
var target=document.getElementById('target');
if (target.attachEvent) {
target.attachEvent('onmouseenter', function () {
addClass(target, 'hover');
});
target.attachEvent('onmouseleave', function () {
removeClass(target, 'hover');
})
}
</script>
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
display: inline-block; *display: inline; *zoom: 1;
容器包含若干浮動元素時如何清理(包含)浮動
/**
* 在標準瀏覽器下使用
* 1 content內容為空格用于修復opera下文檔中出現
* contenteditable屬性時在清理浮動元素上下的空白
* 2 使用display使用table而不是block：可以防止容器和
* 子元素top-margin折疊,這樣能使清理效果與BFC，IE6/7
* zoom: 1;一致
**/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* IE 6/7下使用
* 通過觸發hasLayout實現包含浮動
**/
.clearfix {
*zoom: 1;
}
Flash Of Unstyled Content：用戶定義樣式表加載之前瀏覽器使用默認樣式顯示文檔，用戶樣式加載渲染之后再從新顯示文檔，造成頁面閃爍。解決方法：把樣式表放到文檔的head
如何創建塊級格式化上下文(block formatting context),BFC有什么用
創建規則：
作用：
外邊距折疊(collapsing margins)
毗鄰的兩個或多個margin會合并成一個margin，叫做外邊距折疊。規則如下：
如何確定一個元素的包含塊(containing block)
z軸上的默認層疊順序如下（從下到上）：
如何創建stacking context：
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
text-align: center; /* 3 */
}
.content {
width: 500px; /* 1 */
text-align: left; /* 3 */
margin: 0 auto; /* 2 */
background: purple;
}
</style>
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
}
.content {
width: 500px; /* 1 */
float: left;
position: relative; /* 2 */
left: 50%; /* 3 */
margin-left: -250px; /* 4 */
background-color: purple;
}
</style>
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
background-color: purple;
}
</style>
<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>
<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
background-color: purple;
}
</style>
如何豎直居中一個元素
參考資料：6 Methods For Vertical Centering With CSS。 盤點8種CSS實現垂直居中
<p class="text">center text</p>
<style>
.text {
line-height: 200px;
}
</style>
對大廠架構設計，BAT等廠家面試題解讀，編程語言理論或者互聯網圈逸聞趣事這些感興趣，歡迎關注筆者，沒有錯，干貨文章都在這里。
篇文章主要給大家介紹一下如何使用html+css實現元素的水平與垂直居中效果，這也是我們網頁在編碼制作中會經常用到的問題。
主要實現css代碼：
水平居中：text-align:center;
垂直居中：line-height:XXpx; /*line-height與元素的height的值一致*/
我們先來看這樣一個例子，加入我們這里有一個div，寬度和高度為300px，背景顏色為黑色，然后在div中有一行簡短文字，我們只需要使用line-height:200px;就可以實現文字的居中效果，具體的代碼如下所示：
由上圖可以看出我們實現了單行文字的垂直居中效果，但是很多時候我們的文字并不知道具體有多少，可能有一行，也可能有很多行，那么遇到多行文字的這種問題我們要如何處理呢。
對于多行文本的垂直居中我們有很多種實現方式，我們這里逐個的來看一下；
1、使用display:table來實現
主要實現代碼：
display: table使塊狀元素成為一個塊級表格;
display: table-cell;子元素設置成表格單元格;
vertical-align: middle;使表格內容居中顯示，即可實現垂直居中的效果;
具體的html與css的代碼就如下所示：
2、使用absolute與transform配合實現
主要實現代碼：
position:absolute; 首先給文本絕對定位；
left:50%;top:50%;transform:translate(-50%,-50%); 讓文本距離盒子左邊和上邊分別為50%，再用transform向左（上）平移它自己寬度（高度）的50%，也就達到居中效果了。
具體的html與css的代碼就如下所示：
3、使用flex實現
主要實現代碼：
display: flex;設置 display 屬性的值為 flex 將其定義為彈性容器
align-items: center;定義項目在交叉軸（縱軸）上如何對齊，垂直對齊居中
justify-content: center; 定義了項目在主軸上的對齊方式，水平對齊居中
具體的html與css的代碼就如下所示：
好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下，有需要源碼的可以直接私信【網站源碼】即可。
每日金句：了解別人心里想什么，你才能得到自己想要的。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
目前大多數人對于CSS的使用只是停留在基本層面，設置位置，寬高，背景色等等。但是CSS還有很多的高級使用技巧，在開發時省去很多時間。
今天我們就一起來看看CSS中的一些高級使用技巧，讓你的頁面更加的炫酷吧。
CSS
如何將一張彩色的圖片在頁面上展示成黑白圖片呢？
我們需要用到一個filter屬性，在webkit中，-webkit-filter專門為元素的渲染提供一些效果，比如灰度，亮度，模糊等。
使用灰度控制grayscale屬性，就可以很容易的將圖片置為黑白色。
我們看到下面一張圖片。
原始圖片
當我們加上以下一段代碼后。
CSS代碼
可以看到圖片如下所示。
處理過的圖片
有的時候我們將網頁的頂部設置為陰影效果，這個是怎么做到的呢？
利用body的偽元素:before，可以減少額外的元素。
在頂部增加一個div，設置一個高度，寬度為100%
將其position設置為fixed，然后設置偏移量為設定的高度值。
設置box-shadow屬性，值等于設定的高度值。
得到的代碼如下所示。
頁面頂部加陰影
運行完上述代碼后，就可以看到整個頁面頂部有陰影的效果。
假如有一個很簡單的頁面，需要所有的元素都垂直居中顯示，實現的方法其實很簡單。
將與align有關的屬性設置為center。
displag設置為flex。
得到的代碼如下所示。
垂直居中的CSS方法
設置以后，我們可以看到不管將窗口設置為多高，所有元素都是垂直居中的狀態。
但是這種方法有個弊端，就是會將所有元素水平排列，垂直居中，頁面元素過多時，頁面會被水平撐開，不太美觀。
因此這種方法建議在頁面元素少的情況下使用。
元素垂直居中
在一個使用ul>li創建的列表中，如果想要選擇其中的幾個元素，我們可以使用nth-child選擇器，例如:nth-child(1)代表第一個元素。
那么假如我們想選擇第一個到第三個元素，使用nth-child該怎么做呢？
很多人第一選擇是:nth-child(1)，:nth-child(2)，:nth-child(3)，然后設置屬性。
其實還有一種更簡單的方法，那就是使用負數選擇器。
:nth-child(-n+3)，就代表選擇從第一個到第三個元素。
我們可以通過以下例子測試，首先在看看頁面的HTML代碼，并將它們的display全部設置為none，這樣就可以將li全部隱藏起來。
HTML代碼
然后通過nth-child選擇器設置css屬性。
nth-child選擇器
最后看看頁面上的內容呈現，可以看出實際選中的li只有前三個，符合預期。
頁面內容
頁面的table元素，如果不對tr>td設置寬度，列td的寬度是會隨著內容的變化而變化，這樣就會造成頁面布局很難看。
我們可以將表格的每列設置成相同的寬度，這樣不管內容怎么變化都不會改變頁面的布局。
只需要使用如下一個屬性即可。
表格列等寬
實際的效果如下圖所示。
表格列等寬
在CSS3中新增了一個calc()方法，用于動態的計算值，不管是數值還是百分比，都可以參與計算。
這個方法非常適用于自適應的容器中，動態計算寬高，間距(margin,padding)，邊框(border)等值，這樣在容器大小變化的時候，不會改變元素之間的布局。
例如以下我們定義的兩個div。
CSS屬性
看到的頁面效果如下圖所示。
calc()效果
假設在頁面上有一個很重要的區域，只是只讀的，不能讓鼠標點擊，可以直接禁用掉鼠標點擊事件。
這個在CSS3中新增了pointer-event屬性，只要將其設置為none即可。
禁用鼠標點擊
有的時候我們可以看到頁面上有一些文字漸變的效果，如下圖所示。
漸變文字
這個效果是怎么實現的呢?
通過設置偽元素，然后在偽元素中使用-webkit-mask-image屬性，這個屬性是專門用來產生遮罩效果的。
然后將遮罩效果的字與原來的文章重合，就可以達到上述效果。
我們設置一個h2標簽，然后設置data-text屬性，date-text屬性值與頁面顯示值一樣。
HTML元素
然后設置對應的CSS屬性。
CSS屬性
當我們在頁面運行后，我們就可以得到上面的文字漸變效果。
和上面的漸變文本類似，模糊文本也有專門的屬性可以設置，那就是text-shadow。
通過下面一段簡單的代碼，就可以得到模糊文本了。
模糊文本樣式
得到的效果如下圖所示。
模糊文本
今天這篇文章主要介紹了CSS中幾個高級的使用技巧，可以讓你在實現相同效果時，減少很多的代碼量，提高工作效率。
大家要好好掌握~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
