資訊專欄INFORMATION COLUMN
摘要：空元素，主要講下可算內(nèi)聯(lián)元素，因?yàn)榭膳c其他元素同行，且寬高對其起作用。提示對內(nèi)聯(lián)元素寬高起作用，請使用談?wù)剬Χㄎ坏睦斫馍山^對定位的元素，相對于定位以外的第一個(gè)父元素進(jìn)行定位。
Html 1.解釋
，
主要從utf-8展開，utf-8是一種字符編碼，該編碼是全世界通用的，意思是假如項(xiàng)目涉及多語言，那么只能使用該編碼方式。
是使用html5文檔類型。告知瀏覽器的解析器，用什么文檔類型 規(guī)范來解析這個(gè)文檔。 拋棄之前的html4的4中文檔類型
**what?** ? 根據(jù)內(nèi)容的結(jié)構(gòu)（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲和機(jī)器很好地解析。 **why?** ? 為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu):為了裸奔時(shí)好看； ? 用戶體驗(yàn)：例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用； ? 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重 ? 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁； ? 便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁的重要?jiǎng)酉?，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。 **how?** ? 盡可能少的使用無語義的標(biāo)簽div和span； ? 在語義不明顯時(shí)，既可以使用div或者p時(shí)，盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距，對兼容特殊終端有利； ? 不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。 ? 需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）； ? 使用表格時(shí)，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td； ? 表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途； ? 每個(gè)input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。3.Iframe的優(yōu)缺點(diǎn)， 如何用
iframe的優(yōu)點(diǎn)：
? iframe能夠原封不動(dòng)的把嵌入的網(wǎng)頁展現(xiàn)出來。
? 如果有多個(gè)網(wǎng)頁引用iframe，那么你只需要修改iframe的內(nèi)容，就可以實(shí)現(xiàn)調(diào)用的每一個(gè)頁面內(nèi)容的更改，方便快捷。
? 網(wǎng)頁如果為了統(tǒng)一風(fēng)格，頭部和版本都是一樣的，就可以寫成一個(gè)頁面，用iframe來嵌套，可以增加代碼的可重用。
? 如果遇到加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告，這些問題可以由iframe來解決。
? 重載頁面時(shí)不需要重載整個(gè)頁面，只需要重載頁面中的一個(gè)框架頁(減少了數(shù)據(jù)的傳輸，增加了網(wǎng)頁下載速度)
iframe的缺點(diǎn)
? 1、頁面樣式調(diào)試麻煩，出現(xiàn)多個(gè)滾動(dòng)條；
? 2、瀏覽器的后退按鈕失效；
? 3、過多會(huì)增加服務(wù)器的HTTP請求；
? 4、小型的移動(dòng)設(shè)備無法完全顯示框架；
? 5、產(chǎn)生多個(gè)頁面，不易管理；
? 6、不容易打印；
? 7、代碼復(fù)雜，無法被一些搜索引擎解讀。
? 8、iframe會(huì)阻塞主頁面的Onload事件；
? 功能：表示Label標(biāo)簽要綁定的HTML元素，你點(diǎn)擊這個(gè)標(biāo)簽的時(shí)候，所綁定的元素將獲取焦點(diǎn)。
? 用法：
選擇符有9種
1.id選擇器（ # myid） 2.類選擇器（.myclassname） 3.標(biāo)簽選擇器（div, h1, p） 4.相鄰選擇器（h1 + p） 5.子選擇器（ul < li） 6.后代選擇器（li a） 7.通配符選擇器（ * ） 8.屬性選擇器（a[rel = "external"]） 9.偽類選擇器（a: hover, li: nth - child）
繼承性
可繼承： font-size font-family color, UL LI DL DD DT;
不可繼承 ：border padding margin width height ;
優(yōu)先級
相同的樣式優(yōu)先級就近原則，樣式定義最近者為準(zhǔn);
載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級算法是權(quán)重計(jì)算法，id=100，class=10 ,標(biāo)簽是1
一般而言
!important > id > class > tag important 比 內(nèi)聯(lián)優(yōu)先級高6.對css元素的理解
種類
塊元素:block：p,ul,li ,dl,ol,dt,h1~h6,hr,div,pre,table. form , fieldset
內(nèi)聯(lián)元素:inline： a、span、img、input、label、select、strong、textarea br, code, sup, sub；
知名的空元素：
提示：對內(nèi)聯(lián)元素寬高起作用，請使用display:inline-block
7.談?wù)剬Χㄎ坏睦斫?/b>absolute 生成絕對定位的元素，相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位。 fixed （老IE不支持）生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。 relative 生成相對定位的元素，相對于其正常位置進(jìn)行定位。 static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中 （忽略 top, bottom, left, right z-index 聲明）
談?wù)剬心Ｐ偷睦斫?/p>
盒模型是有兩種標(biāo)準(zhǔn)的，一個(gè)是標(biāo)準(zhǔn)模型w3c，一個(gè)是IE模型。
標(biāo)準(zhǔn)盒子的寬 等于 width+margin +padding+border；width就是內(nèi)容的寬高
IE的盒模型：width=內(nèi)容(content)+填充(padding)+邊框(border)的總寬高）
css如何設(shè)置兩種模型：box-sizing:content-box; border-box;
注意事項(xiàng)：input、button元素默認(rèn)border-box ，還是基于傳統(tǒng)的ie 盒子模型。但文檔類型是標(biāo)準(zhǔn)模式，則所有元素都是w3c盒模型
邊距重疊的問題：
父元素沒有設(shè)置margin-top，而子元素設(shè)置了margin-top：20px;可以看出，父元素也一起有了邊距
相鄰的上下元素margin-top和margin-bottom也會(huì)重疊
邊距重疊/外邊距合并的注意事項(xiàng)：
外邊距合并只出現(xiàn)在塊級元素上；
浮動(dòng)元素不會(huì)和相鄰的元素產(chǎn)生外邊距合并；
絕對定位元素不會(huì)和相鄰的元素產(chǎn)生外邊距合并；
內(nèi)聯(lián)塊級元素間不會(huì)產(chǎn)生外邊距合并；
根元素間不會(huì)不會(huì)產(chǎn)生外邊距合并（如html與body間）；
設(shè)置了屬性overflow且值不為visible的塊級元素不會(huì)與它的子元素發(fā)生外邊距合并
邊距重疊的解決方案 （BFC）
float屬性不為none（脫離文檔流） position為absolute或fixed display為inline-block,table-cell,table-caption,flex,inine-flex overflow不為visible 根元素
BFC的適用場景
? 自適應(yīng)兩欄布局
? 清除內(nèi)部浮動(dòng)
? 防止垂直margin重疊
工作原理：
? 對塊元素設(shè)置浮動(dòng)屬性后，它就脫離了當(dāng)前的文檔流布局的方式，漂浮到他的父級元素的左邊或者右邊。如果想讓多個(gè)塊顯示在同一行中，可以將這些塊都設(shè)置成浮動(dòng)，并且浮動(dòng)方向相同。
為什么要清除浮動(dòng)
浮動(dòng)的缺點(diǎn)：
1.當(dāng)元素有默認(rèn)屬性，且每個(gè)瀏覽器默認(rèn)屬性值不同，而編寫者不清楚具體是多少及多大事，會(huì)對父元素（如對父元素的background屬性，margin屬性有影響）和后面元素產(chǎn)生影響，造成布局錯(cuò)亂。
2.浮動(dòng)的元素，高度會(huì)塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示。
故需對父元素使用Clear，進(jìn)行清除浮動(dòng)
清除浮動(dòng)的3種辦法：
1.添加一個(gè)附加層，：#haa{display：block;clear:both;height:20px;}
2.給父元素添加overflow：hidden;屬性。但是IE6不支持，還需給父元素添加zoom:1屬性。
3.利用偽類after的方法
例： .cf:after{content:" "；height:0； display:block； clear:both；line-height:0; Visibility:hidden；} .cf{zoom:1} /IE6不支持通過clear:both和行高為0的方式清除浮動(dòng)，需增加zoom:1/
注意：使用時(shí)：浮動(dòng)布局的時(shí)候，在ie6環(huán)境中會(huì)出現(xiàn)雙倍邊距的bug（即元素浮動(dòng)方向和邊距方向一致的時(shí)候邊距會(huì)是原來的兩倍。）解決的辦法是給元素添加display:inline;屬性。
? 方法一、reset.css能夠重置瀏覽器的默認(rèn)屬性。不同的瀏覽器具有不同的樣式，重置能夠使其統(tǒng)一。比如說ie瀏覽器和FF瀏覽器下button顯示不同，通過reset能夠統(tǒng)一樣式，顯示相同的效果。但是很多reset是沒必要的，多寫了會(huì)增加瀏覽器在渲染頁面的負(fù)擔(dān)。
? 方法二、 normalize.css是一個(gè)可以定制的css文件，它讓不同的瀏覽器在渲染元素時(shí)形式更統(tǒng)一。
CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。
13.實(shí)現(xiàn)水平和垂直居中的方式實(shí)現(xiàn)div的水平居中和垂直居中
1.適用: 寬高已定
設(shè)置position: absolute(父元素記得設(shè)置: relative), 然后top和left設(shè)置50%, 50%, 再設(shè)置margin-left=寬/2, margin-top:寬/2
2.只適用: 固定寬高; 如果寬高隨意,想靠內(nèi)部撐開的話, 會(huì)占滿整個(gè)父div
依然是利用position：子div的上下左右都設(shè)置成0，然后margin設(shè)置auto。關(guān)鍵是要設(shè)置position：子absolute，父relative。
3.適用: 不論是否固定寬高都可用. 問題在于兼容性. ie9及以下不支持
設(shè)置父級flex屬性: display:flex; justify-content:center; align-items: center;
4.適用: 要設(shè)寬度, 否則會(huì)使得寬度為父級div的寬度
父級元素設(shè)置display:table-cell ，然后vertical-align：middle。這種方法可以設(shè)置垂直居中. 這時(shí)候只要在子元素里設(shè)置margin:auto即可實(shí)現(xiàn)水平居中
但是這種方法好像會(huì)使父元素的居中無效。
5.適用: 可不指定寬高
使用transform居中. 設(shè)置父級position:relative; 子級position:absolute. 然后top: 50%; left:50%; transform:translate(-50%,-50%)
6.適用: 指定寬高百分比
保證left和right的百分?jǐn)?shù)一樣就可以實(shí)現(xiàn)水平居中，保證top和bottom的百分?jǐn)?shù)一樣就可以實(shí)現(xiàn)垂直居中。但是這種方法不能由內(nèi)部元素自動(dòng)調(diào)節(jié)div的寬高，而是通過父元素大小控制的
7.使用display:inline-block加偽元素
box 容器通過 after或者before 生成一個(gè)高度 100% 的「備胎」，他的高度和容器的高度是一致的，相對于「備胎」垂直居中，在視覺上表現(xiàn)出來也就是相對于容器垂直居中了
8.多元素水平居中
1) 把子級div設(shè)置成display:inline-block; 然后父級div設(shè)置text-align:center; 2) 更方便靈活的做法還是使用flex-box, 設(shè)置水平居中 justify-content: center
9.使用柵格化布局
10.使用flex
? 新增各種CSS選擇器 (: not(.input): 所有class不是“input”的節(jié)點(diǎn)）
? 圓角border-radiuis
? 多列布局：multi-column layout
? 陰影和反射： multi-column layout
? 文字特效：text-shadow
? 線性漸變： gradient
? 旋轉(zhuǎn)：transform
? 縮放，定位，傾斜，動(dòng)畫，多背景：transform: scale(0.85,0.90) translate(0px, -30px) skew(-9deg, 0deg) Animation
? 題目中好像已經(jīng)寫了答案了。詳情參考后面的前端優(yōu)化
16.常見問題與解決方法1.如何清除圖片下方出現(xiàn)幾像素的空白間隙？
方法1：img{display:block;}
方法2：img{vertical-align:top;}
方法3：.test{font-size:0;line-height:0;}
.test為img的父元素
2.如何使頁面文本行距始終保持為n倍字體大小的基調(diào)？
方法：body{line-height:n;}
3.如何容器透明，內(nèi)容不透明？
方法1：容器層與內(nèi)容層并級，容器層設(shè)置透明度，內(nèi)容層通過負(fù)margin或者position絕對定位等方式覆蓋到容器層上
方法2 :正常的子父容器法，對附容器用background:rgba(0,0,0,0.3);
ps:透明度的問題：filter:alpha(opacity=20) opacity:0.2
4.如何使文本溢出邊界顯示為省略號(hào)？
.test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
5.如何使連續(xù)的長字符串自動(dòng)換行？
.test{width:150px;word-wrap:break-word;}
6.使文本溢出邊界不換行強(qiáng)制在一行內(nèi)顯示？
.test{width:150px;white-space:nowrap;}
7.去掉chrome 登錄頁中 記住密碼后，輸入框的黃色背景
回答: input:-webkit-autofill{ background-color:#fff !important; -webkit-box-shadow:0 0 0 40px #fff inset; }
8.分頁不能正常跳轉(zhuǎn)至對應(yīng)的頁面：
回答: form表單中增加 return false
9.對表格table的td明明設(shè)置了width，為何不起作用？
方法: 可能你的表格被設(shè)置了：table-layout:fixed; 去掉此屬性即可
10.audio標(biāo)簽 在chrome下支持ogg mp3 wav的模式，但在ie11下 僅支持mp3格式；但有的ie11 啥都不行，不知道為何。。。
高階 1.對less 和sass的理解定義：Less 是一門 CSS 預(yù)處理語言，它擴(kuò)充了 CSS 語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 CSS 更易維護(hù)、方便制作主題、擴(kuò)充。
優(yōu)點(diǎn)：
寫的更快，變量和函數(shù)的功能：方便制作主題，利于維護(hù)，便于擴(kuò)充。（換膚）
區(qū)別？
Bootstrap響應(yīng)式布局是利用其柵格系統(tǒng)，對于不同的屏幕采用不同的類屬性
1.行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。
2.通過行（row）在水平方向創(chuàng)建一組列（column）。
3.自己內(nèi)容應(yīng)當(dāng)放置于列（column）內(nèi)，并且，只有列可以作為行（row）的直接子元素。
4.類似.row和.col-xs-4這種預(yù)定義的類，可以用來快速創(chuàng)建柵格布局。Bootstrap源碼中定義的mixin也可以用來創(chuàng)建語義化布局。
5.通過為列設(shè)置padding屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為.row元素設(shè)置負(fù)值margin從而抵消為.container元素設(shè)置的padding，也就間接為行（row）所包含的列（column）抵消掉了padding。
6.柵格系統(tǒng)的列是通過指定1到12的值來表示其跨越范圍。例如三個(gè)等寬的列可以使用三個(gè).col-xs-4來創(chuàng)建。
7.如果一行（row）中包含了的列（column）大于12，多余的列所在的元素將作為一個(gè)整體另起一行排列。
8.柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對小屏幕覆蓋柵格類。
如下圖所示為柵格系統(tǒng)在多種屏幕上的應(yīng)用說明。
詳情請見 bootstrap官網(wǎng)：https://v3.bootcss.com/css/#grid
3.談下flexFlex 布局教程：語法篇 阮一峰
http://www.ruanyifeng.com/blo...^%$
px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。 IE無法調(diào)整那些使用px作為單位的字體大??；
em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。 em會(huì)繼承父級元素的字體大小。
rem 是相對單位，相對的是html根元素 是字體的單位
pt ：印刷業(yè)上常使用的單位，磅的意思，一般用于頁面打印排版。
關(guān)系：任意瀏覽器的默認(rèn)字體高都是16px。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?16px62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了。pt=px3/4
用法：對于只需要適配少部分手機(jī)設(shè)備，且分辨率對頁面影響不大的，使用px即可 。
vw相對于視口的寬度。視口被均分為100單位的vw 算比例的時(shí)候，不用去算父元素 然后一級一級的百分比下來
vh相對于視口的高度。視口被均分為100單位的vh
對于需要適配各種移動(dòng)設(shè)備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備。
漸進(jìn)增強(qiáng) ：針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
優(yōu)雅降級 ：一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容。
FOUC（無樣式內(nèi)容閃爍）
FOUC - Flash Of Unstyled Content 文檔樣式閃爍
而引用CSS文件的@import就是造成這個(gè)問題的罪魁禍?zhǔn)?。IE會(huì)先加載整個(gè)HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件，因此，在頁面DOM加載完成到CSS導(dǎo)入完成中間會(huì)有一段時(shí)間頁面上的內(nèi)容是沒有樣式的，這段時(shí)間的長短跟網(wǎng)速，電腦速度都有關(guān)系。
解決方法簡單的出奇，只要在
之間加入一個(gè)或者![圖片上傳中...]
前端必讀：瀏覽器內(nèi)部工作原理
*正常的網(wǎng)頁加載流程是這樣的。
網(wǎng)頁，一邊開始解析
解析過程中，發(fā)現(xiàn)