一些關於CSS的面試題

本文主要為大家分享一篇關於CSS的面試題，具有很好的參考價值，希望對大家有幫助。一起跟著小編過來看看吧。

1 上下margin重合的問題

#在重合元素外包裹一層容器，並觸發該容器生成一個BFC。
範例：

<p class="aside"></p>
<p class="text">
    <p class="main"></p>
</p>
<!--下面是css代码-->
 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一个p，通过改变此p的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
            overflow: hidden;  //此时已经触发了BFC属性。
        }

專題推薦：2020年CSS面試題總結（最新）

#2設定元素浮動後，該元素的display值為何？

自動變成display:block

#3 行動端的版面有用過媒體查詢嗎？

透過媒體查詢可以為不同大小和尺寸的媒體定義不同的css，適應對應的裝置的顯示。

1. 裡邊

2. CSS : @media only screen and (max-device-width:480px) {/css樣式/}

4 使用CSS 預處理器嗎？

Less sass

#5 CSS優化、提升效能的方法有哪些？

1. 避免過度約束

2. #避免後位選擇符

3. 避免鍊式選擇符

4. #使用緊湊的語法

5. #避免不必要的命名空間

6. #避免不必要的重複

9. #最好使用表示語意的名字。一個好的類別名稱應該是描述他是什麼而不是像什麼

要避免！ important，可以選擇其他選擇器

盡可能的精簡規則，你可以合併不同類別裡的重複規則

6 瀏覽器是怎麼解析CSS選擇器的？

###CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發現不符合規則，需要進行回溯，會損失很多性能。若從右向左匹配，先找到所有的最右節點，對於每一個節點，向上尋找其父節點直到找到根元素或滿足條件的匹配規則，則結束這個分支的遍歷。兩種匹配規則的效能差異很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點），而從左向右的匹配規則的性能都浪費在失敗的查找上面了。 ###而在 CSS 解析完畢後，需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render Tree，最後用來進行繪圖。在建立 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要為每個 DOM Tree 中的元素根據 CSS 的解析結果（Style Rules）來決定產生怎樣的 Render Tree。 ###############7 在網頁中的應該使用奇數還是偶數的字體？為什麼呢？ ##########

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

8 margin和padding分别适合什么场景使用？

何时使用margin：

1. 需要在border外侧添加空白

2. 空白处不需要背景色

3. 上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

1. 需要在border内侧添加空白

2. 空白处需要背景颜色

3. 上下相连的两个盒子的空白，希望为两者之和。

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

9 元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

10 全屏滚动的原理是什么？用到了CSS的哪些属性？

1. 原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现

2. overflow：hidden；transition：all 1000ms ease；

11 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

<
meta 
name
=
"’viewport’"
 
content
=
"”width=device-width,"
 
initial
-
scale
=
"1."
 
maximum
-
scale
=
"1,user-scalable=no
”"
/>

12 视差滚动效果？

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

1. CSS3实现
   优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器

2. jQuery实现
   通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
   优点：能兼容到各个版本的，效果可控性好
   缺点：开发起来对制作者要求高

3. 插件实现方式
   例如：parallax-scrolling，兼容性十分好

13 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

1. 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

2. ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

14 你对line-height是如何理解的？

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。

多行文本垂直居中：需要设置display属性为inline-block。

15 怎么让Chrome支持小于12px 的文字？

p
{
font
-
size
:
10px
;
-
webkit
-
transform
:
scale
(
0.8
);}
 
//0.8是缩放比例

16 让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

17 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"
/>

18 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

19 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：

1. 可以将

2. 代码全部写在一排

3. 浮动li中float：left

4. 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

20 display:inline-block 什么时候会显示间隙？

1. 有空格时候会有间隙 解决：移除空格

2. margin正值的時候解決：margin使用負值

3. #使用font-size時候解決：font- size:0、letter-spacing、word-spacing

21 有一個高度自適應的p，裡面有兩個p，一個高度100px ，希望另一個填滿剩下的高度

外層p使用position：relative；高度要求自適應的p使用position: absolute; top: 100px; bottom: 0; left: 0

22 png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？

1. png是便攜式網路圖片（Portable Network Graphics）是一種無損資料壓縮位圖檔案格式.優點是：壓縮比高，色彩好。 大多數地方都可以用。

2. jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及色彩平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式。

3. gif是一種點陣圖檔案格式，以8位色重現真色彩的影像。可以實現動畫效果.

4. webp格式是Google在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45 %。缺點是壓縮的時間更久了，相容性不好，目前谷歌和opera支援。

23 style標籤寫在body後與body前有什麼差別？

頁面載入自上而下 當然是先載入樣式。
寫在body標籤後由於瀏覽器以逐行方式對HTML文檔進行解析，當解析到寫在尾部的樣式表（外聯或寫在style標籤）會導致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之後重新渲染，在windows的IE下可能會出現FOUC現象（即樣式失效導致的頁面閃爍問題）

#24 CSS屬性overflow屬性定義溢出元素內容區的內容會如何處理?

參數是scroll時候，必會出現捲軸。
參數是auto時候，子元素內容大於父元素時出現捲軸。
參數是visible時候，溢出的內容出現在父元素之外。
參數是hidden時候，溢出隱藏。

25 闡述CSS Sprites

#將一個頁面涉及到的所有圖片都包含到一張大圖中去，然後利用CSS的background-image，background- repeat，background-position 的組合進行背景定位。利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的效能；CSS Sprites能減少圖片的位元組。

相關教學推薦：CSS影片教學

#

以上是一些關於CSS的面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章！