面試題整理—CSS部分

琪曉婕發表於2019-02-21

面試題CSS

HTML與css面試題梳理

使用css使元素上下居中的方法

不脫離文件流方式

1.左右居中：加寬度，使用margin：0 auto；

上下居中：子元素的line-height與父元素height相等

2.左右居中：加寬度，使用margin：0 auto；

上下居中：給子元素加margin-bottom（避免使用margin-top，存在margin-top傳遞問題，如果使用，需要給父元素加overflow：hidden）

3.如果子元素內是文字直接使用text-align：center與line-height=height

4.水平居中：子元素margin:0 auto

垂直居中：給父元素加display: table-cell; vertical-align:

脫離文件流方式

5.絕對定位。

父級元素position：relative；子級元素position: absolute; top: 50%; left: 50%; margin-top:-1/2子級高度； margin-left：-1/2子級寬度；

6.絕對定位。

父元素position:relative; 子元素position：absolute； top:50%; left:50%; transform: translate(-50%,-50%);（指定元素在x軸y軸的平移）

7.彈性盒模型。

給父元素加display:flex;justify-content:center(實現水平居中效果),align-items:center(實現垂直居中效果)

css選擇器有哪些？

1.標籤選擇器 div{ }
2.類選擇器 .class{ }
3.ID選擇器 #id{ }
4.萬用字元選擇器 *{ }
5.後代選擇器 ul li { }
6.子代選擇器 ul>li{ }（必須是緊鄰的父子關係）
7.屬性選擇器（不常用） [標籤屬性名]{ }
8.分組選擇器 h1,div,p,a{ }
9.交集選擇器 div.div1{ }
div[title]{ }
10.偽類選擇器：link 預設的狀態
：hover 滑鼠經過的狀態
：active 點選時的狀態
：visited 點選後的狀態
奇偶行奇數：odd li:nth-child(2n+1)
偶數：even li:nth-child(2n)
第一和最後 :last-child :first-child
同型別中第n個兄弟 :nth-of-type(n)

css3新增偽類有哪些？

請給出【Sausage】的字型顏色值

 <ul class='shopping-list' id='shop'> 
   <li><span>Milk</span></li>
   <li class='favorite' id='must-buy'>
   <span class='highlight'>Sausage</span></li>
</ul>
<style>
body{    color:grey;}
#shop .favorite:not(#shop).highlight{    color:red;}
#shop .highlight:nth-of-type(1):nth-last-of-type(1){    color:blue;}
</style>
複製程式碼

為什麼要遵循標籤語義化：

利於SEO優化（也就是搜尋引擎的抓取，搜尋引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重）；在樣式丟失的時候，還是可以比較好的呈現結構；更好的支援各種終端，例如無障礙閱讀和有聲小說等；利於團隊開發和維護，W3C給我們定了一個標準，那麼團隊中都遵循這個標準，那麼程式碼的差異就會縮小，在開發和維護的時候就可以提高效率；日常工作中怎樣遵循標籤語義化：儘量減少使用無意義標籤，例如span和div；儘量不使用標籤本身的css屬性，例如b、font、s等標籤，如果需要這些樣式，那麼使用css樣式來進行新增；在需要強調的部分，使用strong、em，但是樣式儘量使用css樣式來描述；表格搭建時，使用表格頭部表格身體表格尾部；列表搭建時，使用<ul>無序列表</ul> <ol>有序列表</ol> <dl>定義列表 ；

簡述對css盒子模型的理解

盒子模型示意圖

一、簡述

圖中最內部的框是元素的實際內容，也就是元素框，緊挨著元素框外部的是內邊距padding，其次是邊框（border），然後最外層是外邊距（margin），整個構成了框模型。通常我們設定的背景顯示區域，就是內容、內邊距、邊框這一塊範圍。而外邊距margin是透明的，不會遮擋周邊的其他元素。那麼，元素框的總寬度 = 元素（element）的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度；元素框的總高度 = 元素（element）的height + padding的上下邊距的值 + margin的上下邊距的值＋ border的上下寬度。

合併問題

兩個上下方向相鄰的元素框垂直相遇時，

外邊距會合並，合併後的外邊距的高度等於兩個發生合併的外邊距中較高的那個邊距值

說說box-sizing

概念

box-sizing屬性是使用者介面屬性裡的一種，這個屬性跟盒子模型有關，而且在css reset中有可能會用到它。
box-sizing : content-box|border-box|inherit;
(1) content-box ,預設值，可以使設定的寬度和高度值應用到元素的內容框。盒子的width只包含內容
即總寬度=margin+border+padding+width
(2) border-box , 設定的width值其實是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內容即總寬度=margin+width
很多CSS框架，都會對盒子模型的計算方法進行簡化。
(3) inherit , 規定應從父元素繼承 box-sizing 屬性的值

關於border-box的使用：

1 一個box寬度為100%，又想要兩邊有內間距，這時候用就比較好
2 全域性設定 border-box 很好，首先它符合直覺，其次它可以省去一次又一次的加加減減，它還有一個關鍵作用——讓有邊框的盒子正常使用百分比寬度。

如何用css繪製一個實心三角

 .triangle {
	        width : 0;
	        height: 0;
	        border : 100px solid transparent;
	        border-top : 100px solid blue; /*這裡可以設定border的top、bottom、left、right四個方向的三角*/        }
複製程式碼

用css繪製空心三角

思路：繪製一個大的實心黑色三角和一個小的白色實心三角，讓小白三角覆蓋在大的黑三角上即可

用css畫對號

.duihao {position: absolute;
display: none;right:
 .2rem;top: 40%;}


.duihao::before {content: '';
position: absolute;
width: 5px;
height: 15px;
color: #00CC9A;
border-bottom: 2px solid;
border-right: 2px solid;
top: 50%;
transform-origin: center;  
transform: translate(-50%, -30%) rotate(45deg); 
-webkit-transform: translate(-50%, -30%) rotate(45deg);}
複製程式碼

如何用css畫空心圓

    div{
          width:100px;
          height:100px;
          border:2px solid #000;
          border-radius:50%;
  }
複製程式碼

用css畫左右箭頭

 .u-icon-left{position:absolute;
              top:50%;
              right:0px;
              width:8px;
              height:8px;
              margin-top:-2px;
              border-style:solid;
              border-width:0px 0px 2px 2px;
              border-color:#ababab;
              -webkit-transform-origin: 75% 25%; 
              -webkit-transform: rotateZ(45deg);
              -webkit-transition: 100ms ease-in .1s;
              transition: 100ms ease-in .1s;}


.u-icon-arr{position:absolute;
            top:50%;
            right:0px;
            width:8px;
            height:8px;
            margin-top:-2px;
            border-style:solid;
            border-width:2px 2px 0 0;
            border-color:#ababab;
            -webkit-transform-origin: 75% 25%; 
            -webkit-transform: rotateZ(45deg);
            -webkit-transition: 100ms ease-in .1s;
            transition: 100ms ease-in .1s;}
複製程式碼

用css繪製加減號

 .deleteicon{width: 2.13rem;
             height: 2.13rem; 
             background: #fff;
             border-radius: 100%; 
             position: absolute;
             border: 1px solid #cbcbcc;}
.deleteicon:before{position: absolute;
            content:'';
            width:1.6rem ;
            height: .15rem;
            background:#cbcbcc;
            transform:rotate(0deg);
            top:.975rem;
            left: .265rem;}
.addicon{width: 2.13rem;
        height: 2.13rem;
        background: #00cc9a;
        border-radius: 100%; 
        position: absolute;}
.addicon:before{position: absolute;
                content:'';
                width:1.6rem;
                height: 0.15rem;
                background:white;
                transform:rotate(0deg);
                top:.975rem;left: 0.265rem;}

.addicon:after{content:'';
                position: absolute;
                width: 1.6rem;
                height:0.15rem;
                background:white;
                transform:rotate(-90deg);
                top: 0.975rem;
                left: .265rem;}
複製程式碼

用css繪製叉號

.info-close {position: fixed;
            right: calc(50% - 10px);
            width: 30px;
            height: 30px;
            background:#000;
            opacity:.6;
            border-radius: 25px;
            cursor: pointer;
            z-index: 2002;}
.info-close:before {position: absolute;
                    content:'';
                    width: 20px;
                    height: 2px;
                    background: white;
                    transform: rotate(45deg);
                    top: 14px; 
                    left: 5px;}
.info-close:after{content: '';
                  position: absolute;
                  width: 20px;
                  height: 2px;
                  background: white;
                  transform: rotate(-45deg);
                  top: 14px;left: 5px;}
複製程式碼

什麼時候需要清除浮動，清除浮動都有哪些方法？

浮動引起了父級元素高度塌陷。

張鑫旭大神觀點：撇開浮動的“破壞性”，浮動就是個帶有方位的display:inline-block屬性。如果我們給方塊設定display:inline-block也能達到讓它們並排顯示的效果。並且父元素的高度也不會塌陷。只不過無法控制是居左還是居右，display:inline-block只能從左往右。

清除浮動的方法：

1.給父級元素新增高度（不常用）
2.給父級元素新增overflow：hidden 屬性把元素拉回文件流
3.在一組浮動元素的最後一個浮動元素後面加一段程式碼

(不常用)
4.利用偽元素給所有使用浮動的元素加一個clear類名

	     .cklear:after{
	                  display:block;
	                  content:"";
	                  clear:both;}
複製程式碼

讓元素在一行顯示有幾種方式?

1.float：left（或right）

2.display：inline（或inline-block） 3.定位無論是float浮動還是display實現並排顯示，要想並排顯示首先總寬度要小於或等於物件上級寬度，這樣才能並排顯示實現橫向排列排版佈局。

讓元素隱藏有幾種方法，及display:none 和 visibility: hidden區別 ?

這個問題引用了其他大神的文章，原連結不記得了，如需刪掉請告知。 1.display:none
設定元素的display為none是最常用的隱藏元素的方法。將元素設定為display:none後，元素在頁面上將徹底消失，元素本來佔有的空間就會被其他元素佔有，也就是說它會導致瀏覽器的重排和重繪。
2.visibility:hidden
設定元素的visibility為hidden也是一種常用的隱藏元素的方法，和display:none的區別在於，元素在頁面消失後，其佔據的空間依舊會保留著，所以它只會導致瀏覽器重繪而不會重排。 visibility:hidden適用於那些元素隱藏後不希望頁面佈局會發生變化的場景
3.opacity:0
opacity屬性我相信大家都知道表示元素的透明度，而將元素的透明度設定為0後，在我們使用者眼中，元素也是隱藏的，這算是一種隱藏元素的方法。
這種方法和visibility:hidden的一個共同點是元素隱藏後依舊佔據著空間，但我們都知道，設定透明度為0後，元素只是隱身了，它依舊存在頁面中。
4.設定height，width等盒模型屬性及font-size為0
這是我總結的一種比較奇葩的技巧，簡單說就是將元素的margin，border，padding，height和width等影響元素盒模型的屬性設定成0，如果元素內有子元素或內容，還應該設定其overflow:hidden來隱藏其子元素，這算是一種奇技淫巧。這種方式既不實用，也可能存在著著一些問題。但平時我們用到的一些頁面效果可能就是採用這種方式來完成的，比如jquery的slideUp動畫，它就是設定元素的overflow:hidden後，接著通過定時器，不斷地設定元素的height，margin-top，margin-bottom，border-top， border-bottom，padding-top，padding-bottom為0，從而達到slideUp的效果。

H5新增標籤

canvas 新元素

canvas標籤定義圖形，比如圖表和其他影象。該標籤基於 JavaScript 的繪圖 API

新多媒體元素

audio定義音訊內容
video定義視訊（video 或者 movie）
source定義多媒體資源 video和 audio
embed定義嵌入的內容，比如外掛
track為諸如 video 和 audio 元素之類的媒介規定外部文字軌道。

新表單元素

datalist 定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
keygen 規定用於表單的金鑰對生成器欄位。
output 定義不同型別的輸出，比如指令碼的輸出。

新的語義和結構元素

header 定義了文件的頭部區域
footer 定義 section 或 document 的頁尾。
nav 定義導航連結的部分。
section 定義文件中的節（section、區段）。
article 定義頁面獨立的內容區域。
figure 規定獨立的流內容（影象、圖表、照片、程式碼等等）。
figcaption 定義figure元素的標題
aside 定義頁面的側邊欄內容。
time 定義日期或時間。
command 定義命令按鈕，比如單選按鈕、核取方塊或按鈕
details 用於描述文件或文件某個部分的細節
dialog 定義對話方塊，比如提示框
summary 標籤包含 details 元素的標題
mark 定義帶有記號的文字。
meter 定義度量衡。僅用於已知最大和最小值的度量。
progress 定義任何型別的任務的進度。
bdi 允許您設定一段文字，使其脫離其父元素的文字方向設定。
ruby 定義 ruby 註釋（中文注音或字元）。
rt 定義字元（中文注音或字元）的解釋或發音。
rp 在 ruby 註釋中使用，定義不支援 ruby 元素的瀏覽器所顯示的內容。
wbr 規定在文字中的何處適合新增換行符。

css3新增屬性

border-radius 圓角
border-shadow 盒子陰影
background-size 背景尺寸
background-clip 背景裁剪
background-origin 背景顯示原點
text-shadow 文字陰影
text-overflow 文字隱藏的方式裁剪/省略號
box-sizing
transform 變換轉換
animation 動畫
transition 過渡動畫
媒體查詢 @media

px，em，rem的區別？

px畫素（Pixel）。

相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。(引自CSS2.0手冊)
PX特點

IE無法調整那些使用px作為單位的字型大小；
國外的大部分網站能夠調整的原因在於其使用了em或rem作為字型單位；
Firefox能夠調整px和em，rem。

em是相對長度單位。

相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。(引自CSS2.0手冊)
任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。
那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中宣告Font-size=62.5%，
這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em,
也就是說只需要將你的原來的px數值除以10，然後換上em作為單位就行了。

em特點

em的值並不是固定的；

em會繼承父級元素的字型大小。所以我們在寫CSS的時候，需要注意兩點：

body選擇器中宣告Font-size=62.5%；

將你的原來的px數值除以10，然後換上em作為單位；

重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中宣告瞭字型大小為1.2em，那麼在宣告p的字型大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字型高而變為了1em=12px。

rem特點

rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。
這個單位與em的區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是HTML根元素。
這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。
目前，除了IE8及更早版本外，所有瀏覽器均已支援rem。
對於不支援它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的宣告。
這些瀏覽器會忽略用rem設定的字型大小。

display：inline-block什麼時候會出現間隙？及解決辦法。

出現情況

<style>
*{margin:0;padding:0;}
.box{overflow-x:auto;background:#fff;white-space:nowrap;}
.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;}
</style>
</head>
<body>
<div class="box">
	<span>111</span>
	<span>111</span>
	<span>111</span>
	<span>111</span>
</div>
</body>
複製程式碼

換行造成的空白符導致的

解決辦法

方法一：元素之間不換行，程式碼如下：

111111111111

方法二：給其父元素設定font-size:0;給其自身設定實際需要的字號大小。方法三：負margin方法，需要注意的是這個間隙跟字號大小有關係的，所以間隙不是個確定值。

常見的瀏覽器及其核心

我們把瀏覽器中識別程式碼繪製頁面的東西稱為瀏覽器的核心或者渲染引擎。

谷歌 chorme：webkit(v8引擎)國內大部分，安卓和IOS等等火狐 firfow：Gecke 歐朋 Opera：presto 14代改為webkit IE：tirdent 瀏覽器相容： 1.W3C釋出的規範都是開發者們不斷嘗試總結下來的產物 2.每個瀏覽器為了彰顯自己的不一樣，不按照標準來，但是把標準中規定的效果用另外一種方式實現了。（寫同一個效果寫兩套程式碼）

========================================================= 歡迎批評指正！

CSS面試題整理
2019-03-30
CSS面試題
【PHP】面試題整理PHP部分
2017-06-26
PHP面試題
前端面試(css部分)
2019-02-02
前端面試CSS
常見前端面試題整理——HTML、CSS篇
2018-08-10
前端面試題HTMLCSS
面試題整理
2024-03-19
面試題
「面試題」20+Vue面試題整理
2020-06-04
面試題Vue
JavaScript面試題整理
2019-03-30
JavaScript面試題
Laravel 面試題整理
2020-11-23
Laravel面試題
Flume面試題整理
2021-11-14
面試題
近期面試題整理
2018-02-01
面試題
分享JavaScript面試題部分
2020-07-15
JavaScript面試題
JAVA面試題 java部分
2017-08-28
Java面試題
css面試題
2019-07-20
CSS面試題
前端面試之路一(HTML+CSS面試整理)
2018-11-30
前端面試HTMLCSS
[面試題]大廠常見面試題整理
2017-12-27
面試題
【面試】面試常見問題整理
2018-03-13
面試
linux面試題整理
2020-07-26
Linux面試題
Java面試題整理《上》
2018-09-20
Java面試題
前端面試題整理
2021-01-03
前端面試題
Spark面試題整理（三）
2021-10-30
Spark面試題
iOS 面試題整理(一)
2017-12-13
iOS面試題
C++ 面試題整理
2014-03-20
C++面試題
前端面試資料整理【css篇】
2022-04-30
前端面試CSS
面試題總結-Java部分
2019-03-12
面試題Java
JAVA面試題-CORE JAVA部分
2009-12-04
Java面試題
CSS面試題（二）
2020-10-19
CSS面試題
好程式設計師web前端培訓分享HTML/CSS部分面試題
2020-07-15
程式設計師Web前端HTMLCSS面試題
HashMap常見面試題整理
2019-08-03
HashMap面試題
Vue.js 面試題整理
2019-06-28
Vue.js面試題
Vue常見面試題整理
2018-09-20
Vue面試題
整理kafka常見面試題
2020-11-26
Kafka面試題
面試題整理之Vue篇
2021-11-17
面試題Vue
前端面試題整理--http
2020-10-03
前端面試題HTTP
Android面試問題整理
2018-01-23
Android面試
iOS面試題·自整理·Two
2016-06-26
iOS面試題
好程式設計師web前端教程分享HTML/CSS部分常見面試題
2019-10-24
程式設計師Web前端HTMLCSS面試題
面試題總結-Android部分
2019-03-12
面試題Android
前端常見面試題(js部分)
2019-01-31
前端面試題JS