整理后刪除#
-
目錄
position有幾種损同，absolute和relative的區(qū)別
display的幾個(gè)屬性栈戳，及其區(qū)別
display:none與visibility:hidden的區(qū)別
瀏覽器清除浮動(dòng)的方式及其原理
元素垂直居中和水平居中的方法
CSS盒子模型
BFC
src與href的區(qū)別
CSS選擇器的優(yōu)先級
每個(gè)HTML的Doctype有什么作用
如何理解web語義化
SEO
幾種常見的布局的方式及其實(shí)現(xiàn)
flex布局
px碾褂、em、rem的區(qū)別
為什么要使用css sprites
-
定位類型
-
static該關(guān)鍵字指定元素使用正常的布局行為憔狞，即元素在文檔常規(guī)流中當(dāng)前的布局位置。此時(shí)
top,right,bottom,left和z-index屬性無效彰阴。 -
relative該關(guān)鍵字下瘾敢，元素先放置在未添加定位時(shí)的位置，再在不改變頁面布局的前提下調(diào)整元素位置（因此會(huì)在此元素未添加定位時(shí)所在位置留下空白）尿这。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素?zé)o效簇抵。
-
absolute不為元素預(yù)留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移射众，來確定元素位置碟摆。絕對定位的元素可以設(shè)置外邊距（margins），且不會(huì)與其他邊距合并叨橱。
相對定位的元素并未脫離文檔流典蜕，而絕對定位的元素則脫離了文檔流。在布置文檔流中其它元素時(shí)罗洗，絕對定位元素不占據(jù)空間愉舔。絕對定位元素相對于最近的非 static 祖先元素定位。當(dāng)這樣的祖先元素不存在時(shí)伙菜，則相對于ICB（inital container block, 初始包含塊）轩缤。
-
fixed
不為元素預(yù)留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置贩绕。元素的位置在屏幕滾動(dòng)時(shí)不會(huì)改變火的。打印時(shí)，元素會(huì)出現(xiàn)在的每頁的固定位置淑倾。
fixed屬性會(huì)創(chuàng)建新的層疊上下文馏鹤。當(dāng)元素祖先的transform屬性非none時(shí)，容器由視口改為該祖先娇哆。固定定位與絕對定位相似湃累，但元素的包含塊為 viewport 視口勃救。
-
sticky盒位置根據(jù)正常流計(jì)算(這稱為正常流動(dòng)中的位置)，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位脱茉。在所有情況下（即便被定位元素為
table 時(shí)），該元素定位均不對后續(xù)元素造成影響垄开。當(dāng)元素 B 被粘性定位時(shí)琴许，后續(xù)元素的位置仍按照 B 未定位時(shí)的位置來確定。position: sticky對table元素的效果與position: relative相同溉躲。粘性定位是相對定位和固定定位的混合榜田。元素在跨越特定閾值前為相對定位，之后為固定定位锻梳。
inherit 就不說了
inline一個(gè)或多個(gè)行內(nèi)元素盒block塊元素盒list-item該元素生成一個(gè)容納內(nèi)容和單獨(dú)的列表行內(nèi)元素盒的塊狀盒箭券。 (加黑點(diǎn))inline-block一個(gè)塊狀盒，該塊狀盒隨著周圍內(nèi)容流動(dòng)疑枯，如同它是一個(gè)單獨(dú)的行內(nèi)盒子（表現(xiàn)更像是一個(gè)被替換的元素）inline-tableinline-table值在HTML中沒有對應(yīng)元素辩块。它的行為就像一個(gè)HTML中的table元素，但是作為內(nèi)聯(lián)框荆永，而不是塊級框废亭。 表格框內(nèi)是一個(gè)塊級上下文。tabletable-captiontable-celltable-columntable-column-grouptable-footer-grouptable-header-grouptable-rowtable-row-group-
Flexbox模型值
flexinline-flex
-
柵格盒模型值
gridinline-grid
Ruby（東亞文字注音或注釋）格式化模型值
run-incontentsbox:在元素上設(shè)置該屬性具钥，可使其子代排列在同一水平上豆村，類似display:inline-block;。
flow-root
-
display:none關(guān)閉一個(gè)元素的顯示（對布局沒有影響）骂删；其所有后代元素都也被會(huì)被關(guān)閉顯示掌动。文檔渲染時(shí)，該元素如同不存在宁玫。visibility: visible隱藏元素粗恢，但是其他元素的布局不改變，相當(dāng)于此元素變成透明欧瘪。要注意若將其子元素設(shè)為visibility: visible适滓，則該子元素依然可見。 -
元素垂直居中和水平居中的方法
-
CSS盒子模型
CSS柵格系統(tǒng)與彈性盒模型：實(shí)踐比較
-
塊格式化上下文（Block Formatting Context恋追，BFC） 是Web頁面的可視化CSS渲染的一部分凭迹，是布局過程中生成塊級盒子的區(qū)域，也是浮動(dòng)元素與其他元素的交互限定區(qū)域苦囱。
下列方式會(huì)創(chuàng)建塊格式化上下文：
根元素或包含根元素的元素
浮動(dòng)元素（元素的
float不是none）絕對定位元素（元素的
position為absolute或fixed）行內(nèi)塊元素（元素的
display為inline-block）表格單元格（元素的
display為table-cell嗅绸，HTML表格單元格默認(rèn)為該值）表格標(biāo)題（元素的
display為table-caption，HTML表格標(biāo)題默認(rèn)為該值）匿名表格單元格元素（元素的
display為table撕彤、``table-row鱼鸠、table-row-group猛拴、``table-header-group、``table-footer-group（分別是HTML table蚀狰、row愉昆、tbody、thead麻蹋、tfoot的默認(rèn)屬性）或inline-table）overflow值不為visible的塊元素display值為flow-root的元素contain值為layout跛溉、content或strict的元素彈性元素（
display為flex或inline-flex元素的直接子元素）網(wǎng)格元素（
display為grid或inline-grid元素的直接子元素）多列容器（元素的
column-count或column-width不為auto，包括 ``column-count為1）column-span為all的元素始終會(huì)創(chuàng)建一個(gè)新的BFC扮授，即使該元素沒有包裹在一個(gè)多列容器中（標(biāo)準(zhǔn)變更芳室，Chrome bug）。
創(chuàng)建了塊格式化上下文的元素中的所有內(nèi)容都會(huì)被包含到該BFC中刹勃。
塊格式化上下文對浮動(dòng)定位（參見
float）與清除浮動(dòng)（參見clear）都很重要堪侯。浮動(dòng)定位和清除浮動(dòng)時(shí)只會(huì)應(yīng)用于同一個(gè)BFC內(nèi)的元素。浮動(dòng)不會(huì)影響其它BFC中元素的布局荔仁，而清除浮動(dòng)只能清除同一BFC中在它前面的元素的浮動(dòng)伍宦。外邊距折疊（Margin collapsing）也只會(huì)發(fā)生在屬于同一BFC的塊級元素之間。 -
HTML中href乏梁、src區(qū)別
1.src 是指向物件的來源地址雹拄，是引入。在 img掌呜、script滓玖、iframe 等元素上使用。 2.href 是超文本引用质蕉，指向需要連結(jié)的地方势篡，是與該頁面有關(guān)聯(lián)的，是引用模暗。在 link和a 等元素上使用禁悠。
使用區(qū)別： src通常用作“拿取”（引入），href 用作 "連結(jié)前往"（引用）兑宇。
[圖片上傳失敗...(image-f2be04-1526063599539)]
-
CSS選擇器的優(yōu)先級
還有書上的
下面列表中碍侦，選擇器類型的優(yōu)先級是遞增的：
類型選擇器（type selectors）（例如, h1）和 偽元素（pseudo-elements）（例如, ::before）
類選擇器（class selectors） (例如,
.example)，屬性選擇器（attributes selectors）（例如,[type="radio"]）隶糕，偽類（pseudo-classes）（例如, :hover）ID選擇器（例如, #example）
通配選擇符（universal selector）(
*), 關(guān)系選擇符（combinators） (+,>,~, '') 和 否定偽類（negation pseudo-class）(:not()) 對優(yōu)先級沒有影響瓷产。（但是，在 :not() 內(nèi)部聲明的選擇器是會(huì)影響優(yōu)先級）枚驻。給元素添加的內(nèi)聯(lián)樣式 (例如,
style="font-weight:bold") 總會(huì)覆蓋外部樣式表的任何樣式 濒旦，因此可看作是具有最高的優(yōu)先級。當(dāng)在一個(gè)樣式聲明中使用一個(gè)
!important規(guī)則時(shí)再登，此聲明將覆蓋任何其他聲明尔邓。雖然技術(shù)上!important與優(yōu)先級無關(guān)晾剖，但它與它直接相關(guān)。使用
!important是一個(gè)壞習(xí)慣梯嗽，應(yīng)該盡量避免齿尽，因?yàn)檫@破壞了樣式表中的固有的級聯(lián)規(guī)則 使得調(diào)試找bug變得更加困難了。當(dāng)兩條相互沖突的帶有!important規(guī)則的聲明被應(yīng)用到相同的元素上時(shí)灯节，擁有更大優(yōu)先級的聲明將會(huì)被采用循头。一些經(jīng)驗(yàn)法則：
一定要優(yōu)化考慮使用樣式規(guī)則的優(yōu)先級來解決問題而不是
!important只有在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用
!important永遠(yuǎn)不要在全站范圍的 css 上使用
!important-
永遠(yuǎn)不要在你的插件中使用
!important取而代之，你可以：
更好地利用CSS級聯(lián)屬性
使用更具體的規(guī)則显晶。在您選擇的元素之前贷岸，增加一個(gè)或多個(gè)其他元素壹士，使選擇器變得更加具體磷雇，并獲得更高的優(yōu)先級。
每個(gè)HTML的Doctype有什么作用
## 定義和用法
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行躏救，位于 <html> 標(biāo)簽之前唯笙。
<!DOCTYPE> 聲明不是 HTML 標(biāo)簽；它是指示 web 瀏覽器關(guān)于頁面使用哪個(gè) HTML 版本進(jìn)行編寫的指令盒使。
在 HTML 4.01 中崩掘，<!DOCTYPE> 聲明引用 DTD，因?yàn)?HTML 4.01 基于 SGML少办。DTD 規(guī)定了標(biāo)記語言的規(guī)則苞慢，這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。
HTML5 不基于 SGML英妓，所以不需要引用 DTD挽放。
提示：請始終向 HTML 文檔添加 <!DOCTYPE> 聲明，這樣瀏覽器才能獲知文檔類型蔓纠。
- 如何理解web語義化
**語義化**辑畦。那么什么叫做語義化呢，說的通俗點(diǎn)就是：明白每個(gè)標(biāo)簽的用途（在什么情況下使用此標(biāo)簽合理）比如腿倚，網(wǎng)頁上的文章的**標(biāo)題**就可以用標(biāo)題標(biāo)簽纯出，網(wǎng)頁上的各個(gè)欄目的**欄目名稱**也可以使用標(biāo)題標(biāo)簽。文章中內(nèi)容的段落就得放在**段落標(biāo)簽**中敷燎，在文章中有想強(qiáng)調(diào)的文本暂筝，就可以使用 em 標(biāo)簽表示強(qiáng)調(diào)等等。
講了這么多語義化硬贯，但是語義化可以給我們帶來什么樣的好處呢乖杠？
\1\. 更容易被搜索引擎收錄。
\2\. 更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容澄成。
[知乎](https://www.zhihu.com/question/20455165)
[參考](https://blog.csdn.net/li2274221/article/details/25188497)
[參考2](http://www.html5jscss.com/html5-semantics-section.html)
## New Semantic Elements in HTML5
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer.
HTML5 offers new semantic elements to define different parts of a web page:
* `<article>`
* `<aside>`
* `<details>`
* `<figcaption>`
* `<figure>`
* `<footer>`
* `<header>`
* `<main>`
* `<mark>`
* `<nav>`
* `<section>`
* `<summary>`
* `<time>`
[圖片上傳失敗...(image-de67dd-1526063599539)]
* * *
- SEO(Search Engine Optimization)
[wiki](https://zh.wikipedia.org/wiki/%E6%90%9C%E5%B0%8B%E5%BC%95%E6%93%8E%E6%9C%80%E4%BD%B3%E5%8C%96)
[百度](https://baike.baidu.com/item/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E4%BC%98%E5%8C%96/3132?fr=aladdin)
[谷歌](https://support.google.com/webmasters/answer/35291?hl=zh-Hans)
但是經(jīng)過多年的搜索引擎算法的調(diào)整胧洒，現(xiàn)在較重要的影響標(biāo)簽為：
* `<title>`
* `<meta>`
* `<h1>`
* `<img>`中的 alt屬性
- 幾種常見的布局的方式及其實(shí)現(xiàn)
position
float
流動(dòng)
網(wǎng)格
圣杯
flex
[圣杯布局畏吓、雙飛翼布局、Flex布局和絕對定位布局的幾種經(jīng)典布局的具體實(shí)現(xiàn)示例](https://blog.csdn.net/wangchengiii/article/details/77926868)
- flex布局
[Flex 布局教程：語法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
- px卫漫、em菲饼、rem的區(qū)別
[基于vw等viewport視區(qū)單位配合rem響應(yīng)式排版和布局](http://www.zhangxinxu.com/wordpress/2016/08/vw-viewport-responsive-layout-typography/)
px是固定像素，em是相對父元素字體大小的百分比,比如div設(shè)成15px列赎，div的子節(jié)點(diǎn)1em就是15px,2em就是30px宏悦。 rem和em差不多，但是是相對于[html元素](https://www.baidu.com/s?wd=html%E5%85%83%E7%B4%A0&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dWm1Khm1wbmvnvuyRLrjnk0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHnsn1nYn1bLnHbYP1m4n164rf)(文檔根元素document.documentElement)而不是父元素包吝。
[徹底弄懂css中單位px和em,rem的區(qū)別](http://www.cnblogs.com/leejersey/p/3662612.html)
[綜合指南: 何時(shí)使用 Em 與 Rem](https://webdesign.tutsplus.com/zh-hans/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984)
- 為什么要使用css sprites
CSSSprites在國內(nèi)很多人叫css精靈饼煞，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中去诗越，這樣一來砖瞧，當(dāng)訪問該頁面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來了嚷狞。對于當(dāng)前網(wǎng)絡(luò)流行的速度而言块促，不高于200KB的單張圖片的所需載入時(shí)間基本是差不多的，所以無需顧忌這個(gè)問題床未。
[翻譯 – 高性能網(wǎng)站需避免的7個(gè)錯(cuò)誤](http://www.zhangxinxu.com/wordpress/2011/11/seven-mistakes-that-make-websites-slow/)
**合并圖片為Sprites**
CSS Spriting已經(jīng)變成主流技術(shù)竭翠。其做法是將很多個(gè)公共圖片合并為一個(gè)大的圖片文件，然后你通過CSS控制位置讓圖片需要的地方顯示薇搁。于是斋扰，告別N多圖片，現(xiàn)在只有一個(gè)啃洋。
事先提醒一句传货，這個(gè)技術(shù)的維護(hù)是很折騰的，因?yàn)榧词故莻€(gè)很小的更改也要更新整個(gè)圖片以及CSS裂允，甚至是HTML损离。幸運(yùn)的是，CSS spriting自動(dòng)化工具如[SpriteMe](http://spriteme.org/), [Compass](http://compass-style.org/help/tutorials/spriting/), [Yottaa](http://www.yottaa.com/web-performance-optimization)
