(超詳細版)2019北京面試題————CSS

時間 2019-11-29

標籤詳細北京面試 css 欄目快樂工作简体版

原文原文鏈接

一、盒模型

標準盒模型：總寬度：內容 ( content ) + border + padding + margincss

IE盒模型(怪異盒模型)：寬度 = 內容寬度 ( content + border + padding ) + marginhtml

二、彈性盒模型

flex-direction:row   //(默認)主軸爲水平方向,起點在左端。
flex-direction:row-reverse   //主軸爲水平方向,起點在右端
flex-direction:column   //使用後會使主軸變爲y軸
flex-firection:column-reverse   //主軸爲垂直方向,起點在下沿。複製代碼

flex-wrap:nowrap //(默認)不換行
flex-wrap:wrap   //換行,第一行在上方
flex-wrap:wrap-reverse    //換行,第一行在下方複製代碼

flex-flow:該屬性是flex-direction屬性和flex-wrap屬性的簡寫形式。
flex-flow:值1(主軸方向) 值2(是否換行)
flex-flow:row nowrap   //(默認)複製代碼

justify-content:flex-start   //(默認)左對齊
justify-content:flex-end   //右對齊
justify-content:center   //居中(子元素緊湊居中)
justify-content:space-between;   //兩端對齊,項目之間的間隔都相等
justify-content:space-around;   //每一個項目兩側的間隔相等複製代碼

align-items:flex-start    //與交叉軸的起點對其
align-items:flex-end    //與交叉軸的終點即末尾對其
align-items:center    //與交叉軸的中點對其
align-items:baseline    //項⽬的第⼀⾏⽂字的基線對齊
align-items:stretch    //若是項⽬未設置⾼度或設爲auto，將佔滿整個容器的⾼度複製代碼

align-content屬性,緊跟於flex-wrap屬性後,該屬性用於修飾flex-wrap屬性
align-content:flex-start    //與交叉軸的起點對齊
align-content:flex-end    //與交叉軸的終點對其
align-content:center    //與交叉軸的中點對齊
align-content:space-between    //與交叉軸兩端對齊，軸線之間的間隔平均分佈
align-content:space-around    //每根軸線兩側的間隔都相等複製代碼

align-self:center
//容許單個元素與其餘元素有不同的對齊方式
//在彈性子元素上使用。覆蓋容器的 align-items 屬性。複製代碼

order屬性: (自定義子元素的顯示順序) 
//用整數值來定義排列順序，數值小的排在前面。能夠爲負值。
//注: 默認值爲0。父元素必須設置爲彈性盒模型
align-self:flex-start    //默認
align-self:flex-end    //終點複製代碼

flex-grow屬性:(定義彈性盒子元素的擴展比率)
//表示的是當容器有多餘的空間時，這些空間在不一樣條目之間的分配比例
//好比，一個容器中有 3 個條目，其"flex-grow"屬性的值分別爲 1，2 和 3
//那麼當容器中有空白空間時，這 3 個條目所得到的額外空白空間分別佔
//所有空間的 1/六、1/3 和 1/2複製代碼

flex-shrink屬性:(定義彈性盒子元素的收縮比率)
//該屬性的值也是無單位的,表示的是當容器的空間不足各個條目的尺寸縮小的比例。
//例如,在容器中有 3 個條目,其"flex-shrink"屬性的值分別爲 1，2 和 3。
//每一個條目的主軸尺寸均爲 200px。當容器的主軸尺寸不足 600px 時,
//好比變成了 540px 以後則須要縮小的尺寸 60px 由 3 個條目按照比例來分配。
//3 個條目分別要縮小 10px、20px 和 30px,
//主軸尺寸分別變爲 190px、180px 和 170px複製代碼

三、CSS單位

⑴px：絕對單位。頁面按精確像素展現。web

⑵em：相對單位，基準點爲父節點字體的大小，若是自定義了font-size按自身的來算，整個頁面內1em不是一個固定的值。編程

⑶rem：相對單位，相對於根節點html的font-size的大小來計算。瀏覽器

⑷vw：視窗寬度，1vw等於視窗寬度的1%。sass

⑸vh：視窗高度：1vh等於視窗高度的1%。bash

⑹vmin：以寬和高之間最短的一端爲基準，若是寬>高，那麼1vmin至關於寬的1%；框架

⑺vmax：以寬和高之間最長的一端爲基準，若是寬>高，那麼1vmax至關於寬的1%；less

⑻%：百分比。iphone

⑼pt：point，大約1/72寸，一寸=3.3333···釐米。

⑽pc：pica，大約6pt，1/6寸。

⑾ex：取當前做用效果的字體的x的高度，在沒法肯定x高度的狀況下以0.5em計算，IE11如下不支持。

⑿ch：以節點所使用字體中的「0」字符爲基準，找不到時爲0.5em。IE10以上支持。

四、CSS選擇器

!important > 內聯樣式 > id選擇器 > class選擇器 > 屬性選擇器 > 僞類選擇器（: hover） > 標籤選擇器 > 僞元素（: before） > 通配符選擇器

可繼承的屬性：

font-size、font-family、color

不可繼承的屬性：

border、padding、margin、width、height

權重值：

!important權重值：10000，

內聯樣式：1000，

id選擇器：100

class、僞類、屬性、僞元素選擇器：10

標籤選擇器：1

後代選擇器的權重爲包含的選擇符權重值之和。

CSS3新增的僞類：

p：first-of-type：選擇屬於其父元素的首個元素；

p：last-of-type：選擇屬於其父元素的最後元素；

p：only-of-type：選擇屬於其父元素的惟一元素；

p：only-child：選擇屬於其父元素的惟一子元素；

p：nth-child（1）：選擇屬於其父元素的第一個子元素；

：enabled：disabled：表單控件d的禁用狀態；

：checked：單選框h或複選框被選中；

五、BFC

BFC是塊級格式化上下文。BFC它是一個 獨立的渲染區域，只有Block-level box（塊元素）參與，它 規定了內部的Block-level box如何佈局，而且與這個 區域外部絕不相關。

能夠理解成：建立了 BFC的元素就是一個獨立的盒子，裏面的子元素不會在佈局上影響外面的元素（裏面怎麼佈局都不會影響外部），BFC仍屬於文檔中的普通流

特性：

① 內部的塊級元素會在垂直方向上一個接一個的放置；

② 位於同一BFC下的相鄰塊級子元素在垂直方向上會發生margin重疊；

③ 位於不一樣BFC下的相鄰元素之間不會發生margin重疊；

④ BFC能夠包含浮動元素；

⑤ BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素；

建立：

① <html>根元素；

② float的值不爲none

③ overflow的值爲auto、scroll或hidden

④ display的值爲:

table-cell：它會做爲一個表格單元格顯示（相似td和th）。

table-caption：此元素會做爲一個表格標題顯示。

inline-block：行內塊元素。

⑤ position的值爲fixed或absolute

用途：

① 閉合浮動；

② 阻止margin重疊

③ 自適應流體佈局

六、清除浮動的方法

①給設置了浮動的元素的父級加高。

②給設置了浮動的元素的父級設置overflow：hidden。若是須要兼容IE，在添加一個zoom：1

③給須要清除浮動的元素設置clear：both；

④在最後一個子元素的後面加一個空的div，給它樣式屬性 clear:both（不推薦）

⑤僞類清除：.clearfix：after{content：""；clear：both；display：block；}

.clearfix{zoom：1}

<div class="container clearfix">
	<div class="box"></div>
</div>	
<div class="main "></div>

.box{
	width:100px;
	height:100px;
	background:yellow;
	float: left;
}
.main{
	width:150px;
	height: 150px;
	background:red;
}
.clearfix:after{
	content: "";
	clear: both;
	display: block;
}
.clearfix{
	zoom:1;
}
複製代碼

七、層疊上下文

層疊上下文(stacking context)，是HTML中一個三維的概念。在CSS2.1規範中，每一個盒模型的位置是三維的，分別是平面畫布上的 X軸， Y軸以及表示層疊的 Z軸。通常狀況下，元素在頁面上沿 X軸Y軸平鋪，咱們察覺不到它們在 Z軸上的層疊關係。而一旦元素髮生堆疊，這時就能發現某個元素可能覆蓋了另外一個元素或者被另外一個元素覆蓋。

通元素設置position屬性爲非static值並設置z-index屬性爲具體數值，產生層疊上下文。

八、常見頁面佈局

⑴靜態佈局：最傳統、原始的Web佈局設計。網頁最外層容器(outer)有固定的大小,全部的內容以該容器爲標準,超出寬高的部分用滾動條(overflow:scroll)來實現滾動查閱。

優勢：採用的是css2以前的寫法,不存在瀏覽器兼容性。佈局簡單。

缺點：可是移動端不可使用pc端的頁面,兩個頁面的佈局不一致,移動端須要本身另外設計一個佈局並使用不一樣域名呈現。

⑵流式佈局：流式佈局也叫百分比佈局。隨着屏幕的改變，頁面的佈局沒有發生大的變化，能夠進行適配調整，這個正好與自適應佈局相補。

優勢：元素的寬高用百分比作單位，元素寬高按屏幕分辨率調整，佈局不發生變化。

缺點：屏幕尺度跨度過大的狀況下，頁面不能正常顯示。

⑶彈性佈局：彈性佈局是CSS3引入的強大的佈局方式，彈性盒模型：display：flex；

優勢：簡單、方便、快速

缺點：CSS3新特性,瀏覽器兼容性很是頭疼。並且手機瀏覽器對flex的支持也不是很理想。

⑷響應式佈局：採用自適應佈局和流式佈局的綜合方式，爲不一樣屏幕分辨率範圍建立流式佈局。利用媒體查詢能夠檢測到屏幕的尺寸(主要檢測寬度)，並設置不一樣的CSS樣式，就能夠實現響應式的佈局。

九、CSS預處理，後處理

CSS預處理器：用一種編程語言，爲CSS增長了一些編程的特性，最終編譯出css文件。好比sass、less、stylus。

優勢：語言級邏輯處理，動態特性，改善項目結構

缺點：採用特殊語法，框架耦合度高，複雜度高

實現原理：

①取到 DSL 源代碼的分析樹
②將含有動態生成相關節點的分析樹轉換爲靜態分析樹
③將靜態分析樹轉換爲 CSS 的靜態分析樹
④將 CSS 的靜態分析樹轉換爲 CSS 代碼

CSS後處理器：堆css進行處理，並最終生成css的預處理器，屬於廣義上的css預處理器，最典型的就是css壓縮工具(clean-css)，流行的Autoprefixer，以Clean I Use上的瀏覽器支持數據爲基礎，自動處理兼容性問題

優勢：使用 CSS 語法，容易進行模塊化，貼近 CSS 的將來標準

缺點：邏輯處理能力有限

實現原理：

①將源代碼作爲 CSS 解析，得到分析樹
②對 CSS 的分析樹進行後處理
③將 CSS 的分析樹轉換爲 CSS 代碼

十、CSS3的新特性

新增一：rgba（簡單不作解釋）；

新增二：彈性佈局flex（上面第二題）；

新增三：媒體查詢；

新增四：漸變色；

新增五：動畫animation，使用@keyframes定義，使用的元素animation：名字時間；

@keyframes changeWidth{
    0%{width:100px}
    100%{width:800px}
}
div{
    width:100px;
    height:100px;
    background:red;
    animation:changeWidth 10s forwards;
}複製代碼

animation的6個值：

第三個值：

第五個值：

第六個值：

十一、display有哪些值

display：none 此元素不被顯示。
display：block 此元素顯示爲塊級元素，支持寬高，獨佔一行。
display：inline 此元素爲內聯元素，不支持寬高，不獨佔一行。
display：table 此元素做爲塊級表格來顯示。
display：flex 此元素爲彈性盒模型

display：list-item此元素會做爲列表顯示

十二、相鄰的兩個inline-block節點爲何會出現間隔，該如何解決？

元素被當成行內元素排版的時候，原來HTML代碼中的回車換行被轉成一個空白符，在字體不爲0的狀況下，空白符佔據必定寬度，因此inline-block的元素之間就出現了空隙。這些元素之間的間距會隨着字體的大小而變化，當行內元素font-size:16px時，間距爲8px。(不懂不要緊，看下面解決方法就明白了)。

方法一：父級font-size：0；子級設置字體大小；

方法二：改變書寫方式

//原來
<span>1</span>
<span>2</span>
<span>3</span>

//改變
<span>1</span><span>2</span><span>3</span>複製代碼

方法三：margin負值

方法四：設置父元素display：table；word-spacing：0(兩個記得都要加上)；

1三、meta viewport移動端適配

<metaname="viewport" content="width=device-width,initial-scale=1.0">複製代碼

1四、CSS實現寬度自適應100%，寬高16：9的比例的矩形

*{    
   margin:0;    
   padding:0;
}
.wrap{    
    width:20%;
}
.box{    
    kground:pink;
}
.box p{    
    width:100%;    
    height:100%;    
    position: absolute;    
    color:#666;
}複製代碼

<div class="wrap">    <div class="box">        <p>13</p>    </div></div>複製代碼

1六、畫三角形

div{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:50px solid red;
}複製代碼

注：上述三角形爲正三角形，若是想要倒三角形，那麼將border-top的值設爲50px solid red，其他的屬性值相同。

1七、1像素邊框問題

物理像素：移動設備出廠時，不一樣設備自帶的不一樣像素，也稱硬件像素。
邏輯像素：即css中記錄的像素。

爲何會有1像素邊框問題：在開發中，在移動端css裏面寫了1px，實際看起來比1px粗。這就關係到物理像素和邏輯像素的問題了，開發中UI設計師要求的1px是指設備的物理像素1px，而css裏記錄的像素是邏輯像素，它們之間存在一個比例關係，能夠用window.devicePixelRadio來獲取，也能夠用媒體查詢的-webkit-min-device-pixel-ratio來獲取，比例的多少與設備相關。iphone的devicePixelRatio == 2，而咱們設置的border：1px 描述的是設備的獨立像素，因此被放大到物理像素2px顯示，在iphone上就顯的比較粗。

解決方案：

⑴媒體查詢利用設備像素比縮放，設置小數像素。

優勢：簡單，好理解。
缺點：兼容性差目前IOS8+才支持，IOS7如下、安卓系統都顯示0px。

.box{border:1px solid #333}
@media screen and (-webkit-min-device-pixel-ratio:2){
    .box{border:1px solid #333}
}
@media screen and (-webkit-min-device-pixel-radio:3){
    .border{border:0.333333px solid #333}
}複製代碼

⑵設置border-image方案

缺點：須要製做圖片，圓角可能會出現模糊。

.border-image-1px{
    border-width:1px 0px;
    -webkit-border-image:url("border.png")2 0 strech;
    border-image:url("border.png")2 0 stretch;
}複製代碼

border-width：指定邊框的寬度，能夠設定四個值，分別爲上右下左top right bottom left。
border-image：距離圖片上方2px裁剪圖片做爲上邊框，下方2px裁剪做爲下邊框。距離左右0像素裁剪圖片即沒有邊框，以拉伸方式展現。
總結：在邊框圖片中，裁剪圖片上下方的2個像素寬度做爲上下邊框，並展現在寬度爲1個像素的邊框空間裏。左右沒有邊框。

⑶box-shadow方案

優勢是沒有圓角問題。缺點是顏色很差控制。

.box{
    -webkit-box-shadow:0 1px 1px -1px rgba(0,0,0,.5);
}複製代碼

參數：水平陰影位置，垂直陰影位置，模糊距離，陰影尺寸，陰影顏色，將外部陰影改成內部陰影。

⑷transform：scale(0.5)方案（推薦）：

以上的方案，思想其實都是將1px縮小爲0.5px來展現，然而0.5px並非全部的設備或瀏覽器都支持。其實1像素問題的產生基本發生在設置邊框或分割線的時候，場景並不覆蓋全局樣式，所以，直接縮放須要設置的元素，纔是咱們真正需求的。transform就能夠實現。

①設置height：1px，根據媒體查詢結合transform縮放爲相應的尺寸

.box{
    height:1px;
    background:#333;
    -webkit-transform:scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow:hidden;
}複製代碼

②用: :after和: :before，設置border-bottom：1px solid #000；，而後縮放-webkit-transform：scaleY(0.5)；能夠實現兩根邊線的需求；

.box::after{
    content:"";
    width:100%;
    border-bottom:1px solid #000;
    transform:scaleY(0.5);
}複製代碼

③用: :after設置border：1px solid #000；width：200%；height：200%；而後縮放scaleY(0.5)；優勢能夠實現圓角京東就是這麼實現的，缺點是按鈕添加active比較麻煩。

.div::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。