面試題：HTML+CSS

YXi發表於2019-12-01
面試題HTMLCSS

持續更新中...

面試傳送門:

關於HTML+CSS不是重點，所以只需簡單的瞭解下就好了，不必深入研究

001.Flex佈局

Flex（Flexible Box）佈局 稱為 "彈性佈局"，可以為網頁的佈局提供最大的靈活性，取代了往常的 浮動（float） 佈局，並且任何一個容器都可以設定 Flex 佈局。
 注：設定 Flex 佈局後，子元素的 Float 佈局將失效
Flex 佈局教程

002.HTML5+CSS3新特性

HTML5

CSS3

003.盒子模型

標準盒子模型、IE盒子模型
CSS 盒子模型

004.如何讓一個div水平居中？

005.如何讓一個div水平垂直居中？

006.如何清除浮動？

通常在公共的css樣式中定義一個清除浮動的類。

.clearfix{
	clear:both;
	content:'';
	display:block;
	width: 0;
	height: 0;
	visibility:hidden;
}
複製程式碼

CSS 浮動(Float) 清除浮動

007.css3實現三欄佈局，左右固定，中間自適應？

聖盃佈局/雙飛翼佈局

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .middle,
        .left,
        .right {
            position: relative;
            float: left;
            min-height: 130px;
        }
        .container {
            padding: 0 220px 0 200px;
            overflow: hidden;
        }
        .left {
            margin-left: -100%;
            left: -200px;
            width: 200px;
            background: red;
        }
        .right {
            margin-left: -220px;
            right: -220px;
            width: 220px;
            background: green;
        }
        .middle {
            width: 100%;
            background: blue;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class='container'>
        <div class='middle'></div>
        <div class='left'></div>
        <div class='right'></div>
    </div>
</body>
複製程式碼

008.CSS中 link 和@import 的區別是什麼？ 

  • link屬於HTML標籤，而@import是CSS提供的頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入
  • import只在IE5以上才能識別，而link是HTML標籤，無相容問題
  • link方式的樣式的權重 高於@import的權重.

009.transition和animation的區別？

Animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值，他們的主要區別是transition需要觸發一個事件才能改變屬性， 而animation不需要觸發任何事件的情況下才會隨時間改變屬性值，並且transition為2幀，從from .... to，而animation可以一幀一幀的。

010.CSS優先順序？

不同級別：總結排序：!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性
	1.屬性後面加!import 會覆蓋頁面內任何位置定義的元素樣式
	2.作為style屬性寫在元素內的樣式
	3.id選擇器
	4.類選擇器
	5.標籤選擇器
	6.萬用字元選擇器（*）
	7.瀏覽器自定義或繼承
**同一級別：後寫的會覆蓋先寫的**
複製程式碼

011.使元素消失的方法?

visibility:hidden、display:none、z-index=-1、opacity：0

1.opacity：0,該元素隱藏起來了，但不會改變頁面佈局，並且，如果該元素已經繫結了一些事件，如click事件也能觸發
2.visibility:hidden,該元素隱藏起來了，但不會改變頁面佈局，但是不會觸發該元素已經繫結的事件
3.display:node, 把元素隱藏起來，並且會改變頁面佈局，可以理解成在頁面中把該元素刪掉

012.為什麼css放在頂部而js寫在後面？

1.瀏覽器預先載入css後，可以不必等待HTML載入完畢就可以渲染頁面了
2.其實HTML渲染並不會等到完全載入完在渲染頁面，而是一邊解析DOM一邊渲染。
3.js寫在尾部，主要是因為js主要扮演事件處理的功能，一方面很多操作是在頁面渲染後才執行的。另一方面可以節省載入時間，使頁面能夠更加的載入，提高使用者的良好體驗

但是隨著JS技術的發展，JS也開始承擔頁面渲染的工作。比如我們的UI其實可以分被對待，把渲染頁面的js放在前面，時間處理的js放在後面

013.理解BFC嗎？

BFC 即 Block Formatting Contexts (塊級格式化上下文)。
具有 BFC 特性的元素可以看作是隔離了的獨立容器，容器裡面的元素不會在佈局上影響到外面的元素，並且 BFC 具有普通容器所沒有的一些特性。
通俗一點來講，可以把 BFC 理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。

理解CSS中的BFC

014.Less、sass等的使用方法

Less和sass等是 CSS 預處理語言，它擴充套件了 CSS 語言，增加了變數、Mixin、函式等特性和巢狀寫法，使 CSS 更易維護和擴充套件。

015.簡單說一下網頁的層疊等級(z-index)？

其實一個網頁是分為好多層的，具體層次和層疊等級如下圖：

圖片載入失敗!

相關文章