前端面試二（CSS）
1. CSS選擇符有哪些？ 哪些屬性能夠繼承？ 優先級算法如何計算？ 內聯和important哪一個優先？
- 選擇器的分類
- 元素選擇器 a{}
- 僞元素選擇器 ::before{}
- 類選擇器 .link{}
- 屬性選擇器 [type=radio]{}
- 僞類選擇器 :hover{}
- ID選擇器 #id{}
- 組合選擇器 [type=radio]+label{}
- 否認選擇器 :not{.link}
- 通用選擇器 *{}
- 哪些屬性能夠繼承
font-size font-family color 複製代碼 - 優先級算法如何計算?
- ID選擇器 +100
- 類 屬性 僞類 + 10
- 元素 僞元素 +1
- 其餘 +0
- 原則：不進位
- 內聯和important哪一個優先
- !important 優先級最高
- 內聯的第二
- 相同權重後寫的覆蓋前面寫的
2. CSS新增哪些僞類？
- p:last-of-type 選取其父元素中的最後一次出現P元素
p:last-child 選取其父元素中的最後一個元素，這個元素必須是p，否則會爲空css
- p:first-of-type 選取其父元素中的首個出現的P元素
P:first-child 選取其父元素中的第一個元素，這個元素必須是p，否則會爲空 p:only-child 選擇其父級元素中只有一個元素，且這個元素爲phtml
- p:only-of-type 選擇其父級元素中只有一個p元素，其餘元素能夠有。
- p:nth-child(n) 選擇其父級元素中的第N個恰好是p元素
- p:nth-last-child(n) 同上，可是是從後往前計算
- :enabled、:disabled 控制表單控件的禁用狀態
- :checked，單選框或複選框被選中
三、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
- 一、居中塊級元素 如div，首先設置寬度，而後使用margin:0 auto 就居中了
<style> .a{ width:100px; margin:0 auto; background:red; } </style>
<div class="a">123</div>
複製代碼
-
- 居中浮動元素有兩種方式
<!--第一種 在外面加一層div 設置寬度 使用margin:0 auto-->
<div class="content">
<div class="outer">
<div class="left"></div>
</div>
</div>
<style type="text/css"> .content { height: 500px; width: 500px; border: 1px solid red; /*垂直居中*/ display: table-cell; vertical-align: middle; } .outer{ width: 100px; margin:0 auto; } .left { height: 100px; width: 100px; border: 1px dashed blue; float: left; } </style>
<!--第二種-->
<style type="text/css"> .content { height: 500px; width: 500px; border: 1px solid red; /*垂直居中*/ display: table-cell; vertical-align: middle; } .left { height: 100px; width: 100px; border: 1px dashed blue; /*水平居中，但設置浮動後失效 margin: 0 auto;*/ float: left; /*水平居中 相對於父級寬度計算*/ margin-left: 50%; position: relative; left: -50px; } </style>
<div class="content">
<div class="left"></div>
</div>
複製代碼
- 如何讓絕對定位的div居中？
<style type="text/css"> .content { height: 500px; width: 500px; border: 1px solid red; position: relative; } .absolute { background: black; width: 100px; height: 100px; position: absolute; <!--第一種方式 要知道元素的寬高--> <!-- left:50%;--> <!--top: 50%; --> <!--margin-left: -50px;--> <!--margin-top:-50px; --> <!--第二種方式--> <!--transform: translate(-50%, -50%); --> <!--第三種 當上下左右都爲0時， margin: auto使用這個就自動居中了--> <!--position: absolute; left: 0; top: 0; right: 0; bottom: 0;--> <!--margin: auto; --> } </style>
<div class="content">
<div class="absolute"></div>
</div>
第四種方式使用flex佈局
.content {
display: flex;
justify-content:center;
align-items:center;
}
複製代碼
四、爲何圖片下面有空隙，怎麼去除，原理是什麼？
- img是inline-block元素，遵照inline-box的原則，對齊是按照文字的基線對齊，基線離底線會有一段縫隙，縫隙大小大約爲1/4 字體大小。
- 怎麼去除：
- 第一種方式就是改變img的對齊方式 默認是基於基線 改爲 vertical-align:bottom
- 第二種方式就是修改img的display方式，將inline-block改編成 block ，dispaly:block
5. 行高是基於什麼組成的？要設置一段文字在容器中垂直居中怎寫？
- 行高是是有line-box決定的，而line-box是有line-height決定的。
- 父容器不指定高度，設置子容器的lineheight超過字體大小font-size便可垂直居中
<div style="border:solid 1px red;">
<!-- 背景 blue 由字體的大小決定 底線和頂線-->
<!-- line-height的高度大於字體的高度 其他的高度會均勻分佈在兩側 垂直居中 -->
<span style="background:blue;color:#fff;font-size:40px;line-height:60px;">
居中xfmsp
</span>
</div>
複製代碼
6. 用純CSS建立一個三角形的原理是什麼？
- 原理是:均分原理。
<style> .c3{ width:0px; /* height: 200px; */ border-bottom:30px solid red; /* border-right:30px solid blue; */ border-left:30px solid transparent; border-right:30px solid transparent; } </style>
<div class="c3">
</div>
複製代碼
7. 怎麼讓一個很長的文本不換行?
white-space:nowrap;
複製代碼
8. 如何美化checkbox
- 使用label+input
- 隱藏input的原生樣式
- 使用 input:checked+label {}
<style> .checkbox{ } .checkbox input{ display: none; } .checkbox input + label{ background:url(./checkbox1.png) left center no-repeat; background-size:20px 20px; padding-left:20px; } .checkbox input:checked + label{ background-image:url(./checkbox2.png); } </style>
<div class="checkbox">
<input type="checkbox" id="handsome"/>
<label for="handsome">我很帥</label>
</div>
複製代碼
9. position的值relative和absolute定位原點是？
<style> div { background: red; width: 100px; height: 100px; } .p2 { /* 偏移相對於文檔流元素自己 不會由於偏移改變原來的計算 */ position: relative; left: 10px; top: -10px; background: blue; z-index: 2; } .p3 { /* 脫離文檔流 他的位置相對於最近的父級absolute或者relative 若是沒有的話 最終會找到body*/ position: absolute; left: 80px; top: 30px; background: green; /* z-index: 1; */ /* 定位爲absolute relative fixed的定元素能夠設置 z-index */ /* 子集不會被遮罩 */ } .p4 { /* 脫離文檔流 可是位置相對於可視區域*/ position: fixed; left: 0; bottom: 10px; } </style>
<div class="p1">
position:static
文檔流
</div>
<div class="p2">
position:relative
</div>
<div class="p3">
position:absolute
<div class="p3-3" style="position:absolute;width:50px;height:50px;background:yellow"></div>
</div>
<div class="p4">
position:fixed;
</div>
<div class="p5">
p5
</div>
複製代碼
absolute：生成絕對定位的元素，定位原點是離本身這一級元素最近的一級position設置爲absolute或者relative的父元素的左上角爲原點的,若是沒有則爲body。fixed（老IE不支持）：生成絕對定位的元素，相對於瀏覽器窗口進行定位。relative：生成相對定位的元素，定位原點是元素自己所在位置。static：默認值。沒有定位，元素出如今正常的流中（忽略top, bottom, left, right z-index聲明）。inherit：規定從父元素繼承position屬性的值。
10. 爲何要初始化CSS樣式?
由於瀏覽器的兼容的問題，不一樣瀏覽器有些標籤的默認值是不一樣的，若是沒有CSS初始化每每會出現瀏覽器之間的頁面顯示差別。web
11. 使用inline-block以後，li與li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？
- 緣由:瀏覽器的默認行爲是把
inline元素間的空白字符（空格換行tab）渲染成一個空格，也就是咱們上面的代碼<li>換行後會產生換行字符，而它會變成一個空格，固然空格就佔用一個字符的寬度。 - 解決方法：
- 消滅標籤之間的間距
- 將html的字符大小變成0 單獨設置子元素的字符大小
12. 請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？
- flexible（形容詞）：可以伸縮或者很容易變化，以適應外界條件的變化；box（名詞）：通用的矩形容器。
- 旨在經過彈性的方式來對齊和分佈容器中內容的空間，使其能適應不一樣屏幕，爲盒裝模型提供最大的靈活性。
- 適用場景：
- 浮動佈局
- 各類機型屏幕的適配
- 水平和垂直居中
- 自動分配寬度
- ......
1三、一個滿屏 品 字佈局 如何設計?
<!--方案一-->
<style> * {margin: 0;padding: 0;}/* 去除全部元素默認的內外邊距的值 */ html, body {height: 100%;}/* 默認HTML，body的高度爲0，爲其設置高度以使後面的div能夠用百分比設置高度 */ .header {height: 50%;width: 50%;background-color: rgb(255,2545,167);margin: 0 auto;} .main {height: 50%;width: 100%;} .main .left {float: left;width: 50%;height: 100%;background-color: rgb(204,255,102);} .main .right {float: left;width: 50%;height: 100%;background-color: rgb(189,255,255);} </style>
<div class="header"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
<!--方案二-->
<style> * {margin: 0;padding: 0;}/* 去除全部元素默認的內外邊距的值 */ html, body {height: 100%;}/* 默認HTML，body的高度爲0，爲其設置高度以使後面的div能夠用百分比設置高度 */ .pinzi-flex {position: fixed;left: 0;top: 0;height: 100%;width: 100%;} .header {height: 50%;} .header .div-up {width: 50%;height: 100%;background-color: rgb(255,2545,167);margin: 0 auto;} .main {height: 50%;position: relative;} .main .div-left {position: absolute;left: 0; width: 50%;height: 100%;background-color: rgb(204,255,102);} .main .div-right {position: absolute;right: 0; width: 50%;height: 100%;background-color: rgb(189,255,255);} </style>
<div class="pinzi-flex">
<div class="header">
<div class="div-up"></div>
</div>
<div class="main">
<div class="div-left"></div>
<div class="div-right"></div>
</div>
</div>
<!--本身的方案 使用flex-->
<style> * {margin: 0;padding: 0;} html, body {height: 100%;} .box { width: 100%; height: 100%; } .box_up { width: 100%; height: 50%; display: flex; justify-content: center; } .box1 { width: 50%; background:red; } .box_down { width: 100%; height: 50%; display: flex; } .box2 { width: 50%; background:blue; } .box3 { width: 50%; background:green; } </style>
<div class="box">
<div class="box_up">
<div class="box1"></div>
</div>
<div class="box_down">
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
複製代碼
14. 常見兼容性問題？怎麼解決？
- 最主要也是最多見的，就是瀏覽器對標籤的默認支持不一樣，因此咱們要統一，就要進行CSS reset . 最簡單的初始化方法是 *{margin:0; padding:0;} 但不推薦，並且它也並不完善。
- IE6下浮動元素的雙邊距問題,須要給浮動元素的它設置
display: inline。 - chrome下默認會將小於12px的文本強制按照12px來解析。解決辦法是給其添加屬性：
-webkit-text-size-adjust: none;。 - 上下margin重合問題，相鄰的兩個
div margin-left margin-right不會重合，但相鄰的margin-top margin-bottom會重合。
1.外層
padding2.透明邊框border:1px solid transparent;3.絕對定位postion:absolute4.外層DIV overflow:hidden;5.內層DIV 加float:left;display:inline;6.外層DIV有時會用到zoom:1;算法
- 由於存在兩種盒子模式：IE盒子模式和W3C標準模式，因此對象的實際寬度也要注意。
- 鼠標的手勢也有問題：FireFox的
cursor屬性不支持hand，可是支持pointer，IE兩個都支持；因此爲了兼容都用pointer。 - 消除
ul、ol等列表的縮進時，樣式應寫成:list-style:none;margin:0px;padding:0px;其中margin屬性對IE有效，padding屬性對FireFox有效。 - 有些時候圖片下方會出現一條間隙，一般會出如今FF和IE6下面,通常給img添加
vertical-align屬性便可，好比img{verticle-align:center;}。
15. CSS中visibility屬性的collapse屬性值有什麼用？在不一樣瀏覽器下有什麼區別？、
- 對於通常的元素，它的表現跟
display:hidden是同樣的。 - 但例外的是，若是這個元素是
table相關的元素，例如table行，table group，table列，table column group，它的表現卻跟display: none同樣，也就是說，它們佔用的空間也會釋放。 - 在谷歌瀏覽器裏，使用collapse值和使用hidden值沒有什麼區別。
- 在火狐瀏覽器、Opera和IE11裏，使用collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置。
16. 如何適配移動端的適配?
- 首先在
head裏添加viewport --- 視口。 - 使用
em rem vw wh等單位。 - 使用媒體查詢
media query 珊欄佈局等
@media (max-width: 375px){
html{
font-size:24px;
}
}
@media (max-width: 320px){
html{
font-size:20px;
}
}
@media (max-width: 640px){
.intro{
margin:.3rem auto;
display: block;
}
}
複製代碼
- 在設計上,儘可能的隱藏、折行、自適應。
17. 如何修改chrome記住密碼後自動填充表單的黃色背景 ？
- chrome表單自動填充後，input文本框的背景會變成黃色，緣由在於chrome會默認給自動填充的input表單加上input:-webkit-autofill私有屬性，而後對其賦予如下樣式：
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}
複製代碼
- 方法一: 使用足大的內陰影覆蓋原來的顏色
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
border: 1px solid #CCC!important;
}
複製代碼
- 關閉自動填充功能
<!-- 對整個表單設置 -->
<form autocomplete="off" method=".." action="..">
<!-- 或對單一元素設置 -->
<input type="text" name="textboxname" autocomplete="off">
複製代碼
18. 請解釋一下爲何會出現浮動和何時須要清除浮動？清除浮動的方式
-
float脫離了文檔流，可是不脫離文本流chrome - 爲何要清除： 由於子元素爲浮動空間不在父元素的浮動範圍以內（不會佔據父元素的浮動空間），有可能浮動的元素會超出父元素，形成父級高度塌陷，從而對其餘元素形成影響。
- 方法: 父級元素加上
overflow：hidden（auto）, 在父級元素後面加上::after{clear:both,dispaly:block}
19. CSS優化、提升性能的方法有哪些？
- 發佈前壓縮css代碼，減小數據傳輸量
- 合併屬性，好比margin-left margin-top 合併成一條。
- 移除沒必要要的選擇器，儘可能去除屬性選擇器，全局選擇器等。
- 減小低效代碼的使用，如濾鏡，import等
- 對於小圖片可使用base64或者雪碧圖等功能。
20. 全屏滾動的原理是什麼？用到了CSS的那些屬性？
- 原理：方法一是總體的元素一直排列下去，假設有5個須要展現的全屏頁面，那麼高度是500% ，只是展現100%，剩下的能夠經過transform進行y軸定位，也能夠經過margin-top實現。
overflow：hidden;transition：all 1000ms ease;- css滾動原理
21. font-style屬性可讓它賦值爲「oblique」 oblique是什麼意思？
oblique表示傾斜的文字- 對於沒有斜體字的文字使用oblique實現傾斜效果
22. overflow: scroll時不能平滑滾動的問題怎麼處理？
- 主要是出如今iphone的瀏覽器上，如下代碼可解決這種卡頓的問題：
-webkit-overflow-scrolling: touch;，是由於這行代碼啓用了硬件加速特性，因此滑動很流暢。 - 還可使用 插件 iScroll
23. 有一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度。
<style type="text/css"> html, body { height: 100%; padding: 0; margin: 0; } /* margin: 100 100 100 100 上右下左 margin 100 90 100 上100 左右 90 下 100 margin 100 80 上下 100 左右 80 */ /*方案一*/ .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; } .A { height: 100px; margin: -100px 0 0; background: #BBE8F2; } .B { height: 100%; background: #D9C666; } /*方案二*/ /* .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; } .A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; } .B { height: 100%; background: #D9C666; } */ /* 方案三 */ /* .outer { height: 100%; position: relative; } .A { height: 100px; background: #BBE8F2; } .B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; } */ </style>
<div class="outer">
<div class="A"></div>
<div class="B"></div>
</div>
複製代碼
24. 若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）
多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲(1/60)*1000ms ＝ 16.7ms瀏覽器
25. 元素豎向的百分比設定是相對於容器的寬度or高度？
height是基於容器的高度margin-top 、margin-bottom是根據容器的寬度line-height是根據容器的font-size
26. 瀏覽器是怎樣解析CSS選擇器的？
從右至左解析CSS選擇器iphone
27. 怎樣實現3D變換？
- 首先要加上透視角度
perspective:500px; - 而後要開啓3D變換效果
transform-style: preserve-3d; - 最後使用transform 進行3D的組合
transform： translate rotate .......
28.如何產生不佔空間的邊框
- box-shadow
box-shadow: 0 0 0 5px green; box-sizing:border-box這種狀況 容器的寬度包含邊框
29. css動畫的種類
- 補間動畫
trasition:監控的屬性 動畫的時間 動畫的function - 關鍵幀動畫
<style> .container{ width: 100px; height: 100px; background: red; animation: run 1s linear; /* 動畫的方向 */ /* animation-direction: reverse; */ /* 動畫能夠停在結束或者開始的狀態 backward */ /* animation-fill-mode: forwards; */ /* 無限循環 或者指定數字即爲循環的次數 */ /* animation-iteration-count: infinite; */ /* 播放狀態 paused 爲中止動畫 */ /* animation-play-state: paused; */ } @keyframes run{ /* from{width: 100px;} */ 0%{width: 100px;} 50%{width: 800px;} 100%{width: 100px;} /* to{width: 100px;} */ } </style>
<div class="container">
</div>
複製代碼
- 逐幀動畫 去掉關鍵幀的補間 使用
animation-timing-function: steps(1);
<style> .container{ width: 100px; height: 100px; border: 1px solid red; background: url(./animal.png) no-repeat; animation: run 1s infinite; animation-timing-function: steps(1); } @keyframes run{ 0%{background-position: 0 0;} 12.5%{background-position: -100px 0;} 25%{background-position: -200px 0;} 37.5%{background-position: -300px 0;} 50%{background-position: 0 -100px;} 62.5%{background-position: -100px -100px;} 75%{ background-position: -200px -100px;} 87.5%{background-position: -300px -100px;} 100%{background-position: 0 0;} } </style>
<div class="container">
</div>
複製代碼
30. CSS動畫的性能
- 性能不壞。
- 部分狀況因爲js
- 可是js能夠作到更好
- 部分高危屬性 box-shadow等 性能較差
相關文章
- 1. 前端面試（二）— css篇
- 2. 前端面試CSS
- 3. 前端面試題總結（二）CSS篇
- 4. 前端面試——CSS相關
- 5. 前端面試之Css篇
- 6. 前端面試總結（css）
- 7. 前端 CSS 面試大綱
- 8. css前端面試題
- 9. 前端面試——css篇
- 10. 前端面試題 ----css篇
- 更多相關文章...
- • Lua 調試(Debug) - Lua 教程
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • RxJava操作符（二）Transforming Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端面試（二）— css篇
- 2. 前端面試CSS
- 3. 前端面試題總結（二）CSS篇
- 4. 前端面試——CSS相關
- 5. 前端面試之Css篇
- 6. 前端面試總結（css）
- 7. 前端 CSS 面試大綱
- 8. css前端面試題
- 9. 前端面試——css篇
- 10. 前端面試題 ----css篇