那我們應該如何回答呢?
1. 實現兩欄布局的方法我了解到的有 7 中方式 。
2. 這 7 中方式分別是:
1. 使用 calc() 函數計算 + float
2. 使用 float + overflow: hidden;
3. 使用 flex 彈性布局
4. 使用 絕對定位 absolute
5. 使用表格布局—table
6. 使用 inline-block 和 calc()函數
7. 使用雙 float 浮動實現
3. 這些方法比較常用的是 'flex 彈性布局'、'絕對定位 absolute'、'calc() 函數計算 + float'、'float + overflow: hidden;' 這四種方法, 其余的方法在開發中使用的比較少 。
3.1 先說一下最最常用的 '彈性布局' 實現思路:
1. 首先設置最外層父元素 "display: flex;"
2. 左側設置寬度 width 為固定像素, 例如設置 width: 200px;
3. 右側區域設置 flex: 1;
3.2 再說說 '絕對定位 absolute' 的實現思路:
1. 首先設置外層父元素 "position: relative;"
2. 左側設置寬度 width 為固定像素; 然后再設置定位屬性 "position: absolute;" 、 " left: 0; " 、 "top: 0;"
3. 右側設置 margin-left: 200px;(這里需要注意: margin 的設置需要與左側的寬度設置相同) 。
3.3 'calc() 函數計算 + float' 的實現思路:
1. 首先設置外層父元素 清浮動方法: ':after 偽元素 + zoom:1 方法' (因為使用到了float浮動方法, 清浮動也會成為一個考察的知識點)。
2. 左側設置寬度 width 為固定像素, 例如設置 width: 200px;
3. 右側區域設置 float: right; 寬度 width 設置為: width: calc(100% - 200px);
3.4 'float + overflow: hidden;' 的實現思路:
1. 首先設置外層父元素 清浮動方法: ':after 偽元素 + zoom:1 方法' (因為使用到了float浮動方法, 清浮動也會成為一個考察的知識點)。
2. 左側設置寬度 width 為固定像素例如設置 width: 200px; 同時設置 float: left;
3. 右側區域設置 overflow: hidden;
3.5 'table 表格布局' 的實現思路:
1. 首先設置外層父元素display屬性值為table, 即 display: table;
2. 左側設置 display 屬性值為 table-cell, 即 display: table-cell;同時設置寬度 width 為固定像素例如設置 width: 200px;
3. 右側區域設置 display 屬性值為 table-cell, 即 display: table-cell;就可以 。
3.6 'inline-block 和 calc()函數' 的實現思路:
1. 首先設置外層父元素需要設置 font-size: 0; 是為了清除因子元素設置 display: inline-block 而產生的默認間距 。
2. 左側設置 display 屬性值為 inline-block, 即 display: inline-block; 同時設置寬度 width 為固定像素例如設置 width: 200px;
3. 右側區域設置 display 屬性值為 inline-block, 即 display: inline-block; 同時設置寬度 width 為 width: calc(100% - 200px);
3.7 '雙 float 浮動實現' 的實現思路:
1. 首先設置外層父元素 清浮動方法: ':after 偽元素 + zoom:1 方法' 。
2. 左側設置 float 屬性為 float: left; 同時設置寬度 width 為固定像素, 例如設置 width: 200px;
3. 右側區域設置 float 屬性為 float: right; 同時設置寬度 width 為 width: calc(100% - 200px);
4. 其余的幾種方法在開發中使用幾乎沒有使用, 所以關注比較少, 上面介紹的幾種方法強烈推薦 '彈性布局' , 其次推薦 '絕對定位 absolute' 。這兩個方法對于一些特殊要求它有比較好的效果 。 例如側邊左側需要兩種背景色+高度設置時比較靈活 。
閑談: 面試題目不是每一一個問題都要回答的特別精細, 因為時間有限制, 就比如這道題, 如果回答的特別精細大概要2-3分鐘, 這是基礎問題, 如果這一個問題就占用了你很多的面試時間, 那么你的優勢或者說其它方面面試官就會了解的少了。 這樣會得不償失 。
<!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>實現兩欄布局的方式: 左邊寬度固定右邊寬度自適應</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
/* 方法一: 使用 flex 彈性布局 */
.w_outer {
width: 100%;
/* 知識點: 下面的設置會讓我們的頁面呈現比較好的觀賞效果, 高度與高度百分比設置也會非常靈活 */
min-height: 100vh;
background: rgb(88, 144, 196);
display: flex;
}
.w_son-left {
width: 200px;
background-color: violet;
}
.w_son-left p {
background-color: cyan;
height: 80%;
}
.w_son-right {
flex: 1;
height: 100%;
/* 慎用: 這里設置與否看項目需求, 但是個人開發經驗來說, 這里不設置是做好的,具體效果會有在下面會有對比 */
/* height: 100vh; */
background-color: slategrey;
}
</style>
<body>
<div class="w_outer">
<div class="w_son-left">
<p>左側導航</p>
</div>
<div class="w_son-right">右側內容</div>
</div>
</body>
</html>
如圖所示:
<!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>實現兩欄布局的方式: 左邊寬度固定右邊寬度自適應</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
/* 方法二: 使用絕對定位 absolute */
.w_outer {
position: relative;
background: rgb(88, 144, 196);
/* 知識點: 下面的設置會讓我們的頁面呈現比較好的觀賞效果, 高度與高度百分比設置也會非常靈活 */
min-height: 100vh;
}
.w_son-left {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100%;
/* 慎用: 這里設置與否看項目需求, 但是個人開發經驗來說, 這里不設置是做好的,具體效果會有在下面會有對比 */
/* height: 100vh; */
background-color: tomato;
}
.w_son-left p {
/* 驗證設置子元素高度百分比是否生效 */
height: 20%;
background-color: violet;
}
.w_son-right {
margin-left: 200px;
background: skyblue;
height: 100%;
/* 慎用: 這里設置與否看項目需求, 但是個人開發經驗來說, 這里不設置是做好的,具體效果會有在下面會有對比 */
/* height: 100vh; */
}
</style>
<body>
<div class="w_outer">
<div class="w_son-left">
<p>左側導航</p>
</div>
<div class="w_son-right">右側內容</div>
</div>
</body>
</html>
如圖所示:
<!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>實現兩欄布局的方式: 左邊寬度固定右邊寬度自適應</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
/* 方法三: 使用 float + overflow: hidden; */
.w_outer {
width: 100%;
background: rgb(88, 144, 196);
}
/* 清浮動 */
.w_outer::after {
display:block;
clear:both;
content:"";
/* 這里就起不到上面的兩種方法設置的效果, 所以下面的 height 設置就注釋掉了 */
/* min-height: 100vh; */
}
.w_outer {
zoom:1
}
.w_son-left {
/* height: 100%; */
width: 200px;
background-color: red;
float: left;
}
.w_son-left p {
background-color: burlywood;
/* height: 30%; */
}
.w_son-right {
background-color: yellow;
overflow: hidden;
}
</style>
<body>
<div class="w_outer">
<div class="w_son-left">
<p>左側導航</p>
</div>
<div class="w_son-right">右側內容</div>
</div>
</body>
</html>
如圖所示:
<!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>實現兩欄布局的方式: 左邊寬度固定右邊寬度自適應</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
/* 方法四: 使用 calc() 函數計算 + float */
.w_outer {
width: 100%;
background: rgb(88, 144, 196);
/* 這里就起不到上面的兩種方法設置的效果, 所以下面的 height 設置就注釋掉了 */
/* min-height: 100vh; */
}
/* 清浮動 */
.w_outer::after {
display:block;
clear:both;
content:"";
}
.w_outer {
zoom:1
}
.w_son-left {
width: 200px;
/* height: 80%; */
background-color: tan;
display: inline-block;
}
.w_son-left p {
background-color: coral;
/* height: 20%; */
}
.w_son-right {
float: right;
width: calc(100% - 200px);
background-color: thistle;
}
</style>
<body>
<div class="w_outer">
<div class="w_son-left">
<p>左側導航</p>
</div>
<div class="w_son-right">右側內容</div>
</div>
</body>
</html>
如圖所示:
<!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>實現兩欄布局的方式: 左邊寬度固定右邊寬度自適應</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
/* 方法五: 使用表格布局 table */
.w_outer {
display: table;
width: 100%;
/* 這里就起不到上面的兩種方法設置的效果, 所以下面的 height 設置就注釋掉了 */
/* min-height: 100vh; */
}
.w_son-left {
display: table-cell;
width: 200px;
background-color: rgb(165, 144, 165);
/* height: 80%; */
}
.w_son-left p {
/* 驗證設置子元素高度百分比是否生效 */
/* height: 20%; */
background-color: rgb(182, 122, 182);
}
.w_son-right {
display: table-cell;
background: skyblue;
height: 200px;
}
</style>
<body>
<div class="w_outer">
<div class="w_son-left">
<p>左側導航</p>
</div>
<div class="w_son-right">右側內容</div>
</div>
</body>
</html>
如圖所示:
<!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>實現兩欄布局的方式: 左邊寬度固定右邊寬度自適應</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
/* 方法六: 使用 inline-block 和 calc()函數 */
.w_outer {
overflow: hidden;
width: 100%;
/* 清除因設置 display: inline-block 而產生的默認間距 */
/* 當我們設置了 font-size: 0; 時, 子元素需要設置各自的字號大小 */
font-size: 0;
/* 這里就起不到上面的兩種方法設置的效果, 所以下面的 height 設置就注釋掉了 */
/* min-height: 100%; */
}
.w_son-left {
display: inline-block;
width: 200px;
background: purple;
vertical-align: top;
font-size: 20px;
/* height: 80%; */
}
.w_son-left p {
background-color: rgb(182, 122, 182);
/* height: 20%; */
}
.w_son-right {
display: inline-block;
background: skyblue;
width: calc(100% - 200px);
font-size: 16px;
/* height: 100%; */
}
</style>
<body>
<div class="w_outer">
<div class="w_son-left">
<p>左側導航</p>
</div>
<div class="w_son-right">右側內容</div>
</div>
</body>
</html>
如圖所示:
<!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>實現兩欄布局的方式: 左邊寬度固定右邊寬度自適應</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
/* 方法七: 使用 雙float + calc() 實現 */
.w_outer {
overflow: hidden;
width: 100%;
}
/* 清浮動方法 */
.w_outer::after {
display:block;
clear:both;
content:"";
}
.w_outer {
zoom:1
}
.w_son-left {
float: left;
width: 200px;
background: rgb(116, 89, 116);
vertical-align: top;
}
.w_son-left p {
background-color: rgb(97, 116, 145);
}
.w_son-right {
float: right;
background: skyblue;
width: calc(100% - 200px);
}
</style>
<body>
<div class="w_outer">
<div class="w_son-left">
<p>左側導航</p>
</div>
<div class="w_son-right">右側內容</div>
</div>
</body>
</html>
如圖所示:
之前有整理過部分知識點, 現在將整理的相關內容, 驗證之后慢慢分享給大家; 這個專題是 "前端面試題" 的相關專欄; 大概會有200+的文章。
如果對大家有所幫助,可以點個關注、點個贊; 文章會持續打磨 。
有什么想要了解的前端知識, 可以在評論區留言, 會及時分享所相關內容 。
、 介紹一下標準的CSS的盒子模型?與低版本IE的盒子模型有什么不同的?
標準盒子模型:寬度=內容的寬度(content)+ border + padding + margin
低版本IE盒子模型:寬度=內容寬度(content+border+padding)+ margin
2、 box-sizing屬性?
用來控制元素的盒子模型的解析模式,默認為content-box
context-box:W3C的標準盒子模型,設置元素的 height/width 屬性指的是content部分的高/寬
border-box:IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬
3 、CSS選擇器有哪些?哪些屬性可以繼承?
CSS選擇符:id選擇器(#myid)、類選擇器(.myclassname)、標簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器(ul > li)、后代選擇器(li a)、通配符選擇器(*)、屬性選擇器(a[rel="external"])、偽類選擇器(a:hover, li:nth-child)
可繼承的屬性:font-size, font-family, color
不可繼承的樣式:border, padding, margin, width, height
優先級(就近原則):!important > [ id > class > tag ]
!important 比內聯優先級高
4、 CSS優先級算法如何計算?
元素選擇符: 1
class選擇符: 10
id選擇符:100
元素標簽:1000
5、 CSS3新增偽類有那些?
p:first-of-type 選擇屬于其父元素的首個元素
p:last-of-type 選擇屬于其父元素的最后元素
p:only-of-type 選擇屬于其父元素唯一的元素
p:only-child 選擇屬于其父元素的唯一子元素
p:nth-child(2) 選擇屬于其父元素的第二個子元素
:enabled :disabled 表單控件的禁用狀態。
:checked 單選框或復選框被選中。
6 、如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?
div:
border: 1px solid red;margin: 0 auto; height: 50px;width: 80px;
浮動元素的上下左右居中:
border: 1px solid red;float: left; position: absolute;width: 200px; height: 100px;left: 50%;top: 50%; margin: -50px 0 0 -100px;
絕對定位的左右居中:
border: 1px solid black;position: absolute; width: 200px;height: 100px;margin: 0 auto; left: 0;right: 0;
還有更加優雅的居中方式就是用flexbox,我以后會做整理。
7、 display有哪些值?說明他們的作用?
inline(默認)--內聯
none--隱藏
block--塊顯示
table--表格顯示
list-item--項目列表
inline-block
8、 position的值?
static(默認):按照正常文檔流進行排列;
relative(相對定位):不脫離文檔流,參考自身靜態位置通過 top, bottom, left, right 定位;
absolute(絕對定位):參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位;
fixed(固定定位):所固定的參照對像是可視窗口。
9、 CSS3有哪些新特性?
10、 請解釋一下CSS3的flexbox(彈性盒布局模型),以及適用場景?
該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。在傳統的布局方式中,block 布局是把塊在垂直方向從上到下依次排列的;而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內在的方向限制,可以由開發人員自由操作。
試用場景:彈性布局適合于移動前端開發,在Android和ios上也完美支持。
11、 用純CSS創建一個三角形的原理是什么?
首先,需要把元素的寬度、高度設為0。然后設置邊框樣式。
width: 0;height: 0;border-top: 40px solid transparent; border-left: 40px solid transparent;border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;
12、 一個滿屏品字布局如何設計?
第一種真正的品字:
第二種全屏的品字布局:
上面的div設置成100%,下面的div分別寬50%,然后使用float或者inline使其不換行。
13 、常見的兼容性問題?
{background-color:#f1ee18;/*所有識別*/.background-color:#00deff; /*IE6、7、8識別*/+background-color:#a200ff;/*IE6、7識別*/_background-color:#1e0bd1;/*IE6識別*/}
14、 為什么要初始化CSS樣式
因為瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
15、 absolute的containing block計算方式跟正常流有什么不同?
無論屬于哪種,都要先找到其祖先元素中最近的 position 值不為 static 的元素,然后再判斷:
如果都找不到,則為 initial containing block。
補充:
16、CSS里的visibility屬性有個collapse屬性值?在不同瀏覽器下以后什么區別?
當一個元素的visibility屬性被設置成collapse值后,對于一般的元素,它的表現跟hidden是一樣的。
17、 display:none與visibility:hidden的區別?
display:none 不顯示對應的元素,在文檔布局中不再分配空間(回流+重繪)
visibility:hidden 隱藏對應元素,在文檔布局中仍保留原來的空間(重繪)
18、 position跟display、overflow、float這些特性相互疊加后會怎么樣?
display屬性規定元素應該生成的框的類型;position屬性規定元素的定位類型;float屬性是一種布局方式,定義元素在哪個方向浮動。
類似于優先級機制:position:absolute/fixed優先級最高,有他們在時,float不起作用,display值需要調整。float 或者absolute定位的元素,只能是塊元素或表格。
19 、對BFC規范(塊級格式化上下文:block formatting context)的理解?
BFC規定了內部的Block Box如何布局。
定位方案:
滿足下列條件之一就可觸發BFC
20、 為什么會出現浮動和什么時候需要清除浮動?清除浮動的方式?
浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由于浮動元素不在文檔流中,所以文檔流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊框上。
浮動帶來的問題:
清除浮動的方式:
21、 上下margin重合的問題
在重合元素外包裹一層容器,并觸發該容器生成一個BFC。
例子:
<div class="aside"></div> <div class="text"> <div class="main"></div> </div> <!--下面是css代碼--> .aside { margin-bottom: 100px; width: 100px; height: 150px; background: #f66; } .main { margin-top: 100px; height: 200px; background: #fcc; } .text{ /*盒子main的外面包一個div, 通過改變此div的屬性使兩個盒子分屬于兩個不同的BFC, 以此來阻止margin重疊*/ overflow: hidden; //此時已經觸發了BFC屬性。 }
22、設置元素浮動后,該元素的display值是多少?
自動變成display:block
23、 移動端的布局用過媒體查詢嗎?
通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css,適應相應的設備的顯示。
24 、使用 CSS 預處理器嗎?
Less sass
25、 CSS優化、提高性能的方法有哪些?
26、 瀏覽器是怎樣解析CSS選擇器的?
CSS選擇器的解析是從右向左解析的。若從左向右的匹配,發現不符合規則,需要進行回溯,會損失很多性能。若從右向左匹配,先找到所有的最右節點,對于每一個節點,向上尋找其父節點直到找到根元素或滿足條件的匹配規則,則結束這個分支的遍歷。
兩種匹配規則的性能差別很大,是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點(葉子節點),而從左向右的匹配規則的性能都浪費在了失敗的查找上面。
而在 CSS 解析完畢后,需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render Tree,最終用來進行繪圖。在建立 Render Tree 時(WebKit 中的「Attachment」過程),瀏覽器就要為每個 DOM Tree 中的元素根據 CSS 的解析結果(Style Rules)來確定生成怎樣的 Render Tree。
27 、在網頁中的應該使用奇數還是偶數的字體?為什么呢?
使用偶數字體。偶數字號相對更容易和 web 設計的其他部分構成比例關系。Windows 自帶的點陣宋體(中易宋體)從 Vista 開始只提供 12、14、16 px 這三個大小的點陣,而 13、15、17 px時用的是小一號的點。(即每個字占的空間大了 1 px,但點陣沒變),于是略顯稀疏。
28、 margin和padding分別適合什么場景使用?
何時使用margin:
何時使用padding:
兼容性的問題:在IE5 IE6中,為float的盒子指定margin時,左側的margin可能會變成兩倍的寬度。通過改變padding或者指定盒子的display:inline解決。
29 、元素豎向的百分比設定是相對于容器的高度嗎?
當按百分比設定一個元素的寬度時,它是相對于父容器的寬度計算的,但是,對于一些表示豎向距離的屬性,例如 padding-top , padding-bottom , margin-top , margin-bottom 等,當按百分比設定它們時,依據的也是父容器的寬度,而不是高度。
30 、全屏滾動的原理是什么?用到了CSS的哪些屬性?
31、 什么是響應式設計?響應式設計的基本原理是什么?如何兼容低版本的IE?
響應式網站設計(Responsive Web design)是一個網站能夠兼容多個終端,而不是為每一個終端做一個特定的版本。
基本原理是通過媒體查詢檢測不同的設備屏幕尺寸做處理。
頁面頭部必須有meta聲明的viewport。
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>
32、 視差滾動效果?
視差滾動(Parallax Scrolling)通過在網頁向下滾動的時候,控制背景的移動速度比前景的移動速度慢來創建出令人驚嘆的3D效果。
33、 ::before 和 :after中雙冒號和單冒號有什么區別?解釋一下這2個偽元素的作用
:before 和 :after 這兩個偽元素,是在CSS2.1里新出現的。起初,偽元素的前綴使用的是單冒號語法,但隨著Web的進化,在CSS3的規范里,偽元素的語法被修改成使用雙冒號,成為::before ::after
34、 你對line-height是如何理解的?
行高是指一行文字的高度,具體說是兩行文字間基線的距離。CSS中起高度作用的是height和line-height,沒有定義height屬性,最終其表現作用一定是line-height。
單行文本垂直居中:把line-height值設置為height一樣大小的值可以實現單行文字的垂直居中,其實也可以把height刪除。
多行文本垂直居中:需要設置display屬性為inline-block。
35 、怎么讓Chrome支持小于12px 的文字?
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例
36、 讓頁面里的字體變清晰,變細用CSS怎么做?
-webkit-font-smoothing在window系統下沒有起作用,但是在IOS設備上起作用-webkit-font-smoothing:antialiased是最佳的,灰度平滑。
37、 position:fixed;在android下無效怎么處理?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
38、 如果需要手動寫動畫,你認為最小時間間隔是多久,為什么?
多數顯示器默認頻率是60Hz,即1秒刷新60次,所以理論上最小間隔為1/60*1000ms = 16.7ms。
39、 li與li之間有看不見的空白間隔是什么原因引起的?有什么解決辦法?
行框的排列會受到中間空白(回車空格)等的影響,因為空格也屬于字符,這些空白也會被應用樣式,占據空間,所以會有間隔,把字符大小設為0,就沒有空格了。
解決方法:
40、 display:inline-block 什么時候會顯示間隙?
41、 有一個高度自適應的div,里面有兩個div,一個高度100px,希望另一個填滿剩下的高度
外層div使用position:relative;高度要求自適應的div使用position: absolute; top: 100px; bottom: 0; left: 0
42、 png、jpg、gif 這些圖片格式解釋一下,分別什么時候用。有沒有了解過webp?
43、 style標簽寫在body后與body前有什么區別?
頁面加載自上而下 當然是先加載樣式。
寫在body標簽后由于瀏覽器以逐行方式對HTML文檔進行解析,當解析到寫在尾部的樣式表(外聯或寫在style標簽)會導致瀏覽器停止之前的渲染,等待加載且解析樣式表完成之后重新渲染,在windows的IE下可能會出現FOUC現象(即樣式失效導致的頁面閃爍問題)
44、 CSS屬性overflow屬性定義溢出元素內容區的內容會如何處理?
參數是scroll時候,必會出現滾動條。
參數是auto時候,子元素內容大于父元素時出現滾動條。
參數是visible時候,溢出的內容出現在父元素之外。
參數是hidden時候,溢出隱藏。
45、 闡述一下CSS Sprites
將一個頁面涉及到的所有圖片都包含到一張大圖中去,然后利用CSS的 background-image,background- repeat,background-position 的組合進行背景定位。利用CSS Sprites能很好地減少網頁的http請求,從而大大的提高頁面的性能;CSS Sprites能減少圖片的字節。
、 介紹一下標準的CSS的盒子模型?與低版本IE的盒子模型有什么不同的?
標準盒子模型:寬度=內容的寬度(content)+ border + padding + margin
低版本IE盒子模型:寬度=內容寬度(content+border+padding)+ margin
2、 box-sizing屬性?
用來控制元素的盒子模型的解析模式,默認為content-box
context-box:W3C的標準盒子模型,設置元素的 height/width 屬性指的是content部分的高/寬
border-box:IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬
3 、CSS選擇器有哪些?哪些屬性可以繼承?
CSS選擇符:id選擇器(#myid)、類選擇器(.myclassname)、標簽選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器(ul > li)、后代選擇器(li a)、通配符選擇器(*)、屬性選擇器(a[rel="external"])、偽類選擇器(a:hover, li:nth-child)
可繼承的屬性:font-size, font-family, color
不可繼承的樣式:border, padding, margin, width, height
優先級(就近原則):!important > [ id > class > tag ]
!important 比內聯優先級高
4、 CSS優先級算法如何計算?
元素選擇符: 1
class選擇符: 10
id選擇符:100
元素標簽:1000
5、 CSS3新增偽類有那些?
p:first-of-type 選擇屬于其父元素的首個元素
p:last-of-type 選擇屬于其父元素的最后元素
p:only-of-type 選擇屬于其父元素唯一的元素
p:only-child 選擇屬于其父元素的唯一子元素
p:nth-child(2) 選擇屬于其父元素的第二個子元素
:enabled :disabled 表單控件的禁用狀態。
:checked 單選框或復選框被選中。
6 、如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?
div:
border: 1px solid red;margin: 0 auto; height: 50px;width: 80px;
浮動元素的上下左右居中:
border: 1px solid red;float: left; position: absolute;width: 200px; height: 100px;left: 50%;top: 50%; margin: -50px 0 0 -100px;
絕對定位的左右居中:
border: 1px solid black;position: absolute; width: 200px;height: 100px;margin: 0 auto; left: 0;right: 0;
還有更加優雅的居中方式就是用flexbox,我以后會做整理。
7、 display有哪些值?說明他們的作用?
inline(默認)--內聯
none--隱藏
block--塊顯示
table--表格顯示
list-item--項目列表
inline-block
8、 position的值?
static(默認):按照正常文檔流進行排列;
relative(相對定位):不脫離文檔流,參考自身靜態位置通過 top, bottom, left, right 定位;
absolute(絕對定位):參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位;
fixed(固定定位):所固定的參照對像是可視窗口。
9、 CSS3有哪些新特性?
10、 請解釋一下CSS3的flexbox(彈性盒布局模型),以及適用場景?
該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。在傳統的布局方式中,block 布局是把塊在垂直方向從上到下依次排列的;而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內在的方向限制,可以由開發人員自由操作。
試用場景:彈性布局適合于移動前端開發,在Android和ios上也完美支持。
11、 用純CSS創建一個三角形的原理是什么?
首先,需要把元素的寬度、高度設為0。然后設置邊框樣式。
width: 0;height: 0;border-top: 40px solid transparent; border-left: 40px solid transparent;border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;
12、 一個滿屏品字布局如何設計?
第一種真正的品字:
第二種全屏的品字布局:
上面的div設置成100%,下面的div分別寬50%,然后使用float或者inline使其不換行。
13 、常見的兼容性問題?
{background-color:#f1ee18;/*所有識別*/.background-color:#00deff; /*IE6、7、8識別*/+background-color:#a200ff;/*IE6、7識別*/_background-color:#1e0bd1;/*IE6識別*/}
14、 為什么要初始化CSS樣式
因為瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
15、 absolute的containing block計算方式跟正常流有什么不同?
無論屬于哪種,都要先找到其祖先元素中最近的 position 值不為 static 的元素,然后再判斷:
如果都找不到,則為 initial containing block。
補充:
16、CSS里的visibility屬性有個collapse屬性值?在不同瀏覽器下以后什么區別?
當一個元素的visibility屬性被設置成collapse值后,對于一般的元素,它的表現跟hidden是一樣的。
17、 display:none與visibility:hidden的區別?
display:none 不顯示對應的元素,在文檔布局中不再分配空間(回流+重繪)
visibility:hidden 隱藏對應元素,在文檔布局中仍保留原來的空間(重繪)
18、 position跟display、overflow、float這些特性相互疊加后會怎么樣?
display屬性規定元素應該生成的框的類型;position屬性規定元素的定位類型;float屬性是一種布局方式,定義元素在哪個方向浮動。
類似于優先級機制:position:absolute/fixed優先級最高,有他們在時,float不起作用,display值需要調整。float 或者absolute定位的元素,只能是塊元素或表格。
19 、對BFC規范(塊級格式化上下文:block formatting context)的理解?
BFC規定了內部的Block Box如何布局。
定位方案:
滿足下列條件之一就可觸發BFC
20、 為什么會出現浮動和什么時候需要清除浮動?清除浮動的方式?
浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由于浮動元素不在文檔流中,所以文檔流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊框上。
浮動帶來的問題:
清除浮動的方式:
21、 上下margin重合的問題
在重合元素外包裹一層容器,并觸發該容器生成一個BFC。
例子:
<div class="aside"></div> <div class="text"> <div class="main"></div> </div> <!--下面是css代碼--> .aside { margin-bottom: 100px; width: 100px; height: 150px; background: #f66; } .main { margin-top: 100px; height: 200px; background: #fcc; } .text{ /*盒子main的外面包一個div, 通過改變此div的屬性使兩個盒子分屬于兩個不同的BFC, 以此來阻止margin重疊*/ overflow: hidden; //此時已經觸發了BFC屬性。 }
22、設置元素浮動后,該元素的display值是多少?
自動變成display:block
23、 移動端的布局用過媒體查詢嗎?
通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css,適應相應的設備的顯示。
24 、使用 CSS 預處理器嗎?
Less sass
25、 CSS優化、提高性能的方法有哪些?
26、 瀏覽器是怎樣解析CSS選擇器的?
CSS選擇器的解析是從右向左解析的。若從左向右的匹配,發現不符合規則,需要進行回溯,會損失很多性能。若從右向左匹配,先找到所有的最右節點,對于每一個節點,向上尋找其父節點直到找到根元素或滿足條件的匹配規則,則結束這個分支的遍歷。
兩種匹配規則的性能差別很大,是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點(葉子節點),而從左向右的匹配規則的性能都浪費在了失敗的查找上面。
而在 CSS 解析完畢后,需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render Tree,最終用來進行繪圖。在建立 Render Tree 時(WebKit 中的「Attachment」過程),瀏覽器就要為每個 DOM Tree 中的元素根據 CSS 的解析結果(Style Rules)來確定生成怎樣的 Render Tree。
27 、在網頁中的應該使用奇數還是偶數的字體?為什么呢?
使用偶數字體。偶數字號相對更容易和 web 設計的其他部分構成比例關系。Windows 自帶的點陣宋體(中易宋體)從 Vista 開始只提供 12、14、16 px 這三個大小的點陣,而 13、15、17 px時用的是小一號的點。(即每個字占的空間大了 1 px,但點陣沒變),于是略顯稀疏。
28、 margin和padding分別適合什么場景使用?
何時使用margin:
何時使用padding:
兼容性的問題:在IE5 IE6中,為float的盒子指定margin時,左側的margin可能會變成兩倍的寬度。通過改變padding或者指定盒子的display:inline解決。
29 、元素豎向的百分比設定是相對于容器的高度嗎?
當按百分比設定一個元素的寬度時,它是相對于父容器的寬度計算的,但是,對于一些表示豎向距離的屬性,例如 padding-top , padding-bottom , margin-top , margin-bottom 等,當按百分比設定它們時,依據的也是父容器的寬度,而不是高度。
30 、全屏滾動的原理是什么?用到了CSS的哪些屬性?
31、 什么是響應式設計?響應式設計的基本原理是什么?如何兼容低版本的IE?
響應式網站設計(Responsive Web design)是一個網站能夠兼容多個終端,而不是為每一個終端做一個特定的版本。
基本原理是通過媒體查詢檢測不同的設備屏幕尺寸做處理。
頁面頭部必須有meta聲明的viewport。
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>
32、 視差滾動效果?
視差滾動(Parallax Scrolling)通過在網頁向下滾動的時候,控制背景的移動速度比前景的移動速度慢來創建出令人驚嘆的3D效果。
33、 ::before 和 :after中雙冒號和單冒號有什么區別?解釋一下這2個偽元素的作用
:before 和 :after 這兩個偽元素,是在CSS2.1里新出現的。起初,偽元素的前綴使用的是單冒號語法,但隨著Web的進化,在CSS3的規范里,偽元素的語法被修改成使用雙冒號,成為::before ::after
34、 你對line-height是如何理解的?
行高是指一行文字的高度,具體說是兩行文字間基線的距離。CSS中起高度作用的是height和line-height,沒有定義height屬性,最終其表現作用一定是line-height。
單行文本垂直居中:把line-height值設置為height一樣大小的值可以實現單行文字的垂直居中,其實也可以把height刪除。
多行文本垂直居中:需要設置display屬性為inline-block。
35 、怎么讓Chrome支持小于12px 的文字?
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例
36、 讓頁面里的字體變清晰,變細用CSS怎么做?
-webkit-font-smoothing在window系統下沒有起作用,但是在IOS設備上起作用-webkit-font-smoothing:antialiased是最佳的,灰度平滑。
37、 position:fixed;在android下無效怎么處理?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
38、 如果需要手動寫動畫,你認為最小時間間隔是多久,為什么?
多數顯示器默認頻率是60Hz,即1秒刷新60次,所以理論上最小間隔為1/60*1000ms = 16.7ms。
39、 li與li之間有看不見的空白間隔是什么原因引起的?有什么解決辦法?
行框的排列會受到中間空白(回車空格)等的影響,因為空格也屬于字符,這些空白也會被應用樣式,占據空間,所以會有間隔,把字符大小設為0,就沒有空格了。
解決方法:
40、 display:inline-block 什么時候會顯示間隙?
41、 有一個高度自適應的div,里面有兩個div,一個高度100px,希望另一個填滿剩下的高度
外層div使用position:relative;高度要求自適應的div使用position: absolute; top: 100px; bottom: 0; left: 0
42、 png、jpg、gif 這些圖片格式解釋一下,分別什么時候用。有沒有了解過webp?
43、 style標簽寫在body后與body前有什么區別?
頁面加載自上而下 當然是先加載樣式。
寫在body標簽后由于瀏覽器以逐行方式對HTML文檔進行解析,當解析到寫在尾部的樣式表(外聯或寫在style標簽)會導致瀏覽器停止之前的渲染,等待加載且解析樣式表完成之后重新渲染,在windows的IE下可能會出現FOUC現象(即樣式失效導致的頁面閃爍問題)
44、 CSS屬性overflow屬性定義溢出元素內容區的內容會如何處理?
參數是scroll時候,必會出現滾動條。
參數是auto時候,子元素內容大于父元素時出現滾動條。
參數是visible時候,溢出的內容出現在父元素之外。
參數是hidden時候,溢出隱藏。
45、 闡述一下CSS Sprites
將一個頁面涉及到的所有圖片都包含到一張大圖中去,然后利用CSS的 background-image,background- repeat,background-position 的組合進行背景定位。利用CSS Sprites能很好地減少網頁的http請求,從而大大的提高頁面的性能;CSS Sprites能減少圖片的字節。
推薦閱讀:
CSS 3D 的魅力(二)
詳解 js 閉包(圖文版)
js 中原型和原型鏈深入理解
「JavaScript 教程」數據類型-數組
*請認真填寫需求信息,我們會在24小時內與您取得聯系。