點擊關注本[公眾號](http://www.hmoore.net/book/dsh225/javascript_vue_css/edit#_118)獲取文檔最新更新,并可以領取配套于本指南的《**前端面試手冊**》以及**最標準的簡歷模板**. [TOC] 本章是CSS考點的非重難點，因此我們采用簡略回答的方式進行撰寫，所以不會有太多詳細的解釋。 > 我們約定，每個問題后我們標記『?』的為高頻面試題 ## CSS選擇器的優先級是怎樣的？? CSS選擇器的優先級是：內聯 > ID選擇器 > 類選擇器 > 標簽選擇器 到具體的計算層面，優先級是由 A 、B、C、D 的值來決定的，其中它們的值計算規則如下： * A 的值等于 1 的前提是存在內聯樣式, 否則 A = 0; * B 的值等于 ID選擇器 出現的次數; * C 的值等于 類選擇器 和 屬性選擇器 和 偽類 出現的總次數; * D 的值等于 標簽選擇器 和 偽元素 出現的總次數 。 就比如下面的選擇器，它不存在內聯樣式，所以A=0,不存在id選擇器B=0,存在一個類選擇器C=1,存在三個標簽選擇器D=3，那么最終計算結果為: {0, 0, 1 ,3} ~~~ ul ol li .red { ... } ~~~ 按照這個結算方式，下面的計算結果為: {0, 1, 0, 0} ~~~ #red { } ~~~ 我們的比較優先級的方式是從A到D去比較值的大小，A、B、C、D權重從左到右，依次減小。判斷優先級時，從左到右，一一比較，直到比較出最大值，即可停止。 比如第二個例子的B與第一個例子的B相比，1>0,接下來就不需要比較了，第二個選擇器的優先級更高。 ## link和@import的區別？ * link屬于XHTML標簽，而@import是CSS提供的。 * 頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載。 * import只在IE 5以上才能識別，而link是XHTML標簽，無兼容問題。 * link方式的樣式權重高于@import的權重。 * 使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。 ## 有哪些方式（CSS）可以隱藏頁面元素？ * `opacity:0`：本質上是將元素的透明度將為0，就看起來隱藏了，但是依然占據空間且可以交互 * `visibility:hidden`: 與上一個方法類似的效果，占據空間，但是不可以交互了 * `overflow:hidden`: 這個只隱藏元素溢出的部分，但是占據空間且不可交互 * `display:none`: 這個是徹底隱藏了元素，元素從文檔流中消失，既不占據空間也不交互，也不影響布局 * `z-index:-9999`: 原理是將層級放到底部，這樣就被覆蓋了，看起來隱藏了 * `transform: scale(0,0)`: 平面變換，將元素縮放為0，但是依然占據空間，但不可交互 > 還有一些靠絕對定位把元素移到可視區域外，或者用clip-path進行裁剪的操作過于Hack，就不提了。 ## em\\px\\rem區別？ * px：絕對單位，頁面按精確像素展示。 * em：相對單位，基準點為父節點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。 * rem：相對單位，可理解為”root em”, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持 > 移動端開發使用rem時動態設置html的字體大小 1. 動態設置html的字體大小 移動端開發時習慣使用rem單位，而rem是基于根html的字體大小的，為了適配不同尺寸屏幕需要動態設置html字體的大小。我們一般習慣于設置html的字體大小是基于iPhone6（375px）的100px。100px的取值主要是為了便于后續rem的計算，當然也可以不設置為100px。 1. 使用js設置或使用vw設置 **方法一（js）：** 習慣以iPhone6(375px)為基礎，設置字體為100px，其他尺寸根據比例計算，淘寶使用。 ``` var fontSize = document.documentElement.clientWidth / 3.75; document.doucmentElement.style.fontSize = fontSize + 'px'; ``` **方法二（vw）：** vw把屏幕分成100份，屏幕寬度為100vw，同樣以iPhone6（375px）為例：1vw代表3.75px，表示100px計算可得100 / 3.75 = 26.666667vw，愛奇藝使用。 ``` html{ font-size: 26.666667vw; } ``` 3、設置body字體大小 眾所周知，字體大小是可以被繼承傳遞的，為了避免html的字體大小被繼承傳遞，我們習慣上給body設置自己所需要的字體大小 ``` body{ font-size: 16px; } ``` ## 塊級元素水平居中的方法？ > 如果使用Hack的話，水平居中的方法非常多，我們只介紹主流的，奇葩的見拓展閱讀 `margin:0 auto`方法 ~~~ .center{ height: 200px; width:200px; margin:0 auto; border:1px solid red; } <div class="center">水平居中</div> ~~~ flex布局，目前主流方法 ~~~ .center{ display:flex; justify-content:center; } <div class="center"> <div class="flex-div">1</div> <div class="flex-div">2</div> </div> ~~~ table方法 ~~~ .center{ display:table; margin:0 auto; border:1px solid red; } <div class="center">水平居中</div> ~~~ 還有一些通過position+(margin|transform)等方法的不一樣列舉了，非重點沒必要。 > 拓展閱讀:[16種方法實現水平居中垂直居中](https://louiszhai.github.io/2016/03/12/css-center/) ## CSS有幾種定位方式？ * tatic: 正常文檔流定位，此時 top, right, bottom, left 和 z-index 屬性無效，塊級元素從上往下縱向排布，行級元素從左向右排列。 * relative：相對定位，此時的『相對』是相對于正常文檔流的位置。 * absolute：相對于最近的非 static 定位祖先元素的偏移，來確定元素位置，比如一個絕對定位元素它的父級、和祖父級元素都為relative，它會相對他的父級而產生偏移。 * fixed：指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變，比如那種回到頂部的按鈕一般都是用此定位方式。 * sticky：粘性定位，特性近似于relative和fixed的合體，其在實際應用中的近似效果就是IOS通訊錄滾動的時候的『頂屁股』。 > 文字描述很難理解，可以直接看代碼 > [https://codepen.io/xiaomuzhu/pen/bPVNxj](https://codepen.io/xiaomuzhu/pen/bPVNxj) ## 如何理解z-index？? CSS 中的z-index屬性控制重疊元素的垂直疊加順序，默認元素的z-index為0，我們可以修改z-index來控制元素的圖層位置，而且z-index只能影響設置了position值的元素。 我們可以把視圖上的元素認為是一摞書的層疊，而人眼是俯視的視角，設置z-index的位置，就如同設置某一本書在這摞書中的位置。 * 頂部: 最接近觀察者 * ... * 3 層 * 2 層 * 1 層 * 0 層 默認層 * \-1 層 * \-2 層 * \-3 層 * ... * 底層: 距離觀察者最遠  > 可以結合這個例子理解z-index > [https://codepen.io/xiaomuzhu/pen/xowqjG](https://codepen.io/xiaomuzhu/pen/xowqjG) ## 如何理解層疊上下文？? ### 是什么？ 層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對于面向（電腦屏幕的）視窗或者網頁的用戶的z軸上延伸，HTML元素依據其自身屬性按照優先級順序占用層疊上下文的空間。 ### 如何產生？ 觸發一下條件則會產生層疊上下文： * 根元素 (HTML), * z-index 值不為 "auto"的 絕對/相對定位， * 一個 z-index 值不為 "auto"的 flex 項目 (flex item)，即：父元素 display: flex|inline-flex， * opacity 屬性值小于 1 的元素（參考 the specification for opacity）， * transform 屬性值不為 "none"的元素， * mix-blend-mode 屬性值不為 "normal"的元素， * filter值不為“none”的元素， * perspective值不為“none”的元素， * isolation 屬性被設置為 "isolate"的元素， * position: fixed * 在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值（參考 這篇文章） * \-webkit-overflow-scrolling 屬性被設置 "touch"的元素 > 拓展閱讀：[層疊上下文-張鑫旭](https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/) ## 清除浮動有哪些方法？ * 空div方法：`<div style="clear:both;"></div>` * Clearfix 方法：上文使用.clearfix類已經提到 * overflow: auto或overflow: hidden方法，使用BFC > 在flex已經成為布局主流之后，浮動這種東西越來越少見了，畢竟它的副作用太大 ## 你對css sprites的理解，好處是什么？ ### 是什么 ？ 雪碧圖也叫CSS精靈， 是一CSS圖像合成技術，開發人員往往將小圖標合并在一起之后的圖片稱作雪碧圖。 ### 如何操作？ 使用工具（PS之類的）將多張圖片打包成一張雪碧圖，并為其生成合適的 CSS。 每張圖片都有相應的 CSS 類，該類定義了background-image、background-position和background-size屬性。 使用圖片時，將相應的類添加到你的元素中。 ### 好處： * 減少加載多張圖片的 HTTP 請求數（一張雪碧圖只需要一個請求） * 提前加載資源 ### 不足： * CSS Sprite維護成本較高，如果頁面背景有少許改動，一般就要改這張合并的圖片 * 加載速度優勢在http2開啟后蕩然無存，HTTP2多路復用，多張圖片也可以重復利用一個連接通道搞定 ## 你對媒體查詢的理解？ ### 是什么 媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能的限制了樣式表范圍的表達式組成，例如寬度、高度和顏色。媒體查詢，添加自CSS3，允許內容的呈現針對一個特定范圍的輸出設備而進行裁剪，而不必改變內容本身,非常適合web網頁應對不同型號的設備而做出對應的響應適配。 ### 如何使用？ 媒體查詢包含一個可選的媒體類型和，滿足CSS3規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如果媒體查詢中指定的媒體類型匹配展示文檔所使用的設備類型，并且所有的表達式的值都是true，那么該媒體查詢的結果為true.那么媒體查詢內的樣式將會生效。 ~~~ <!-- link元素中的CSS媒體查詢 --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- 樣式表中的CSS媒體查詢 --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style> ~~~ > 拓展閱讀：[深入理解CSS Media媒體查詢](https://www.cnblogs.com/xiaohuochai/p/5848612.html) ## 你對盒模型的理解? ### 是什么？ 當對一個文檔進行布局（lay out）的時候，瀏覽器的渲染引擎會根據標準之一的 CSS 基礎框盒模型（CSS basic box model），將所有元素表示為一個個矩形的盒子（box）。CSS 決定這些盒子的大小、位置以及屬性（例如顏色、背景、邊框尺寸…）。  盒模型由content（內容）、padding（內邊距）、border（邊框）、margin（外邊距）組成。 ## 標準盒模型和怪異盒模型有什么區別？? 在W3C標準下，我們定義元素的width值即為盒模型中的content的寬度值，height值即為盒模型中的content的高度值。 因此，標準盒模型下： > 元素的寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right  而IE怪異盒模型（IE8以下）width的寬度并不是content的寬度，而是border-left + padding-left + content的寬度值 + padding-right + border-right之和，height同理。 在怪異盒模型下： > 元素占據的寬度 = margin-left + width + margin-right  雖然現代瀏覽器默認使用W3C的標準盒模型，但是在不少情況下怪異盒模型更好用，于是W3C在css3中加入`box-sizing`。 ~~~ box-sizing: content-box // 標準盒模型 box-sizing: border-box // 怪異盒模型 box-sizing: padding-box // 火狐的私有模型，沒人用 ~~~ > 此演示來源于拓展閱讀文章 > 拓展閱讀：[深入理解盒模型](https://www.cnblogs.com/xiaohuochai/p/5202597.html) ## 談談對BFC的理解? ### 是什么？ 書面解釋：BFC(Block Formatting Context)這幾個英文拆解 * Block: Block在這里可以理解為Block-level Box,指的是塊級盒子的標準 * Formatting context：塊級上下文格式化，它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用 BFC是指**一個獨立的渲染區域，只有Block-level Box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干**. 它的作用是在**一塊獨立的區域，讓處于BFC內部的元素與外部的元素互相隔離**. ### 如何形成？ BFC觸發條件: * 根元素，即HTML元素 * position: fixed/absolute * float 不為none * overflow不為visible * display的值為inline-block、table-cell、table-caption ### 作用是什么？ #### 防止margin發生重疊 [https://codepen.io/xiaomuzhu/pen/NZGjYQ](https://codepen.io/xiaomuzhu/pen/NZGjYQ) #### 兩欄布局，防止文字環繞等 [https://codepen.io/xiaomuzhu/pen/XLmRPM](https://codepen.io/xiaomuzhu/pen/XLmRPM) #### 防止元素塌陷 [https://codepen.io/xiaomuzhu/pen/VJvbEd](https://codepen.io/xiaomuzhu/pen/VJvbEd) > 拓展閱讀：[深入理解BFC](https://www.cnblogs.com/xiaohuochai/p/5248536.html) ## 請描述一下BFC、IFC、GFC 和 FFC的區別 在描述他們之間的區別之前，我們首先要了解一下什么是BFC、IFC、GFC、FFC？ > 我們知道元素有內聯元素、塊級元素、行內塊級元素，在頁面上渲染時它們的定位，排列方式等都有所不同，就是因為它們根據內部的格式化上下文進行不同的渲染，即BFC和IFC。后面CSS3新增了grid布局以及flex布局，所以也迎來了GFC、FFC **BFC（Block formatting contexts）：塊級格式上下文** 頁面上的一個隔離的渲染區域，那么他是如何產生的呢？可以觸發BFC的元素有float、position、overflow、display：table-cell/ inline-block/table-caption ；BFC有什么作用呢？比如說實現多欄布局 **IFC（Inline formatting contexts）：內聯格式上下文** IFC的line box（線框）高度由其包含行內元素中最高的實際高度計算而來（不受到豎直方向的padding/margin影響)IFC中的line box一般左右都貼緊整個IFC，但是會因為float元素而擾亂。float元素會位于IFC與與line box之間，使得line box寬度縮短。 同個ifc下的多個line box高度會不同 IFC中時不可能有塊級元素的，當插入塊級元素時（如p中插入div）會產生兩個匿名塊與div分隔開，即產生兩個IFC，每個IFC對外表現為塊級元素，與div垂直排列。 那么IFC一般有什么用呢？ 水平居中：當一個塊要在環境中水平居中時，設置其為inline-block則會在外層產生IFC，通過text-align則可以使其水平居中。 垂直居中：創建一個IFC，用其中一個元素撐開父元素的高度，然后設置其vertical-align:middle，其他行內元素則可以在此父元素下垂直居中 **GFC（GrideLayout formatting contexts）：網格布局格式化上下文** 當為一個元素設置display值為grid的時候，此元素將會獲得一個獨立的渲染區域，我們可以通過在網格容器（grid container）上定義網格定義行（grid definition rows）和網格定義列（grid definition columns）屬性各在網格項目（grid item）上定義網格行（grid row）和網格列（grid columns）為每一個網格項目（grid item）定義位置和空間。那么GFC有什么用呢，和table又有什么區別呢？首先同樣是一個二維的表格，但GridLayout會有更加豐富的屬性來控制行列，控制對齊以及更為精細的渲染語義和控制 **FFC（Flex formatting contexts）:自適應格式上下文** display值為flex或者inline-flex的元素將會生成自適應容器（flex container），可惜這個牛逼的屬性只有谷歌和火狐支持，不過在移動端也足夠了，至少safari和chrome還是OK的，畢竟這倆在移動端才是王道。Flex Box 由伸縮容器和伸縮項目組成。通過設置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設置為 flex 的容器被渲染為一個塊級元素，而設置為 inline-flex 的容器則渲染為一個行內元素。伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數量的。伸縮容器外和伸縮項目內的一切元素都不受影響。簡單地說，Flexbox 定義了伸縮容器內伸縮項目該如何布局 ## 為什么有時候人們用translate來改變位置而不是定位？ translate()是transform的一個值。改變transform或opacity不會觸發瀏覽器重新布局（reflow）或重繪（repaint），只會觸發復合（compositions）。而改變絕對定位會觸發重新布局，進而觸發重繪和復合。transform使瀏覽器為元素創建一個 GPU 圖層，但改變絕對定位會使用到 CPU。 因此translate()更高效，可以縮短平滑動畫的繪制時間。 而translate改變位置時，元素依然會占據其原始空間，絕對定位就不會發生這種情況。 > 拓展閱讀:[CSS3 3D transform變換-張鑫旭](https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/) ## 偽類和偽元素的區別是什么？ ### 是什么？ 偽類（pseudo-class） 是一個以冒號(:)作為前綴，被添加到一個選擇器末尾的關鍵字，當你希望樣式在特定狀態下才被呈現到指定的元素時，你可以往元素的選擇器后面加上對應的偽類。 偽元素用于創建一些不在文檔樹中的元素，并為其添加樣式。比如說，我們可以通過::before來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中。 ### 區別 其實上文已經表達清楚兩者區別了，偽類是通過在元素選擇器上加入偽類改變元素狀態，而偽元素通過對元素的操作進行對元素的改變。 我們通過`p::before`對這段文本添加了額外的元素，通過`p:first-child`改變了文本的樣式。 > 拓展閱讀：[偽類與偽元素](http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/) ## 你對flex的理解？? web應用有不同設備尺寸和分辨率，這時需要響應式界面設計來滿足復雜的布局需求，Flex彈性盒模型的優勢在于開發人員只是聲明布局應該具有的行為，而不需要給出具體的實現方式，瀏覽器負責完成實際布局，當布局涉及到不定寬度，分布對齊的場景時，就要優先考慮彈性盒布局 > 具體用法移步阮一峰的[flex語法](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)、[flex實戰](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)，講得非常通俗易懂，而且我們一兩句話說不清楚。 ### [flex和flex:1的含義](https://www.cnblogs.com/zhus/p/7161702.html) 首先明確一點是，?`flex`?是?`flex-grow`、`flex-shrink`、`flex-basis`的縮寫。 [深入理解css3中的flex-grow、flex-shrink、flex-basis （轉）](https://www.cnblogs.com/ghfjj/p/6529733.html) 總結 通過上面的分析，我們就可以得出這樣幾個結論： 1、剩余空間＝父容器空間－子容器1.flex-basis/width - 子容器2.flex-basis/width - … 2、如果父容器空間不夠，就走壓縮flex-shrink，否則走擴張flex-grow； 3、如果你不希望某個容器在任何時候都不被壓縮，那設置flex-shrink:0； 4、如果子容器的的flex-basis設置為0(width也可以，不過flex-basis更符合語義)，那么計算剩余空間的時候將不會為子容器預留空間。 5、如果子容器的的flex-basis設置為auto(width也可以，不過flex-basis更符合語義)，那么計算剩余空間的時候將會根據子容器內容的多少來預留空間。 ### space-between / align-self  ``` #flex { display: flex; height: 600px; width: 800px; border: 1px solid #dddddd; justify-content: space-between; } #flex>div { width: 200px; height: 200px; } .left { background: blue; align-self: flex-start; } .center { background: green; align-self: center; } .right { background: red; align-self: flex-end; } ``` ### 彈性元素align-content、align-items、align-self的區別 https://blog.csdn.net/freshmen2016/article/details/96108150 ### flex布局[一行三個元素,剩下的元素自動換行,左對齊] ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .father { width: 50%; box-shadow: 0 0 10px rgb(31 55 153 / 10%); background: #FFF; padding: 20px; } ul { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin: 0 -13px; } ul div { box-sizing: border-box; width: 33.33%; padding: 0 13px; margin-bottom: 24px; } ul div li { list-style: none; padding: 10px; border-radius: 4px; border: 1px solid #EBEDF0; } .father .second { height: 100px; background: yellowgreen; } </style> </head> <body> <div class="father"> <ul> <div> <li>1111</li> </div> <div> <li>222</li> </div> <div> <li>333</li> </div> <div> <li>444</li> </div> <div> <li>555</li> </div> </ul> <div class="second">我是第二個子元素</div> </div> </body> </html> ``` ## 關于CSS的動畫與過渡問題 [深入理解CSS動畫animation](https://www.cnblogs.com/xiaohuochai/p/5391663.html) [深入理解CSS過渡transition](https://www.cnblogs.com/xiaohuochai/p/5347930.html) ***** 參考資料： 1. [盒模型](https://segmentfault.com/a/1190000014801021) ***** ## 禁止用戶選中 ~~~ .unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; /* Introduced in IE 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */ -ms-user-select: none; user-select: none; } ~~~ ## 移動端常見小問題 ### 1、滾動卡頓 ~~~ //css設置： overflow:scroll; -webkit-overflow-scrolling: touch; ~~~ ### 2、onclick事件背后有黑色背景 ~~~ //css設置： -webkit-tap-highlight-color: transparent; ~~~ ## CSS3實現0.5px的邊框 **方法一：利用漸變** 關于漸變可以看下面兩篇文章做深入了解： [CSS3?漸變（Gradients）](http://www.runoob.com/css3/css3-gradients.html "CSS3 漸變（Gradients）") [深入理解CSS3 gradient斜向線性漸變](http://www.zhangxinxu.com/wordpress/2013/09/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3css3-gradient%E6%96%9C%E5%90%91%E7%BA%BF%E6%80%A7%E6%B8%90%E5%8F%98/ "深入理解CSS3 gradient斜向線性漸變") 實現原理： 把元素的偽類高度設為1px,背景漸變，一半有顏色，一半透明。 線上案例：[百度糯米](https://m.nuomi.com/ "百度糯米")（沒有改版的話） 代碼如下： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>邊框0.5px實現方法</title> <style type="text/css"> .container{ width: 500px; margin: 0px auto; } .border-gradient{ position:relative; padding: 10px; } .border-gradient:after { content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-image: linear-gradient(0deg, #f00 50%, transparent 50%); } </style> </head> <body> <div class="container"> <h3>方案一：漸變</h3> <div class="border-gradient"> 原理：高度1px,背景漸變，一半有顏色，一半透明。 </div> </div> </body> </html> ``` **方法二：利用縮放** 原理：transform:scale()來達到壓縮一半的目的。 線上案例：[京東](https://m.jd.com/ "京東") 代碼如下： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>邊框0.5px實現方法</title> <style type="text/css"> .container{ width: 500px; margin: 0px auto; } .border-scale{ position:relative; padding: 10px; } .border-scale:after{ content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #f00; /* 如果不用 background-color, 使用 border-top:1px solid #f00; 效果是一樣的*/ -webkit-transform: scaleY(.5); transform:scaleY(.5); } </style> </head> <body> <div class="container"> <h3>方案二：使用縮放</h3> <div class="border-scale"> 原理： 在Y軸方向上，壓縮一半。 </div> </div> </body> </html> ``` **拓展：4條邊框都需要** 原理：也是利用transform:scale()，只不過這次縮放的是整個內容。 代碼如下： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>邊框0.5px實現方法</title> <style type="text/css"> .container{ width: 500px; margin: 0px auto; } 　　　　.border-all{ position:relative; padding: 10px; } .border-all:after{ content: " "; position: absolute; left: 0; top: 0; z-index:-1; width: 200%; height:200%; border:1px solid #f00; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(.5, .5); transform: scale(.5, .5); border-radius: 10px; } </style> </head> <body> <div class="container"> <h3>拓展：四周全是0.5px的線條的話</h3> <div class="border-all"> 這是實現一個盒子四周0.5px的做法， 如果加入border-radius圓角效果，會發現，有些手機會有圓角發虛的情況，不過影響不是很大。如果有兩個盒子，上面一個盒子沒有邊框效果，下面盒子有邊框效果，兩個盒子一樣寬，上下在一起的布局方式，你會發現，在手機上有時候會對不齊… 錯開了0.5px，原因已經很明了了…還有那個z-index ，可以根據不同需求來調整使用，如果可以的話，不使用也是可以的。 </div> </div> </body> </html> ``` ### 實心箭頭上下左右 ``` 實心箭頭上下左右都有哦 /\* 向上的箭頭 \*/ .arrow-top { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #217AFF; font-size: 0; line-height: 0; } /\* 向右的箭頭 \*/ .arrow-right { width: 0; height: 0; border-right: 10px solid #217AFF; border-top: 10px solid transparent; border-bottom: 10px solid transparent; font-size: 0; line-height: 0; } /\* 向下的箭頭 \*/ .arrow-bottom { width: 0; height: 0; border-left: 10px solid transparent; /\* 左邊框的寬 \*/ border-right: 10px solid transparent; /\* 右邊框的寬 \*/ border-top: 10px solid #217AFF; /\* 下邊框的長度|高,以及背景色 \*/ font-size: 0; line-height: 0; } /\* 向左的箭頭 \*/ .arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-right: 10px solid #217AFF; border-bottom: 10px solid transparent; font-size: 0; line-height: 0; } ``` ## 公眾號 想要實時關注筆者最新的文章和最新的文檔更新請關注公眾號**程序員面試官**,后續的文章會優先在公眾號更新. **簡歷模板**:關注公眾號回復「模板」獲取 《**前端面試手冊**》:配套于本指南的突擊手冊,關注公眾號回復「fed」獲取