1、display:none; 和visibility:hidden;的區別是什么？

display:none; 徹底消失，釋放空間。能引發頁面的reflow回流（重排）。

visibility:hidden; 就是隱藏，但是位置沒釋放，好比opacity:0; 不引發頁面回流。

---

2、CSS 優先級和權重值如何計算

內嵌樣式>內部樣式>外部樣式>導入式

！important > 內嵌 1000 >Id 100 > class=[]=偽類 10 > tag=偽元素 1 > ( * + > ~) 0

---

3、如何觸發BFC，以及BFC的作用

BFC：塊級格式化上下文block formatting context，是一個獨立渲染區域。規定了內部box如何布局，并且與這個區域外部毫不相干。

觸發：float的值不是none；position的值不是static或者relative；display的值是inline-block、block、table-cell、flex、table-caption或者inline-flex；overflow的值不是visible。

作用：避免margin重疊；自適應兩欄布局；清除浮動。

---

4、CSS盒模型

盒模型由：外邊距margin、邊框border、內邊距padding、內容content四個部分組成

標準盒模型大小=border+padding+content

怪異盒模型大小=content

轉怪異盒模型：box-sizing:border-box;

轉標準盒模型：box-sizing:content-box;

---

5、如何水平垂直居中一個元素

5.1、彈性盒子

.box{display: flex;justify-content: center;align-items: center; }

5.2、定位

.box{position: relative; } .box .sub{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);/*margin-left: 負的寬度的一半*//*margin-top: 負的高度的一半*/ }

---

6、css實現一個三角形

.triangle{width: 0;height: 0;border: 100px solid transparent;border-left-color: red; }

---

7、如何實現左邊固定寬，右邊自適應布局

7.1、圣杯布局

<div id="container"><div id="center" class="column"></div><div id="left" class="column"></div><div id="right" class="column"></div> </div> #container {padding-left: 200px; padding-right: 150px; } #container .column {float: left; } #center {width: 100%; } #left {width: 200px; margin-left: -100%;position: relative;right: 200px; } #right {width: 150px; margin-right: -150px; }

7.2、雙飛翼布局

<div id="container" class="column"><div id="center"></div></div><div id="left" class="column"></div><div id="right" class="column"></div>#container {width: 100%;} ? .column {float: left; }#center {margin-left: 200px;margin-right: 150px; }#left {width: 200px; margin-left: -100%; }#right {width: 150px; margin-left: -150px; } ?

7.3、等高布局（假等高）互補的內外邊距

.parent{overflow: hidden; } .left, .right{margin-bottom: -10000px;padding-bottom: 10000px; }

7.4、等高布局（真等高）彈性盒子

.parent{display: flex; } .child{flex: 1; }

7.5、calc

<div id="left" class="column"></div><div id="center" class="column"></div><div id="right" class="column"></div>.column{float: left;}#left{width: 100px;}#right{width: 200px;}#center{width: calc(100% - 100px - 200px);}

7.6、浮動

<div id="left" class="column"></div><div id="right" class="column"></div><div id="center"></div>#left{float: left;width: 100px;}#right{float: right;width: 200px;}#center{margin-left: 100px;margin-right: 200px;}

---

8、如何實現6px字體

.font{font-size: 12px;transform: scale(.5); }

---

9、移動端1px邊框怎么設置

/* 方法1 */ .border{width: 100%;height: 1px;background: red; } /* 方法2 */ .border{border-image: url(border.png) } /* 方法3 */ .border{box-shadow: 0 0 0 1px #000; }

---

10、px、em、rem、vh、vw分別是什么

px物理像素，絕對單位；em相對于自身字體大小，如果自身沒有大小則相對于父級字體大小，如果父級也沒有則一層一層向上查找，直到找到html為止，相對單位；rem相對于html的字體大小，相對單位；vh相對于屏幕高度的大小，相對單位；vw相對于屏幕寬度的大小，相對單位。

---

11、css可繼承的屬性有哪些

可繼承的屬性：文本類：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color；

字體類：font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust；

其它類：visibility、caption-side、border-collapse、border-spacing、empty-cells、table-layout、list-style-type、list-style-image、list-style-position、list-style、quotes、cursor、page、page-break-inside、windows、orphans等

總結

以上是生活随笔為你收集整理的最全面试题CSS(含答案)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。