css部分 · 小糜學習筆記之前端篇

[TOC] ### 1 css sprite是什么,有什么優缺點 * 概念：將多個小圖片拼接到一個圖片中。通過`background-position`和元素尺寸調節需要顯示的背景圖案。 * 優點： * 減少`HTTP`請求數，極大地提高頁面加載速度 * 增加圖片信息重復度，提高壓縮比，減少圖片大小 * 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現 * 缺點： * 圖片合并麻煩 * 維護麻煩，修改一個圖片可能需要從新布局整個圖片，樣式 ### 2 `display: none;`與`visibility: hidden;`的區別 * 聯系：它們都能讓元素不可見 * 區別： * `display:none`;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；`visibility: hidden`;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見 * `display: none`;是非繼承屬性，子孫節點消失由于元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示`；visibility: hidden;`是繼承屬性，子孫節點消失由于繼承了`hidden`，通過設置`visibility: visible;`可以讓子孫節點顯式 * 修改常規流中元素的`display`通常會造成文檔重排。修改`visibility`屬性只會造成本元素的重繪。 * 讀屏器不會讀取`display: none`;元素內容；會讀取`visibility: hidden;`元素內容 ### 3 `link`與`@import`的區別 1. `link`是`HTML`方式， `@import`是CSS方式 2. `link`最大限度支持并行下載，`@import`過多嵌套導致串行下載，出現`FOUC`(文檔樣式短暫失效) 3. `link`可以通過`rel="alternate stylesheet"`指定候選樣式 4. 瀏覽器對`link`支持早于`@import`，可以使用`@import`對老瀏覽器隱藏樣式 5. `@import`必須在樣式規則之前，可以在css文件中引用其他文件 6. 總體來說：`link`優于`@import` ### 4 什么是FOUC?如何避免 * `Flash Of Unstyled Content`：用戶定義樣式表加載之前瀏覽器使用默認樣式顯示文檔，用戶樣式加載渲染之后再從新顯示文檔，造成頁面閃爍。 * **解決方法**：把樣式表放到文檔的`<head>` ### 5 如何創建塊級格式化上下文(block formatting context),BFC有什么用 > BFC(Block Formatting Context)，塊級格式化上下文，是一個獨立的渲染區域，讓處于 BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響 **觸發條件 (以下任意一條)** * `float`的值不為`none` * `overflow`的值不為`visible` * `display`的值為`table-cell`、`tabble-caption`和`inline-block`之一 * `position`的值不為`static`或則`releative`中的任何一個 > 在`IE`下, `Layout`,可通過`zoom:1` 觸發 **.BFC布局與普通文檔流布局區別普通文檔流布局:** * 浮動的元素是不會被父級計算高度 * 非浮動元素會覆蓋浮動元素的位置 * `margin`會傳遞給父級元素 * 兩個相鄰元素上下的`margin`會重疊 **BFC布局規則:** * 浮動的元素會被父級計算高度(父級元素觸發了`BFC`) * 非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了`BFC`) * `margin`不會傳遞給父級(父級觸發`BFC`) * 屬于同一個`BFC`的兩個相鄰元素上下`margin`會重疊 **開發中的應用** * 阻止`margin`重疊 * 可以包含浮動元素 —— 清除內部浮動(清除浮動的原理是兩個 `div`都位于同一個 `BFC` 區域之中) * 自適應兩欄布局 * 可以阻止元素被浮動元素覆蓋 ### 6 display、float、position的關系 * 如果`display`取值為`none`，那么`position`和`float`都不起作用，這種情況下元素不產生框 * 否則，如果`position`取值為`absolute`或者`fixed`，框就是絕對定位的，`float`的計算值為`none`，`display`根據下面的表格進行調整。 * 否則，如果`float`不是`none`，框是浮動的，`display`根據下表進行調整 * 否則，如果元素是根元素，`display`根據下表進行調整 * 其他情況下`display`的值為指定值 * 總結起來：**絕對定位、浮動、根元素都需要調整`display`** ### 7 清除浮動的幾種方式，各自的優缺點 * 父級`div`定義`height` * 結尾處加空`div`標簽`clear:both` * 父級`div`定義偽類`:after`和`zoom` * 父級`div`定義`overflow:hidden` * 父級`div`也浮動，需要定義寬度 * 結尾處加`br`標簽`clear:both` * 比較好的是第3種方式，好多網站都這么用 ### 8 為什么要初始化CSS樣式? * 因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對`CSS`初始化往往會出現瀏覽器之間的頁面顯示差異。 * 當然，初始化樣式會對`SEO`有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化 ### 9 css3有哪些新特性 * 新增選擇器 `p:nth-child(n){color: rgba(255, 0, 0, 0.75)}` * 彈性盒模型 `display: flex;` * 多列布局 `column-count: 5;` * 媒體查詢 `@media (max-width: 480px) {.box: {column-count: 1;}}` * 個性化字體 `@font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}` * 顏色透明度 `color: rgba(255, 0, 0, 0.75);` * 圓角 `border-radius: 5px;` * 漸變 `background:linear-gradient(red, green, blue);` * 陰影 `box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);` * 倒影 `box-reflect: below 2px;` * 文字裝飾 `text-stroke-color: red;` * 文字溢出 `text-overflow:ellipsis;` * 背景效果 `background-size: 100px 100px;` * 邊框效果 `border-image:url(bt_blue.png) 0 10;` * 轉換 * 旋轉 `transform: rotate(20deg);` * 傾斜 `transform: skew(150deg, -10deg);` * 位移 `transform: translate(20px, 20px);` * 縮放 `transform: scale(.5);` * 平滑過渡 `transition: all .3s ease-in .1s;` * 動畫 `@keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;` **CSS3新增偽類有那些？** * `p:first-of-type` 選擇屬于其父元素的首個`<p>`元素的每個`<p>` 元素。 * `p:last-of-type` 選擇屬于其父元素的最后 `<p>` 元素的每個`<p>` 元素。 * `p:only-of-type` 選擇屬于其父元素唯一的 `<p>`元素的每個 `<p>` 元素。 * `p:only-child` 選擇屬于其父元素的唯一子元素的每個 `<p>` 元素。 * `p:nth-child(2)` 選擇屬于其父元素的第二個子元素的每個 `<p>` 元素。 * `:after` 在元素之前添加內容,也可以用來做清除浮動。 * `:before` 在元素之后添加內容。 * `:enabled` 已啟用的表單元素。 * `:disabled` 已禁用的表單元素。 * `:checked` 單選框或復選框被選中。 ### 10 display有哪些值？說明他們的作用 * `block` 轉換成塊狀元素。 * `inline` 轉換成行內元素。 * `none` 設置元素不可見。 * `inline-block` 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。 * `list-item` 象塊類型元素一樣顯示，并添加樣式列表標記。 * `table` 此元素會作為塊級表格來顯示 * `inherit` 規定應該從父元素繼承 `display` 屬性的值 ### 11 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ > * 有兩種， `IE`盒子模型、`W3C`盒子模型； > * 盒模型：內容(content)、填充(`padding`)、邊界(`margin`)、邊框(`border`)； > * 區別： `IE`的c`ontent`部分把 `border` 和 `padding`計算了進去; * 盒子模型構成：內容(`content`)、內填充(`padding`)、邊框(`border`)、外邊距(`margin`) * `IE8`及其以下版本瀏覽器，未聲明 `DOCTYPE`，內容寬高會包含內填充和邊框，稱為怪異盒模型(`IE`盒模型) * 標準(`W3C`)盒模型：元素寬度 = `width + padding + border + margin` * 怪異(`IE`)盒模型：元素寬度 = `width + margin` * 標準瀏覽器通過設置 css3 的 `box-sizing: border-box` 屬性，觸發“怪異模式”解析計算寬高 **box-sizing 常用的屬性有哪些？分別有什么作用** * `box-sizing: content-box;` 默認的標準(W3C)盒模型元素效果 * `box-sizing: border-box;` 觸發怪異(IE)盒模型元素的效果 * `box-sizing: inherit;` 繼承父元素 `box-sizing` 屬性的值 ### 12 CSS優先級算法如何計算？ * 優先級就近原則，同權重情況下樣式定義最近者為準 * 載入樣式以最后載入的定位為準 * 優先級為: `!important > id > class > tag`; `!important` 比內聯優先級高 ### 13 對BFC規范的理解？ * 一個頁面是由很多個 `Box` 組成的,元素的類型和 `d`isplay` 屬性,決定了這個 Box 的類型 * 不同類型的 `Box`,會參與不同的 `Formatting Context`（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響 ### 14 談談浮動和清除浮動 * 浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文檔普通流的塊框上 ### 15 position的值， relative和absolute定位原點是 * `absolute`：生成絕對定位的元素，相對于 `static` 定位以外的第一個父元素進行定位 * `fixed`：生成絕對定位的元素，相對于瀏覽器窗口進行定位 * `relative`：生成相對定位的元素，相對于其正常位置進行定位 * `static` 默認值。沒有定位，元素出現在正常的流中 * `inherit` 規定從父元素繼承 `position` 屬性的值 ### 16 display:inline-block 什么時候不會顯示間隙？(攜程) * 移除空格 * 使用`margin`負值 * 使用`font-size:0` * `letter-spacing` * `word-spacing` ### 17 PNG\\GIF\\JPG的區別及如何選 * `GIF` * `8`位像素，`256`色 * 無損壓縮 * 支持簡單動畫 * 支持`boolean`透明 * 適合簡單動畫 * `JPEG` * 顏色限于`256` * 有損壓縮 * 可控制壓縮質量 * 不支持透明 * 適合照片 * `PNG` * 有`PNG8`和`truecolor PNG` * `PNG8`類似`GIF`顏色上限為`256`，文件小，支持`alpha`透明度，無動畫 * 適合圖標、背景、按鈕 ### 18 行內元素float:left后是否變為塊級元素？ > 行內元素設置成浮動之后變得更加像是`inline-block`（行內塊級元素，設置成這個屬性的元素會同時擁有行內和塊級的特性，最明顯的不同是它的默認寬度不是`100%`），這時候給行內元素設置`padding-top`和`padding-bottom`或者`width`、`height`都是有效果的 ### 19 在網頁中的應該使用奇數還是偶數的字體？為什么呢？ * 偶數字號相對更容易和 web 設計的其他部分構成比例關系 ### 20 ::before 和 :after中雙冒號和單冒號有什么區別？解釋一下這2個偽元素的作用 * 單冒號(`:`)用于`CSS3`偽類，雙冒號(`::`)用于`CSS3`偽元素 * 用于區分偽類和偽元素 ### 21 如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里） * 多數顯示器默認頻率是`60Hz`，即`1`秒刷新`60`次，所以理論上最小間隔為`1/60*1000ms ＝ 16.7ms` ### 22 CSS合并方法 * 避免使用`@import`引入多個`css`文件，可以使用`CSS`工具將`CSS`合并為一個`CSS`文件，例如使用`Sass\Compass`等 ### 23 CSS不同選擇器的權重(CSS層疊的規則) * `！important`規則最重要，大于其它規則 * 行內樣式規則，加`1000` * 對于選擇器中給定的各個`ID`屬性值，加`100` * 對于選擇器中給定的各個類屬性、屬性選擇器或者偽類選擇器，加`10` * 對于選擇其中給定的各個元素標簽選擇器，加1 * 如果權值一樣，則按照樣式規則的先后順序來應用，順序靠后的覆蓋靠前的規則 > 以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下/// 例子是演示各種定義的權重值： ~~~ /*權重為1*/ div{ } /*權重為10*/ .class1{ } /*權重為100*/ #id1{ } /*權重為100+1=101*/ #id1 div{ } /*權重為10+1=11*/ .class1 div{ } /*權重為10+10+1=21*/ .class1 .class2 div{ } ~~~ > 如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現 ### 24 列出你所知道可以改變頁面布局的屬性 * `position`、`display`、`float`、`width`、`height`、`margin`、`padding`、`top`、`left`、`right`、` ### 25 CSS在性能優化方面的實踐 * `css`壓縮與合并、`Gzip`壓縮 * `css`文件放在`head`里、不要用`@import` * 盡量用縮寫、避免用濾鏡、合理使用選擇器 ### 26 CSS3動畫（簡單動畫的實現，如旋轉等） * 依靠`CSS3`中提出的三個屬性：`transition`、`transform`、`animation` * `transition`：定義了元素在變化過程中是怎么樣的，包含`transition-property`、`transition-duration`、`transition-timing-function`、`transition-delay`。 * `transform`：定義元素的變化結果，包含`rotate`、`scale`、`skew`、`translate`。 * `animation`：動畫定義了動作的每一幀（`@keyframes`）有什么效果，包括`animation-name`，`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction` ### 27 base64的原理及優缺點 * 優點可以加密，減少了`HTTTP`請求 * 缺點是需要消耗`CPU`進行編解碼 ### 28 幾種常見的CSS布局 #### 流體布局 ~~~ .left { float: left; width: 100px; height: 200px; background: red; } .right { float: right; width: 200px; height: 200px; background: blue; } .main { margin-left: 120px; margin-right: 220px; height: 200px; background: green; } ~~~ ~~~ <div class="container"> <div class="left"></div> <div class="right"></div> <div class="main"></div> </div> ~~~ #### 圣杯布局 * 要求：三列布局；中間主體內容前置，且寬度自適應；兩邊內容定寬 * 好處：重要的內容放在文檔流前面可以優先渲染 * 原理：利用相對定位、浮動、負邊距布局，而不添加額外標簽 ~~~ .container { padding-left: 150px; padding-right: 190px; } .main { float: left; width: 100%; } .left { float: left; width: 190px; margin-left: -100%; position: relative; left: -150px; } .right { float: left; width: 190px; margin-left: -190px; position: relative; right: -190px; } ~~~ ~~~ <div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div> ~~~ #### 雙飛翼布局 * 雙飛翼布局：對圣杯布局（使用相對定位，對以后布局有局限性）的改進，消除相對定位布局 * 原理：主體元素上設置左右邊距，預留兩翼位置。左右兩欄使用浮動和負邊距歸位，消除相對定位。 ~~~ .container { /*padding-left:150px;*/ /*padding-right:190px;*/ } .main-wrap { width: 100%; float: left; } .main { margin-left: 150px; margin-right: 190px; } .left { float: left; width: 150px; margin-left: -100%; /*position: relative;*/ /*left:-150px;*/ } .right { float: left; width: 190px; margin-left: -190px; /*position:relative;*/ /*right:-190px;*/ } ~~~ ~~~ <div class="content"> <div class="main"></div> </div> <div class="left"></div> <div class="right"></div> ~~~ ### 29 stylus/sass/less區別 * 均具有“變量”、“混合”、“嵌套”、“繼承”、“顏色混合”五大基本特性 * `Scss`和`LESS`語法較為嚴謹，`LESS`要求一定要使用大括號“{}”，`Scss`和`Stylus`可以通過縮進表示層次與嵌套關系 * `Scss`無全局變量的概念，`LESS`和`Stylus`有類似于其它語言的作用域概念 * `Sass`是基于`Ruby`語言的，而`LESS`和`Stylus`可以基于`NodeJS` `NPM`下載相應庫后進行編譯； ### 30 postcss的作用 * 可以直觀的理解為：它就是一個平臺。為什么說它是一個平臺呢？因為我們直接用它，感覺不能干什么事情，但是如果讓一些插件在它上面跑，那么將會很強大 * `PostCSS` 提供了一個解析器，它能夠將 `CSS` 解析成抽象語法樹 * 通過在 `PostCSS` 這個平臺上，我們能夠開發一些插件，來處理我們的`CSS`，比如熱門的：`autoprefixer` * `postcss`可以對sass處理過后的`css`再處理最常見的就是`autoprefixer` ### 31 css樣式（選擇器）的優先級 * 計算權重確定 * `!important` * 內聯樣式 * 后寫的優先級高 ### 32 自定義字體的使用場景 * 宣傳/品牌/`banner`等固定文案 * 字體圖標 ### 33 如何美化CheckBox * `<label>` 屬性 `for` 和 `id` * 隱藏原生的 `<input>` * `:checked + <label>` ### 34 偽類和偽元素的區別 * 偽類表狀態 * 偽元素是真的有元素 * 前者單冒號，后者雙冒號 ### 35 `base64`的使用 * 用于減少 `HTTP` 請求 * 適用于小圖片 * `base64`的體積約為原圖的`4/3` ### 36 自適應布局思路： * 左側浮動或者絕對定位，然后右側`margin`撐開 * 使用`<div>`包含，然后靠負`margin`形成`bfc` * 使用`flex` ### 37 請用CSS寫一個簡單的幻燈片效果頁面 > 知道是要用`CSS3`。使用`animation`動畫實現一個簡單的幻燈片效果 ~~~css /**css**/ .ani{ width:480px; height:320px; margin:50px auto; overflow: hidden; box-shadow:0 0 5px rgba(0,0,0,1); background-size: cover; background-position: center; -webkit-animation-name: "loops"; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes "loops" { 0% { background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat; } 25% { background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat; } 50% { background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat; } 75% { background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat; } 100% { background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat; } } ~~~ ### 38 什么是外邊距重疊？重疊的結果是什么？ > 外邊距重疊就是margin-collapse * 在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。 **折疊結果遵循下列計算規則**： * 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。 * 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。 * 兩個外邊距一正一負時，折疊結果是兩者的相加的和。 ### 39 rgba()和opacity的透明效果有什么不同？ * `rgba()`和`opacity`都能實現透明效果，但最大的不同是`opacity`作用于元素，以及元素內的所有內容的透明度， * 而`rgba()`只作用于元素的顏色或其背景色。（設置`rgba`透明的元素的子元素不會繼承透明效果！） ### 40 css中可以讓文字在垂直和水平方向上重疊的兩個屬性是什么？ * 垂直方向：`line-height` * 水平方向：`letter-spacing` ### 41 如何垂直居中一個浮動元素？ ~~~css /**方法一：已知元素的高寬**/ #div1{ background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素需要相對定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的height，width margin-left: -100px; } /**方法二:**/ #div1{ width: 200px; height: 200px; background-color: #6699FF; margin:auto; position: absolute; //父元素需要相對定位 left: 0; top: 0; right: 0; bottom: 0; } ~~~ **如何垂直居中一個`<img>`?（用更簡便的方法。）** ~~~css #container /**<img>的容器設置如下**/ { display:table-cell; text-align:center; vertical-align:middle; } ~~~ ### 42 px和em的區別 * `px`和`em`都是長度單位，區別是，`px`的值是固定的，指定是多少就是多少，計算比較容易。`em`得值不是固定的，并且`em`會繼承父級元素的字體大小。 * 瀏覽器的默認字體高都是`16px`。所以未經調整的瀏覽器都符合: `1em=16px`。那么`12px=0.75em`, `10px=0.625em`。 > * px 相對于顯示器屏幕分辨率，無法用瀏覽器字體放大功能 > * em 值并不是固定的，會繼承父級的字體大小： em = 像素值 / 父級font-size ### 43 Sass、LESS是什么？大家為什么要使用他們？ * 他們是`CSS`預處理器。他是`CSS`上的一種抽象層。他們是一種特殊的語法/語言編譯成`CSS`。 * 例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算，函數. `LESS` 既可以在客戶端上運行 (支持`IE 6+`, `Webkit`, `Firefox`)，也可一在服務端運行 (借助 `Node.js`) **為什么要使用它們？** * 結構清晰，便于擴展。 * 可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對- 瀏覽器語法差異的重復處理，減少無意義的機械勞動。 * 可以輕松實現多重繼承。 * 完全兼容 CSS 代碼，可以方便地應用到老項目中。LESS 只- 是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯 ### 44 知道css有個content屬性嗎？有什么作用？有什么應用？ > css的`content`屬性專門應用在 `before/after`偽元素上，用于來插入生成內容。最常見的應用是利用偽類清除浮動。 ~~~css /**一種常見利用偽類清除浮動的代碼**/ .clearfix:after { content:"."; //這里利用到了content屬性 display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } ~~~ ### 45 水平居中的方法 * 元素為行內元素，設置父元素`text-align:center` * 如果元素寬度固定，可以設置左右`margin`為`auto`; * 絕對定位和移動: `absolute + transform` * 使用`flex-box`布局，指定`justify-content`屬性為center * `display`設置為`tabel-ceil` ### 46 垂直居中的方法 * 將顯示方式設置為表格，`display:table-cell`,同時設置`vertial-align：middle` * 使用`flex`布局，設置為`align-item：center` * 絕對定位中設置`bottom:0,top:0`,并設置`margin:auto` * 絕對定位中固定高度時設置`top:50%，margin-top`值為高度一半的負值 * 文本垂直居中設置`line-height`為`height`值 * 如果是單行文本, line-height 設置成和 height 值 ~~~css .vertical { height: 100px; line-height: 100px; } ~~~ * 已知高度的塊級子元素，采用絕對定位和負邊距 ~~~css .container { position: relative; } .vertical { height: 300px; /*子元素高度*/ position: absolute; top:50%; /*父元素高度50%*/ margin-top: -150px; /*自身高度一半*/ } ~~~ * 未知高度的塊級父子元素居中，模擬表格布局 * 缺點：IE67不兼容，父級 overflow：hidden 失效 ~~~css .container { display: table; } .content { display: table-cell; vertical-align: middle; } ~~~ * 新增 inline-block 兄弟元素，設置 vertical-align * 缺點：需要增加額外標簽，IE67不兼容 ~~~css .container { height: 100%;/*定義父級高度，作為參考*/ } .extra .vertical{ display: inline-block; /*行內塊顯示*/ vertical-align: middle; /*垂直居中*/ } .extra { height: 100%; /*設置新增元素高度為100%*/ } ~~~ * 絕對定位配合 CSS3 位移 ~~~css .vertical { position: absolute; top:50%; /*父元素高度50%*/ transform:translateY(-50%, -50%); } ~~~ * CSS3彈性盒模型 ~~~css .container { display:flex; justify-content: center; /*子元素水平居中*/ align-items: center; /*子元素垂直居中*/ } ~~~ ### 47 如何使用CSS實現硬件加速？ > 硬件加速是指通過創建獨立的復合圖層，讓GPU來渲染這個圖層，從而提高性能， * 一般觸發硬件加速的`CSS`屬性有`transform`、`opacity`、`filter`，為了避免2D動畫在開始和結束的時候的`repaint`操作，一般使用`tranform:translateZ(0)` ### 48 重繪和回流（重排）是什么，如何避免？ * 重繪：當渲染樹中的元素外觀（如：顏色）發生改變，不影響布局時，產生重繪 * 回流：當渲染樹中的元素的布局（如：尺寸、位置、隱藏/狀態狀態）發生改變時，產生重繪回流 * 注意：JS獲取Layout屬性值（如：`offsetLeft`、`scrollTop`、`getComputedStyle`等）也會引起回流。因為瀏覽器需要通過回流計算最新值 * 回流必將引起重繪，而重繪不一定會引起回流 **如何最小化重繪(repaint)和回流(reflow)**： * 需要要對元素進行復雜的操作時，可以先隱藏(`display:"none"`)，操作完成后再顯示 * 需要創建多個`DOM`節點時，使用`DocumentFragment`創建完后一次性的加入`document` * 緩存`Layout`屬性值，如：`var left = elem.offsetLeft;` 這樣，多次使用 `left` 只產生一次回流 * 盡量避免用`table`布局（`table`元素一旦觸發回流就會導致table里所有的其它元素回流） * 避免使用`css`表達式(`expression`)，因為每次調用都會重新計算值（包括加載頁面） * 盡量使用 `css` 屬性簡寫，如：用 `border` 代替 `border-width`, `border-style`, `border-color` * 批量修改元素樣式：`elem.className` 和 `elem.style.cssText` 代替 `elem.style.xxx` ### [#](http://interview.poetries.top/docs/base.html#_49-說一說css3的animation) 49 說一說css3的animation * css3的`animation`是css3新增的動畫屬性，這個css3動畫的每一幀是通過`@keyframes`來聲明的，`keyframes`聲明了動畫的名稱，通過`from`、`to`或者是百分比來定義 * 每一幀動畫元素的狀態，通過`animation-name`來引用這個動畫，同時css3動畫也可以定義動畫運行的時長、動畫開始時間、動畫播放方向、動畫循環次數、動畫播放的方式， * 這些相關的動畫子屬性有：`animation-name`定義動畫名、`animation-duration`定義動畫播放的時長、`animation-delay`定義動畫延遲播放的時間、`animation-direction`定義動畫的播放方向、`animation-iteration-count`定義播放次數、`animation-fill-mode`定義動畫播放之后的狀態、`animation-play-state`定義播放狀態，如暫停運行等、`animation-timing-function` * 定義播放的方式，如恒速播放、艱澀播放等。 ### [#](http://interview.poetries.top/docs/base.html#_50-左邊寬度固定-右邊自適應) 50 左邊寬度固定，右邊自適應 > 左側固定寬度，右側自適應寬度的兩列布局實現 html結構 ~~~html <div class="outer"> <div class="left">固定寬度</div> <div class="right">自適應寬度</div> </div> ~~~ > 在外層`div`（類名為`outer`）的`div`中，有兩個子`div`，類名分別為`left`和`right`，其中`left`為固定寬度，而`right`為自適應寬度 **方法1：左側div設置成浮動：float: left，右側div寬度會自拉升適應** ~~~css .outer { width: 100%; height: 500px; background-color: yellow; } .left { width: 200px; height: 200px; background-color: red; float: left; } .right { height: 200px; background-color: blue; } ~~~ **方法2：對右側:div進行絕對定位，然后再設置right=0，即可以實現寬度自適應** > 絕對定位元素的第一個高級特性就是其具有自動伸縮的功能，當我們將 `width`設置為 `auto` 的時候（或者不設置，默認為 `auto` ），絕對定位元素會根據其 `left` 和 `right` 自動伸縮其大小 ~~~css .outer { width: 100%; height: 500px; background-color: yellow; position: relative; } .left { width: 200px; height: 200px; background-color: red; } .right { height: 200px; background-color: blue; position: absolute; left: 200px; top:0; right: 0; } ~~~ **方法3：將左側`div`進行絕對定位，然后右側`div`設置`margin-left: 200px`** ~~~css .outer { width: 100%; height: 500px; background-color: yellow; position: relative; } .left { width: 200px; height: 200px; background-color: red; position: absolute; } .right { height: 200px; background-color: blue; margin-left: 200px; } ~~~ **方法4：使用flex布局** ~~~css .outer { width: 100%; height: 500px; background-color: yellow; display: flex; flex-direction: row; } .left { width: 200px; height: 200px; background-color: red; } .right { height: 200px; background-color: blue; flex: 1; } ~~~ ### 51 兩種以上方式實現已知或者未知寬度的垂直水平居中 ~~~css /** 1 **/ .wraper { position: relative; .box { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; } } /** 2 **/ .wraper { position: relative; .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } /** 3 **/ .wraper { .box { display: flex; justify-content:center; align-items: center; height: 100px; } } /** 4 **/ .wraper { display: table; .box { display: table-cell; vertical-align: middle; } } ~~~ ### 52 如何實現小于12px的字體效果 > `transform:scale()`這個屬性只可以縮放可以定義寬高的元素，而行內元素是沒有寬高的，我們可以加上一個`display:inline-block`; ~~~css transform: scale(0.7); ~~~ `css`的屬性，可以縮放大小 ### 53 css hack原理及常用hack * 原理：利用不同瀏覽器對CSS的支持和解析結果不一樣編寫針對特定瀏覽器樣式。 * 常見的hack有 * 屬性hack * 選擇器hack * IE條件注釋 ### 54 CSS有哪些繼承屬性 * 關于文字排版的屬性如： * `font` * `word-break` * `letter-spacing` * `text-align` * `text-rendering` * `word-spacing` * `white-space` * `text-indent` * `text-transform` * `text-shadow` * `line-height` * `color` * `visibility` * `cursor` ### 55 外邊距折疊(collapsing margins) * 毗鄰的兩個或多個 `margin` 會合并成一個`margin`，叫做外邊距折疊。規則如下： * 兩個或多個毗鄰的普通流中的塊元素垂直方向上的`margin`會折疊 * 浮動元素或`inline-block`元素或絕對定位元素的`margin`不會和垂直方向上的其他元素的margin折疊 * 創建了塊級格式化上下文的元素，不會和它的子元素發生margin折疊 * 元素自身的`margin-bottom`和`margin-top`相鄰時也會折 ### 56 CSS選擇符有哪些？哪些屬性可以繼承 * id選擇器（ `# myid`） * 類選擇器（`.myclassname`） * 標簽選擇器（`div`, `h1`, `p`） * 相鄰選擇器（`h1 + p`） * 子選擇器（`ul > li`） * 后代選擇器（`li a`） * 通配符選擇器（ `*` ） * 屬性選擇器（`a[rel = "external"]`） * 偽類選擇器（`a:hover, li:nth-child`） **CSS哪些屬性可以繼承？哪些屬性不可以繼承** * 可繼承的樣式： `font-size font-family color, UL LI DL DD DT` * 不可繼承的樣式：`border padding margin width height` ### 57 CSS3新增偽類有那些 * `:root` 選擇文檔的根元素，等同于 html 元素 * `:empty` 選擇沒有子元素的元素 * `:target` 選取當前活動的目標元素 * `:not(selector)` 選擇除 `selector` 元素意外的元素 * `:enabled` 選擇可用的表單元素 * `:disabled` 選擇禁用的表單元素 * `:checked` 選擇被選中的表單元素 * `:after` 在元素內部最前添加內容 * `:before` 在元素內部最后添加內容 * `:nth-child(n)` 匹配父元素下指定子元素，在所有子元素中排序第n * `:nth-last-child(n)` 匹配父元素下指定子元素，在所有子元素中排序第n，從后向前數 * `:nth-child(odd)` * `:nth-child(even)` * `:nth-child(3n+1)` * `:first-child` * `:last-child` * `:only-child` * `:nth-of-type(n)` 匹配父元素下指定子元素，在同類子元素中排序第n * `:nth-last-of-type(n)` 匹配父元素下指定子元素，在同類子元素中排序第n，從后向前數 * `:nth-of-type(odd)` * `:nth-of-type(even)` * `:nth-of-type(3n+1)` * `:first-of-type` * `:last-of-type` * `:only-of-type` * `::selection` 選擇被用戶選取的元素部分 * `:first-line` 選擇元素中的第一行 * `:first-letter` 選擇元素中的第一個字符 ### 58 如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中 * 給`div`設置一個寬度，然后添加`margin:0 auto`屬性 ~~~css div{ width:200px; margin:0 auto; } ~~~ * 居中一個浮動元素 ~~~css /* 確定容器的寬高寬500 高 300 的層設置層的外邊距 */ .div { width:500px ; height:300px;//高度可以不設 margin: -150px 0 0 -250px; position:relative; //相對定位 background-color:pink; //方便看效果 left:50%; top:50%; } ~~~ > 讓絕對定位的div居中 ~~~ position: absolute; width: 1200px; background: none; margin: 0 auto; top: 0; left: 0; bottom: 0; right: 0; ~~~ ### 59 用純CSS創建一個三角形的原理是什么 ~~~ /* 把上、左、右三條邊隱藏掉（顏色設為 transparent） */ #demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; } ~~~ ### 60 一個滿屏品字布局如何設計? * 簡單的方式： * 上面的`div`寬`100%`， * 下面的兩個`div`分別寬`50%`， * 然后用`float`或者`inline`使其不換行即可 ### 61 li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法 > 行框的排列會受到中間空白（回車\\空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了 ### 62 為什么要初始化CSS樣式 > 因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異 ### 63 請列舉幾種隱藏元素的方法 * `visibility: hidden;` 這個屬性只是簡單的隱藏某個元素，但是元素占用的空間任然存在 * `opacity: 0;` `CSS3`屬性，設置`0`可以使一個元素完全透明 * `position: absolute;` 設置一個很大的 `left` 負值定位，使元素定位在可見區域之外 * `display: none;` 元素會變得不可見，并且不會再占用文檔的空間。 * `transform: scale(0);` 將一個元素設置為縮放無限小，元素將不可見，元素原來所在的位置將被保留 * `<div hidden="hidden">` HTML5屬性,效果和`display:none;`相同，但這個屬性用于記錄一個元素的狀態 * `height: 0;` 將元素高度設為 `0` ，并消除邊框 * `filter: blur(0);` CSS3屬性，將一個元素的模糊度設置為`0`，從而使這個元素“消失”在頁面中 ### 64 rgba() 和 opacity 的透明效果有什么不同 * `opacity` 作用于元素以及元素內的所有內容（包括文字）的透明度 * `rgba()` 只作用于元素自身的顏色或其背景色，子元素不會繼承透明效果 ### 65 css 屬性 content 有什么作用 * content 屬性專門應用在 before/after 偽元素上，用于插入額外內容或樣式 ### 66 請解釋一下 CSS3 的 Flexbox（彈性盒布局模型）以及適用場景 > 1Flexbox1 用于不同尺寸屏幕中創建可自動擴展和收縮布局 ### 67 經常遇到的瀏覽器的JS兼容性有哪些？解決方法是什么 * 當前樣式：`getComputedStyle(el, null) VS el.currentStyle` * 事件對象：`e VS window.event` * 鼠標坐標：`e.pageX, e.pageY VS window.event.x, window.event.y` * 按鍵碼：`e.which VS event.keyCode` * 文本節點：`el.textContent VS el.innerText` ### 68 請寫出多種等高布局 * 在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假像 * 模仿表格布局等高列效果：兼容性不好，在ie6-7無法正常運行 * css3 flexbox 布局： .container{display: flex; align-items: stretch;} ### 69 浮動元素引起的問題 * 父元素的高度無法被撐開，影響與父元素同級的元素 * 與浮動元素同級的非浮動元素會跟隨其后 ### 70 CSS優化、提高性能的方法有哪些 * 多個`css`合并，盡量減少`HTTP`請求 * 將`css`文件放在頁面最上面 * 移除空的`css`規則 * 避免使用`CSS`表達式 * 選擇器優化嵌套，盡量避免層級過深 * 充分利用`css`繼承屬性，減少代碼量 * 抽象提取公共樣式，減少代碼量 * 屬性值為`0`時，不加單位 * 屬性值為小于`1`的小數時，省略小數點前面的0 * `css`雪碧圖 ### 71 瀏覽器是怎樣解析CSS選擇器的 * 瀏覽器解析 CSS 選擇器的方式是從右到左 ### 72 在網頁中的應該使用奇數還是偶數的字體 * 在網頁中的應該使用“偶數”字體： * 偶數字號相對更容易和 web 設計的其他部分構成比例關系 * 使用奇數號字體時文本段落無法對齊 * 宋體的中文網頁排布中使用最多的就是 12 和 14 ### 73 margin和padding分別適合什么場景使用 * 需要在`border`外側添加空白，且空白處不需要背景（色）時，使用 `margin` * 需要在`border`內測添加空白，且空白處需要背景（色）時，使用 `padding` ### 74 抽離樣式模塊怎么寫，說出思路 * CSS可以拆分成2部分：公共CSS 和業務CSS： * 網站的配色，字體，交互提取出為公共CSS。這部分CSS命名不應涉及具體的業務 * 對于業務CSS，需要有統一的命名，使用公用的前綴。可以參考面向對象的CSS ### 75 元素豎向的百分比設定是相對于容器的高度嗎 > 元素豎向的百分比設定是相對于容器的寬度，而不是高度 ### 76 全屏滾動的原理是什么？用到了CSS的那些屬性 * 原理類似圖片輪播原理，超出隱藏部分，滾動時顯示 * 可能用到的CSS屬性：`overflow:hidden; transform:translate(100%, 100%); display:none;` ### 77 什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE * 響應式設計就是網站能夠兼容多個終端，而不是為每個終端做一個特定的版本 * 基本原理是利用CSS3媒體查詢，為不同尺寸的設備適配不同樣式 * 對于低版本的IE，可采用JS獲取屏幕寬度，然后通過resize方法來實現兼容： ~~~css $(window).resize(function () { screenRespond(); }); screenRespond(); function screenRespond(){ var screenWidth = $(window).width(); if(screenWidth <= 1800){ $("body").attr("class", "w1800"); } if(screenWidth <= 1400){ $("body").attr("class", "w1400"); } if(screenWidth > 1800){ $("body").attr("class", ""); } } ~~~ ### 78 什么是視差滾動效果，如何給每頁做不同的動畫 * 視差滾動是指多層背景以不同的速度移動，形成立體的運動效果，具有非常出色的視覺體驗 * 一般把網頁解剖為：背景層、內容層和懸浮層。當滾動鼠標滾輪時，各圖層以不同速度移動，形成視差的 * 實現原理 * 以 “頁面滾動條” 作為 “視差動畫進度條” * 以 “滾輪刻度” 當作 “動畫幀度” 去播放動畫的 * 監聽 mousewheel 事件，事件被觸發即播放動畫，實現“翻頁”效果 ### 79 a標簽上四個偽類的執行順序是怎么樣的 > `link > visited > hover > active` * `L-V-H-A` `love hate` 用喜歡和討厭兩個詞來方便記憶 ### 80 偽元素和偽類的區別和作用 * 偽元素 -- 在內容元素的前后插入額外的元素或樣式，但是這些元素實際上并不在文檔中生成。 * 它們只在外部顯示可見，但不會在文檔的源代碼中找到它們，因此，稱為“偽”元素。例如： ~~~css p::before {content:"第一章：";} p::after {content:"Hot!";} p::first-line {background:red;} p::first-letter {font-size:30px;} ~~~ * 偽類 -- 將特殊的效果添加到特定選擇器上。它是已有元素上添加類別的，不會產生新的元素。例如： ~~~css a:hover {color: #FF00FF} p:first-child {color: red} ~~~ ### 81 ::before 和 :after 中雙冒號和單冒號有什么區別 * 在 CSS 中偽類一直用 `:` 表示，如 `:hover`, `:active` 等 * 偽元素在CSS1中已存在，當時語法是用 `:` 表示，如 `:before` 和 `:after` * 后來在CSS3中修訂，偽元素用 `::` 表示，如 `::before` 和 `::after`，以此區分偽元素和偽類 * 由于低版本IE對雙冒號不兼容，開發者為了兼容性各瀏覽器，繼續使使用 :after 這種老語法表示偽元素 * 綜上所述：`::before` 是 `CSS3` 中寫偽元素的新語法； `:after` 是 `CSS1` 中存在的、兼容IE的老語法 ### 82 如何修改Chrome記住密碼后自動填充表單的黃色背景 * 產生原因：由于Chrome默認會給自動填充的input表單加上 `input:-webkit-autofill` 私有屬性造成的 * 解決方案1：在form標簽上直接關閉了表單的自動填充：`autocomplete="off"` * 解決方案2：`input:-webkit-autofill { background-color: transparent; }` **input \[type=search\] 搜索框右側小圖標如何美化？** ~~~css input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none; height: 15px; width: 15px; border-radius: 8px; background:url("images/searchicon.png") no-repeat 0 0; background-size: 15px 15px; } ~~~ ### 83 網站圖片文件，如何點擊下載？而非點擊預覽 `<a href="logo.jpg" download>下載</a>` `<a href="logo.jpg" download="網站LOGO" >下載</a>` ### 63 iOS safari 如何阻止“橡皮筋效果” ~~~javascript $(document).ready(function(){ var stopScrolling = function(event) { event.preventDefault(); } document.addEventListener('touchstart', stopScrolling, false); document.addEventListener('touchmove', stopScrolling, false); }); ~~~ ### 84 你對 line-height 是如何理解的 * `line-height` 指一行字的高度，包含了字間距，實際上是下一行基線到上一行基線距離 * 如果一個標簽沒有定義 `height` 屬性，那么其最終表現的高度是由 `line-height` 決定的 * 一個容器沒有設置高度，那么撐開容器高度的是 `line-height` 而不是容器內的文字內容 * 把 `line-height` 值設置為 `height` 一樣大小的值可以實現單行文字的垂直居中 * `line-height` 和 `height` 都能撐開一個高度，`height` 會觸發 `haslayout`，而 `line-height` 不會 ### 85 line-height 三種賦值方式有何區別？（帶單位、純數字、百分比） * 帶單位：`px` 是固定值，而 `em` 會參考父元素 `font-size` 值計算自身的行高 * 純數字：會把比例傳遞給后代。例如，父級行高為 `1.5`，子元素字體為 `18px`，則子元素行高為 `1.5 * 18 = 27px` * 百分比：將計算后的值傳遞給后代 ### 86 設置元素浮動后，該元素的 display 值會如何變化 > 設置元素浮動后，該元素的 `display` 值自動變成 `block` ### 87 讓頁面里的字體變清晰，變細用CSS怎么做？（IOS手機瀏覽器字體齒輪設置） ~~~css -webkit-font-smoothing: antialiased; ~~~ ### 88 font-style 屬性 oblique 是什么意思 > `font-style: oblique;` 使沒有 `italic` 屬性的文字實現傾斜 ### 89 display:inline-block 什么時候會顯示間隙 * 相鄰的 `inline-block` 元素之間有換行或空格分隔的情況下會產生間距 * 非 `inline-block` 水平元素設置為 `inline-block` 也會有水平間距 * 可以借助 `vertical-align:top;` 消除垂直間隙 * 可以在父級加 `font-size：0;` 在子元素里設置需要的字體大小，消除垂直間隙 * 把 `li` 標簽寫到同一行可以消除垂直間隙，但代碼可讀性差 ### 90 一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度 * 方案1： * `.sub { height: calc(100%-100px); }` * 方案2： * `.container { position:relative; }` * `.sub { position: absolute; top: 100px; bottom: 0; }` * 方案3： * `.container { display:flex; flex-direction:column; }` * `.sub { flex:1; }`