[toc] ## HTML && CSS ### HTML5 新特性、語義化 1. **概念**： HTML5的語義化指的是`合理正確的使用語義化的標簽來創建頁面結構`。【正確的標簽做正確的事】 1. **語義化標簽**： header nav main article section aside footer 1. **語義化的優點**: - 在`沒CSS樣式的情況下，頁面整體也會呈現很好的結構效果` - `代碼結構清晰`，易于閱讀， - `利于開發和維護` 方便其他設備解析（如屏幕閱讀器）根據語義渲染網頁。 - `有利于搜索引擎優化（SEO）`，搜索引擎爬蟲會根據不同的標簽來賦予不同的權重 ### HTML5新特性有哪些 - 語義化標簽 - 音視頻處理API(audio,video) - canvas / webGL - 拖拽釋放(Drag and drop) API - history API - requestAnimationFrame - 地理位置(Geolocation)API - webSocket - web存儲 localStorage、SessionStorage - 表單控件，calendar、date、time、email、url、search ### CSS 選擇器及優先級 **選擇器** - id選擇器(#myid) - 類選擇器(.myclass) - 屬性選擇器(a[rel="external"]) - 偽類選擇器(a:hover, li:nth-child) - 標簽選擇器(div, h1,p) - 相鄰選擇器（h1 + p） - 子選擇器(ul > li) - 后代選擇器(li a) - 通配符選擇器(*) **優先級：** - `!important` - 內聯樣式（1000） - ID選擇器（0100） - 類選擇器/屬性選擇器/偽類選擇器（0010） - 元素選擇器/偽元素選擇器（0001） - 關系選擇器/通配符選擇器（0000） 帶!important 標記的樣式屬性優先級最高； 樣式表的來源相同時： `!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性` ### 漸進增強與優雅降級的理解及區別 **漸進增強（Progressive Enhancement）：** 一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。 **優雅降級（Graceful Degradation）：** 一開始就構建站點的完整功能，然后針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。 **兩者區別** 1、廣義： 其實要定義一個基準線，在此之上的增強叫做漸進增強，在此之下的兼容叫優雅降級 2、狹義： 漸進增強一般說的是使用CSS3技術，在不影響老瀏覽器的正常顯示與使用情形下來增強體驗，而優雅降級則是體現html標簽的語義，以便在js/css的加載失敗/被禁用時，也不影響用戶的相應功能。 ```css /* 例子 */ .transition { /*漸進增強寫法*/ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .transition { /*優雅降級寫法*/ transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; } ``` ### 常見的兼容性問題 1. 不同瀏覽器的標簽默認的margin和padding不一樣。*{margin:0;padding:0;} 2. IE6雙邊距bug：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大。hack：display:inline;將其轉化為行內屬性。 3. 設置較小高度標簽（一般小于10px），在IE6，IE7中高度超出自己設置高度。hack：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。 4. Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。 5. 超鏈接訪問過后hover樣式就不出現了，被點擊訪問過的超鏈接樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {} ### CSS3新特性 - 過渡 ```js /*所有屬性從原始值到制定值的一個過渡，運動曲線ease,運動時間0.5秒*/ transition：all,.5s ``` - 動畫 ```js //animation：動畫名稱，一個周期花費時間，運動曲線（默認ease），動畫延遲（默認0），播放次數（默認1），是否反向播放動畫（默認normal），是否暫停動畫（默認running） /*執行一次logo2-line動畫，運動時間2秒，運動曲線為 linear*/ animation: logo2-line 2s linear; ``` - 形狀轉換 ```js //transform:適用于2D或3D轉換的元素 //transform-origin：轉換元素的位置（圍繞那個點進行轉換）。默認(x,y,z)：(50%,50%,0) transform:translate(30px,30px); transform:rotate(30deg); transform:scale(.8); ``` - 選擇器:nth-of-type() - 陰影 文字陰影: text-shadow: 2px 2px 2px #000;(水平陰影，垂直陰影，模糊距離，陰影顏色) 盒子陰影: box-shadow: 10px 10px 5px #999 - 邊框 border-image: url(border.png); - 背景 - 文字 - 漸變 - Filter（濾鏡） - 彈性布局、柵格布局、多列布局 - 媒體查詢 ### position 屬性的值有哪些及其區別 **固定定位 fixed**： 元素的位置相對于瀏覽器窗口是固定位置，即使窗口是滾動的它也不會移動。Fixed 定 位使元素的位置與文檔流無關，因此不占據空間。 Fixed 定位的元素和其他元素重疊。 **相對定位 relative**： 如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直 或水平位置，讓這個元素“相對于”它的起點進行移動。 在使用相對定位時，無論是 否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。 **絕對定位 absolute**： 絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那 么它的位置相對于。absolute 定位使元素的位置與文檔流無關，因此不占據空間。 absolute 定位的元素和其他元素重疊。 **粘性定位 sticky**： 元素先按照普通文檔流定位，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。而后，元素定位表現為在跨越特定閾值前為相對定 位，之后為固定定位。 **默認定位 Static**： 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲 明）。 inherit: 規定應該從父元素繼承 position 屬性的值。 ### box-sizing屬性 box-sizing 規定兩個并排的帶邊框的框，語法為 box-sizing：content-box/border-box/inherit **content-box**：寬度和高度分別應用到元素的內容框，在寬度和高度之外繪制元素的內邊距和邊框。【標準盒子模型】 **border-box**：為元素設定的寬度和高度決定了元素的邊框盒。【IE 盒子模型】 **inherit**：繼承父元素的 box-sizing 值。 ### CSS 盒子模型 CSS 盒模型本質上是一個盒子，它包括：邊距，邊框，填充和實際內容。CSS 中的盒子模型包括 IE 盒子模型和標準的 W3C 盒子模型。\ 在標準的盒子模型中，`width 指 content 部分的寬度`。\ 在 IE 盒子模型中，`width 表示 content+padding+border 這三個部分的寬度`。 故在計算盒子的寬度時存在差異： **標準盒模型：** 一個塊的總寬度 = width+margin(左右)+padding(左右)+border(左右) **怪異盒模型：** 一個塊的總寬度 = width+margin（左右）（既 width 已經包含了 padding 和 border 值） ### BFC（塊級格式上下文） **BFC的概念** `BFC` 是 ` Block Formatting Context `的縮寫，即塊級格式化上下文。`BFC`是CSS布局的一個概念，是一個獨立的渲染區域，規定了內部box如何布局， 并且這個區域的子元素不會影響到外面的元素，其中比較重要的布局規則有內部 box 垂直放置，計算 BFC 的高度的時候，浮動元素也參與計算。 **BFC的原理布局規則** - 內部的Box會在`垂直方向`，一個接一個地放置 - Box`垂直方向的距離由margin決定`。屬于同一個BFC的兩個相鄰Box的margin會發生重疊 - 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反 - BFC的區域`不會與float box重疊` - BFC是一個獨立容器，容器里面的`子元素不會影響到外面的元素` - 計算BFC的高度時，`浮動元素也參與計算高度` - 元素的類型和`display屬性，決定了這個Box的類型`。不同類型的Box會參與不同的`Formatting Context`。 **如何創建BFC？** - 根元素，即HTML元素 - float的值不為none - position為absolute或fixed - display的值為inline-block、table-cell、table-caption - overflow的值不為visible **BFC的使用場景** - 去除邊距重疊現象 - 清除浮動（讓父元素的高度包含子浮動元素） - 避免某元素被浮動元素覆蓋 - 避免多列布局由于寬度計算四舍五入而自動換行 ### 讓一個元素水平垂直居中 - **水平居中** - 對于 行內元素 : `text-align: center`; - 對于確定寬度的塊級元素： （1）width和margin實現。`margin: 0 auto`; （2）絕對定位和margin-left: margin-left: (父width - 子width）/2, 前提是父元素position: relative - 對于寬度未知的塊級元素 （1）`table標簽配合margin左右auto實現水平居中`。使用table標簽（或直接將塊級元素設值為 display:table），再通過給該標簽添加左右margin為auto。 （2）inline-block實現水平居中方法。display：inline-block和text-align:center實現水平居中。 （3）`絕對定位+transform`，translateX可以移動本身元素的50%。 （4）flex布局使用`justify-content:center` - **垂直居中** 1. 利用 `line-height` 實現居中，這種方法適合純文字類 1. 通過設置父容器 相對定位 ，子級設置 `絕對定位`，標簽通過margin實現自適應居中 1. 彈性布局 flex :父級設置display: flex; 子級設置margin為auto實現自適應居中 1. 父級設置相對定位，子級設置絕對定位，并且通過位移 transform 實現 1. `table 布局`，父級通過轉換成表格形式，`然后子級設置 vertical-align 實現`。（需要注意的是：vertical-align: middle使用的前提條件是內聯元素以及display值為table-cell的元素）。 傳送門 ? [# 圖解CSS水平垂直居中常見面試方法](https://juejin.cn/post/7008348524530106381) ### 隱藏頁面中某個元素的方法 1.`opacity：0`，該元素隱藏起來了，但不會改變頁面布局，并且，如果該元素已經綁定 一些事件，如click 事件，那么點擊該區域，也能觸發點擊事件的 2.`visibility：hidden`，該元素隱藏起來了，但不會改變頁面布局，但是不會觸發該元素已 經綁定的事件 ，隱藏對應元素，在文檔布局中仍保留原來的空間（重繪） 3.`display：none`，把元素隱藏起來，并且會改變頁面布局，可以理解成在頁面中把該元素。 不顯示對應的元素，在文檔布局中不再分配空間（回流+重繪） >該問題會引出 回流和重繪 ### 用CSS實現三角符號 ```css /*記憶口訣：盒子寬高均為零，三面邊框皆透明。 */ div:after{ position: absolute; width: 0px; height: 0px; content: " "; border-right: 100px solid transparent; border-top: 100px solid #ff0; border-left: 100px solid transparent; border-bottom: 100px solid transparent; } ``` ### 頁面布局 #### 1.Flex 布局 布局的傳統解決方案，基于盒狀模型，依賴 display 屬性 + position 屬性 + float 屬性。它對于那些特殊布局非常不方便，比如，垂直居中就不容易實現。 Flex 是 Flexible Box 的縮寫，意為"彈性布局",用來為盒狀模型提供最大的靈活性。指定容器 display: flex 即可。 簡單的分為容器屬性和元素屬性。 容器的屬性： - flex-direction：決定主軸的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse; - flex-wrap：決定換行規則 flex-wrap: nowrap | wrap | wrap-reverse; - flex-flow： .box { flex-flow: || ; } - justify-content：對其方式，水平主軸對齊方式 - align-items：對齊方式，豎直軸線方向 - align-content 項目的屬性（元素的屬性）： - order 屬性：定義項目的排列順序，順序越小，排列越靠前，默認為 0 - flex-grow 屬性：定義項目的放大比例，即使存在空間，也不會放大 - flex-shrink 屬性：定義了項目的縮小比例，當空間不足的情況下會等比例的縮小，如果 定義個 item 的 flow-shrink 為 0，則為不縮小 - flex-basis 屬性：定義了在分配多余的空間，項目占據的空間。 - flex：是 flex-grow 和 flex-shrink、flex-basis 的簡寫，默認值為 0 1 auto。 - align-self：允許單個項目與其他項目不一樣的對齊方式，可以覆蓋 - align-items，默認屬 性為 auto，表示繼承父元素的 align-items 比如說，用 flex 實現圣杯布局 #### 2.Rem 布局 首先 Rem 相對于根(html)的 font-size 大小來計算。簡單的說它就是一個相對單例 如:font-size:10px;,那么（1rem = 10px）了解計算原理后首先解決怎么在不同設備上設置 html 的 font-size 大小。其實 rem 布局的本質是等比縮放，一般是基于寬度。 **優點**：可以快速適用移動端布局，字體，圖片高度 **缺點**： ①目前 ie 不支持，對 pc 頁面來講使用次數不多；\ ②數據量大：所有的圖片，盒子都需要我們去給一個準確的值；才能保證不同機型的適配；\ ③在響應式布局中，必須通過 js 來動態控制根元素 font-size 的大小。也就是說 css 樣式和 js 代碼有一定的耦合性。且必須將改變 font-size 的代碼放在 css 樣式之前。 #### 3.百分比布局 通過百分比單位 " % " 來實現響應式的效果。通過百分比單位可以使得瀏覽器中的組件的寬和高隨著瀏覽器的變化而變化，從而實現響應式的效果。 直觀的理解，我們可能會認為子元素的百分比完全相對于直接父元素，height 百分比相 對于 height，width 百分比相對于 width。 padding、border、margin 等等不論是垂直方向還是水平方向，都相對于直接父元素的 width。 除了 border-radius 外，還有比如 translate、background-size 等都是相對于自身的。 **缺點**： （1）計算困難\ （2）各個屬性中如果使用百分比，相對父元素的屬性并不是唯一的。造成我們使用百分比單位容易使布局問題變得復雜。 #### 4.浮動布局 浮動布局:當元素浮動以后可以向左或向右移動，直到它的外邊緣碰到包含它的框或者另外一個浮動元素的邊框為止。元素浮動以后會脫離正常的文檔流，所以文檔的普通流中的框就變的好像浮動元素不存在一樣。 **優點** 這樣做的優點就是在圖文混排的時候可以很好的使文字環繞在圖片周圍。另外當元素浮動了起來之后，它有著塊級元素的一些性質例如可以設置寬高等，但它與inline-block還是有一些區別的，第一個就是關于橫向排序的時候，float可以設置方向而inline-block方向是固定的；還有一個就是inline-block在使用時有時會有空白間隙的問題 **缺點** 最明顯的缺點就是浮動元素一旦脫離了文檔流，就無法撐起父元素，`會造成父級元素高度塌陷`。 ### 如何使用rem或viewport進行移動端適配 **rem適配原理：** 改變了一個元素在不同設備上占據的css像素的個數 rem適配的優缺點 - 優點：沒有破壞完美視口 - 缺點：px值轉換rem太過于復雜(下面我們使用less來解決這個問題) **viewport適配的原理** viewport適配方案中，每一個元素在不同設備上占據的css像素的個數是一樣的。但是css像素和物理像素的比例是不一樣的，等比的 viewport適配的優缺點 - 在我們設計圖上所量取的大小即為我們可以設置的像素大小，即所量即所設 - 缺點破壞完美視口 ### 清除浮動的方式 - 添加額外標簽 ```html <div class="parent"> //添加額外標簽并且添加clear屬性 <div style="clear:both"></div> //也可以加一個br標簽 </div> ``` - 父級添加overflow屬性，或者設置高度 - 建立偽類選擇器清除浮動 ```js //在css中添加:after偽元素 .parent:after{ /* 設置添加子元素的內容是空 */ content: ''; /* 設置添加子元素為塊級元素 */ display: block; /* 設置添加的子元素的高度0 */ height: 0; /* 設置添加子元素看不見 */ visibility: hidden; /* 設置clear：both */ clear: both; } ``` ### CSS預處理器Sass、Less、Stylus的區別 什么事CSS預處理器? CSS預處理器是一種語言用來為CSS增加一些變成的特性，無需考慮瀏覽器兼容問題，例如你可以在CSS中使用變量，簡單的程序邏輯、函數等在編程語言中的一些基本技巧，可以讓CSS更加簡潔，適應性更強，代碼更直觀等諸多好處 基本語法區別 Sass是以.sass為擴展名，Less是以.less為擴展名，Stylus是以.styl為擴展名 變量的區別 Sass 變量必須是以`$`開頭的，然后變量和值之間使用冒號（：）隔開，和css屬性是一樣的。 Less 變量是以` @ `開頭的，其余sass都是一樣的。 Stylus 對變量是沒有任何設定的，可以是以$開頭或者任意字符，而且變量之間可以冒號，空格隔開，但是在stylus中不能用@開頭 三種預處理器都有：嵌套、運算符、顏色函數、導入、繼承、混入。Stylus還有一些高級特性。例如循環、判斷等