面試題：HTML+CSS

時間 2019-12-02

原文原文鏈接

持續更新中...css

面試傳送門:html

面試題：HTTP

面試重點：webpack

面試題：JS

面試題：Vue

面試問題：接招人事(非技術性問題)

001.Flex佈局

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

002.HTML5+CSS3新特性

HTML5node

CSS3webpack

003.盒子模型

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

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

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

006.如何清除浮動？

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

.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能夠一幀一幀的。sass

010.CSS優先級？

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

011.使元素消失的方法?

visibility:hidden、display:none、z-index=-一、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