1. web前端--網頁布局（盒子模式、彈性盒子、網格）
布局的傳統解決方案，基於[盒狀模型]，於那些特殊布局非常不方便。
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
2009年誕生的這個屬性可以說是不亞於 css界一場蒸汽機誕生一樣的工業革命，它的誕生標志著馬車一樣的 float被徹底拋進歷史的垃圾堆。
通過display：flex 將對象設置為彈性盒子，以下屬性必須熟記於心。
採用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。
它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
容器屬性：
flex-direction（決定主軸的方向）
flex-wrap（決定是否換行）
flex-flow（ <flex-direction> || <flex-wrap>;）
justify-content（主軸方向對齊方式）
align-items（交叉軸方向對齊方式）
align-content（多軸情況下沿交叉軸對齊方式）
項目屬性：
order：數值越小，排列越靠前，默認為0。
flex-grow:項目的放大比例，默認為0
flex-shrink:項目的縮小比例，默認為1
flex-basis:項目占據主軸的大小
flex：flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto
兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)
align-self：單個項目有與其他項目不一樣的對齊方式
flex-box無疑是布局上面的神器
網格布局同樣是布局方面的神器，目前不太常用。
display:grid; 設置網格
必須使用 display: grid 將容器元素定義為一個 grid(網格) 布局，使用 grid-template-columns 和 grid-template-rows 設置 列 和 行 的尺寸大小，然後通過 grid-column 和 grid-row 將其子元素放入這個 grid(網格) 中
網格屬性：
display：grid| subgrid
grid-template-columns：設置列
grid-template-rows：設置行
grid-template-areas：設置區域
grid-template：none | subgrid | <grid-template-rows> / <grid-template-columns>;前面三個屬性合體
grid-column-gap：設置列間距
grid-row-gap：設置行間距
grid-gap：<grid-row-gap> <grid-column-gap>;前兩個屬性合體
justify-items：start | end | center | stretch;設置項目水平方向對齊方式
align-items：start | end | center | stretch;設置項目垂直方向對齊方式
justify-content：start | end | center | stretch | space-around | space-between | space-evenly; 設置網格水平對齊方式
align-content： start | end | center | stretch | space-around | space-between | space-evenly; 設置網格垂直對齊方式
grid-auto-columns：自動補齊列
grid-auto-rows：自動補齊行
grid-auto-flow：row | column | row dense | column dense
grid
網各項屬性：
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column：項目放置列
grid-row：項目放置行
grid-area
justify-self
align-self
2. 前端頁面布局有幾種
常用flex布局，也有用浮動布局的，還有定位布局，表格布局
3. 前端布局————長度比例
這是一些不太惹人注意的知識，但是掌握了他會對你的前端不具有很大幫助。
在前端布局時，我們將長度單位分為兩種，一種是絕對單位，一種是相對單位。
上述這些就是絕對單位，這些單位在現實中有絕對定義，不會隨著你的布局平台大小比例變化而變化 （ps：1inch = 2.54cm）
沒錯，你沒有看錯，px是一個相對單位，px是Pixel的縮寫,代表的是圖像上最小的一個點的大小，他會因為圖像大小的不同而改變， 比如1024x1024的一張圖，當他的長寬擴大一倍，而解析度不變（即1024x1024），那麼他的每個像素的大小都將擴大一倍
通常我們所指的4.5寸、5,0寸這些手機屏幕的大小指的是手機屏幕對角線的距離 （只包括可顯示部分，邊框部分不包括）
我們在開發移動設備的網站時，最常見的的一個動作就是把下面這個東西復制到我們的head標簽中：↓↓↓
該meta標簽的作用是讓當前viewport的寬度等於設備的寬度， 同時不允許用戶手動縮放
（ps：移動端下定寬寫法：viewport width=定值（設計稿寬），我們不設置縮放相關屬性，移動端瀏覽器會自動縮放頁面以適配屏幕）
rem 和 em 單位是由瀏覽器基於你的設計中的字體大小計算得到的像素值。em 單位基於使用他們的元素的字體大小。rem 單位基於 html 元素的字體大小。em 單位可能受任何繼承的父元素字體大小影響。rem 單位可以從瀏覽器字體設置中繼承字體大小。
（ps：一般情況下，不要給字體大小用rem）
4. 現在前端流行什麼頁面布局方式
前端常用頁面布局分為下面幾種：
1.靜態布局
給頁面元素設置固定的寬度和高罩隱度，單位用px。窗口發生變化時，會出現滾動條，內容會被遮擋。
優點：簡單方便，不存在兼容問題。
缺點：網頁無法根據用戶設備屏幕的寬度進行自適應。
2.流式布局
也叫100%布局。寬度單位為百分比。流式布局常用的設計答孫模板:左側固定+右側自適應，左右固定寬度+中間自適應。
優點：可以適應不同尺寸的屏幕
缺點：如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定
3.響應式布局
使用meta標簽設置，頁面元素寬度隨窗口調整自動適配。採用自適應布局和流式布局的綜物舉廳合方式，為不同屏幕解析度范圍創建流式布局。
優點：適應pc和移動端，如果足夠耐心，效果完美
缺點：
（1）媒體查詢是有限的，也就是可以枚舉出來的，只能適應主流的寬高。
（2）要匹配足夠多的屏幕大小，工作量不小，設計也需要多個版本。
4.彈性布局
就是採用css3中的flex屬性。
優點：簡單、方便、快速
缺點：CSS3新特性,瀏覽器兼容性非常頭疼。而且手機瀏覽器對flex的支持也不是很理想。
5. 網頁製作的結構布局有哪些
布局就是以最合適瀏覽的方式將圖片和文字排放在頁面的不同位置。不同的製作者會有不同的布局設計。網頁布局有以下幾種常見結構：
1.「同」字型結構布局
所謂同字型就夠就是指頁面頂部為「網站標志+廣告條+主菜單」或主菜單，下方左側為二級欄目條，右側為鏈接欄目條，屏幕中間顯示具體內容的布局。
這種布局的優點是充分利用版面，頁面結構清晰，左右堆成，主次分明，信息量大；缺點是頁面擁擠，太規矩呆板，如果細節色彩上缺少變化調劑，很容易讓人感到單調缺乏。
2.「國」字型布局
「國」字型布局是在「同」字型布局基礎上演化而來的，在保留「同」字型的同時，在頁面的下方增加一橫條狀的菜單或廣告，是一些大型網站所喜歡的類型。一般最上面是網站標題及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等。這種結構是在網上見到的最多的一種結構類型。
這種布局的優點是充分利用版面，信息量大，與其他頁面的鏈接切換方便，缺點是頁面擁擠，四面封閉，令人感到憋氣。
3.T型布局
這是一個形象的說法，是指頁面的頂部是「網站標志+廣告條」，左面是主菜單，右面是主要內容。這種布局的優點是頁面結構清晰、主次分明，是初學者最容易上手的布局方法；缺點是頁面呆板，如果不注意細節上的色彩，很容易讓人「看之無味」。
4.「三」字型布局
這種布局多用於國外站點，國內用得不多。特點是在頁面上有橫向兩條色塊，將頁面整體分割為但部分，色塊中大多放廣告條、更新和版權提示。
5.對比布局
顧名思義，這種布局採用左右或者上下對比的方式：一半深色，一半淺色。一般用於設計型站點。優點是視覺沖擊力強；缺點是將兩部分有機地結合比較困難。
6.POP布局
POP引自廣告術語，是指頁面布局像一張宣傳海報，一一張精美的圖片作為頁面的設計中心。這種類型基本上是出現在一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個「進入」的鏈接，甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種布局大部分出現在企業網站和個人主頁，如果處理得好的話，會給人帶來賞心悅目的感覺。
7.Flash布局
這種布局是指整個或大部分幅面的網頁本身就是一個Flash動畫，它本身就是動態的，畫面一般不叫絢麗、有趣，是一種比較新潮的布局方式。其實這與封面型結構是類似的，只是差畢橡這種類型才採用了目前非常流行的Flash，與封面型不同的是，由於Flash強大的功能，頁面所表達的信息更豐富，其視覺效果及聽覺效果如果處理得當，絕不差於虛旁傳統的多媒體。不同性質的網站，其頁面內容安排是不同的。一般網頁的基本內容包括標題、網站標識圖案（LOGO）、頁眉、頁腳、主體內容、廣告欄等。下面簡單說明：A、頁面標題在站點的沒一個頁面中都有一個標題，用來提示頁面的主要內容，著一信息將出現在瀏覽器的標題欄中，而不是在頁面的布局中。它的重要作用就是引導訪問者清楚地瀏覽網站的各項內容，不至於迷失方向。標題的加入在HTML語言中比較簡單
電子商務網站的主頁內容布局授課：花小琴常見的網頁布局結構國字型布局——國字型布局由同字型布局進化而來，因布局結構與漢字國相似而得名。其頁面的最上部分一般放置網站的標志和導航欄或Banner廣告，頁面中間主要放置網站的主要內容，最下部分一般放置網站的版權信息和聯系方式等。常見的網頁布局結構T型布局——T型布局結構因與英文大寫字母T相似而得名。其頁面的頂部一般放置橫網站的標志或Banner廣告，下方左側是導航欄菜單，下方右側則用於放置網頁正文等主要內容。常見的網頁布局結構標題正文型——標題正文型布局的布局結構一般用於顯示文章頁面、新聞頁面和一些注冊頁面等。常見的網頁布局結構左右框架型布局——左右框架型布局結構是一些大型論壇和企業經常使用的一種布局結構。其布局結構主要分為左右兩側的頁面。左側一般主要為導航欄鏈接，右側則放置網站的主要內容常見的網頁布局結構上下框架型——上下框架型布局與前面的左右框架型布局類似。其區別僅在於是一種上下分為兩頁的框架。常見的網頁布局結構綜合框架型——綜合框架型布局是結合左右框架型布局和上下框架型布局的頁面布局技術常見的網頁布局結構POP布局——POP布局是一種頗具藝術感和時尚感的網頁布局方式。頁面設計通常以一張精美的海報畫面為布局的主體。常見的網頁布局結構FLASH布局——FLASH布局是指網頁頁面以一個或多個Flash作為頁面主體的學習前端第一步：劃分網頁結構，網頁的結構的劃分應該遵循哪些原則，如何去劃分網頁的結構呢？
對於一個前端初學者，第一步就是要學會如何劃分一個網頁的結構。當設計師給到你一張設計圖，你需要根據這張圖做出一個符合標準的頁面，這里所說的標准，即w3c標准，參考w3school在線教程。那麼做出一個完整的符合標準的網頁第一步就是要劃分網頁的結構。一般來講，網頁結構的劃分需要遵循幾個原則：
一、自上而下原則
因為瀏覽器在渲染一個網頁的順序是自上而下的。這里提到了渲染這一個詞，所謂的渲染就是瀏覽器將代碼轉換為頁面顯示內容的過程。瀏覽器會自上而下讀取你寫的代碼並自上而下的顯示。
二、從左至右原則
在自上而下的同時，同一行的內容是從左至右渲染，所以在劃分結構的時候有從左至右的順序。
三、一像素原則
這個原則對於初學者來說必須堅持，但也並不是說無論什麼時候都得死認這個道理。前期我們在劃分網頁的時候一定要劃分准確，尤其是橫向。試想，如果外面的盒子寬度是1200像素，裡面兩個盒子一個600像素另一個601像素，加起來超過了父級的寬度那麼必然第二個盒子會換到下一行進行顯示。
在說完上述三個原則過後有些人就會一味地追求遵循這些原則，比如在劃分結構的時候一定要分為上下部分，但是比如下面我截取這個網頁的一部分，圖片和文字其實是屬於一個整體，文字是對圖片的說明，所以就不應該分為上下，而應該水平方向劃分，每一個圖文作為一部分內容，水平分為四部分：
我們說一般網頁有header（頭部區）、banner（廣告橫幅區）、main（主體內容區）、footer（底部區），單頁並非所有網頁都是這樣，有些網頁沒有banner但是初學者容易將header下面那一部分硬劃分為banner，有些網頁除了這幾部分還會有比如icon等區域由喜歡將他們劃分到main中去。
說到main區，這個結構劃分就多種多樣了。有些網頁是有一個從左到右通欄的背景色甚至背景圖片，這樣我們結構的劃分也應該有外層一個通欄的盒子，將背景色或者背景圖給他，裡面再嵌套一個inner盒，給可視區域的固定寬度並居中。如果沒有通欄的背景那麼這個時候是不需要給通欄的盒子，直接main區給固定寬度居中就好了。
那麼在結構劃分的時候有些盒子區域之間的空隙怎麼去劃分這也是初學者最容易犯難的問題。其實嚴格意義來講這些空白在結構劃分的時候並不會造成影響，因為空白區域在都可以用代碼來實現。不過一些文字區域你不能貼著文字的上下來劃分，因為文字都是自帶行高的。
另外，有些地方可能會有一部分小圖片或者一部分內容覆蓋在外面大盒子上，這部分在劃分結構的時候可以不用管，因為後期在代碼實現的時候我們可以利用定位技術實現。
6. 前端面試題系列之-CSS及頁面布局篇
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。可以用簡單的方式滿足很多常見的復雜的布局需求。它的優勢在於開發人員只是聲明布局應該具有的行為，而不需要給出具體的實現方式。瀏覽器會負責完成實際的布局。該布局模型在主流瀏覽器中都得到了支持。
採用flex布局的元素，成為flex容器。它的所有子元素自動成為容器成員，稱為flex項目。常用的，設置到容器上的屬性有：
設置到項目上的屬性：
(Block Formatting Context)塊級格式化上下文。BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素，反之也如此.並且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。
上述方法都可以創建BFC，但是會帶來一些負面影響：
::before是css3的寫法，:before是css2的寫法，用來設置對象前的內容
:before的兼容性要比::before好
更准確的說法
1、transition 是過渡，是樣式值的變化的過程，只有開始和結束；animation 其實也叫關鍵幀，通過和 keyframe 結合可以設置中間幀的一個狀態；
2、animation 配合 @keyframe 可以不觸發時間就觸發這個過程，而 transition 需要通過 hover 或者 js 事件來配合觸發；
3、animation 可以設置很多的屬性，比如循環次數，動畫結束的狀態等等，transition 只能觸發一次；
4、animation 可以結合 keyframe 設置每一幀，但是 transition 只有兩幀；
常規方法
不需要使用transform屬性時
webkit內核
參考鏈接：
CSS實現不換行/自動換行/文本超出隱藏顯示省略號
object-fit CSS 屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框。這個CSS屬性可以達到最佳最完美的居中自動剪裁圖片的功能
@import規則一定要先於除了@charset的其他任何CSS規則。
不推薦使用@import:
因為瀏覽器的兼容的問題，不同瀏覽器有些標簽的默認值是不同的，如果沒有CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
偽元素和偽類的區別總結
css繼承指的是被包在內部的標簽將擁有外部標簽的樣式性，即子元素可以繼承父元素的屬性。
相關鏈接：
CSS 繼承，哪些屬性能繼承，哪些不能
z-index可以改變元素層疊順序，z-index較大的會疊加在z-index較小的元素上方。z-index值相同時，則按照文檔流順序，後面的覆蓋前邊的。
px就是pixel的縮寫，意為像素。px就是一張圖片最小的一個點，一張點陣圖就是千千萬萬的這樣的點構成的，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。注意css中的1px並不一定是物理像素的一個像素塊，需要根據DPR計算，對應多少物理像素塊
設備像素比：dpr = 物理像素 / 邏輯像素(px)，例如，iPhone6的dpr為2，物理像素750（x軸）,則它的邏輯像素為375
參考物是父元素的font-size，具有繼承的特點。如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
css3新單位，相對於根元素html（網頁）的font-size，不會像em那樣，依賴於父元素的字體大小，而造成混亂。
css3新單位，viewpoint width的縮寫，視窗寬度，1vw等於視窗寬度的1%。舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。
1英寸（inch）=2.54厘米（cm）
手機對角線的長度換算成英寸
屏幕橫向和縱向的像素點
1px即代表一個物理像素點/像素塊
PPI，是每英寸可以顯示的像素點的英文縮寫。如果說上面解析度是一個質量總量的概念，那麼，ppi就是密度的概念。我們可以通過屏幕的像素總量除以屏幕大小來計算屏幕的PPI，公式如下： a：橫向像素數量，b：縱向像素數量，c：屏幕尺寸（英寸）
1px與多少厘米之間是不能直接劃等號的，需要看解析度。
一般電腦的像素解析度是72ppi，計算公式： (((1**2 + 1**2)**0.5)/72)*2.54 ，此時1px=0.0498cm，1cm=25px；
很多手機是300ppi，計算公式： (((1**2 + 1**2)**0.5)/300)*2.54 ，此時1px=0.0119cm。
參考鏈接：
畫一條0.5px的線
在繼承性上：
一開始針對低版本的瀏覽器構建頁面，滿足最基本的功能，再針對高級瀏 覽器進行效果，交互，追加各種功能以達到更好用戶體驗,換句話說，就是以最低要求，實現最基礎功能為基本，向上兼容。以css為例，以下這種寫法就是漸進增強。
一開始針對一個高版本的瀏覽器構建頁面，先完善所有的功能。然後針對各個不同的瀏覽器進行測試，修復，保證低級瀏覽器也有基本功能 就好，低級瀏覽器被認為「簡陋卻無妨 (poor, but passable)」 可以做一些小的調整來適應某個特定的瀏覽器。但由於它們並非我們所關注的焦點，因此除了修復較 大的錯誤之外，其它的差異將被直接忽略。也就是以高要求，高版本為基準，向下兼容。同樣以css為例，優雅降級的寫法如下。
漸進增強，開發時間長，成本高，優雅降級，節約成本，開發周期短。
7. 前端面試題（1）——頁面布局
我這邊總結了五種方法， 如有不正確，歡迎批評指正～
8. 前端不知道怎麼布局
在談WEB前端怎麼布局前，我們先梳理前端的布局類型，具體有以下幾種：
1.靜態布局：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見於pc端。
2.流式布局：布局特點是屏幕解析度變化時，頁面里元素的大小會變化而但布局不變。
3.自適應布局：自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。
4.響應式布局：布局特點是每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變。
那麼我們如何布局呢？通過以下幾點來選擇布局。
1.如果只做電腦端，最好的選擇是靜態布局。
2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，通過一份css+一份js調節font-size就搞定。
3.如果電腦端，移動端要兼容，而且要求很高，那麼響應式布局還是最好的選擇。前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的布局。
9. 前端布局需要學習什麼知識呀
css、html和table。
前端布局使用css，即層疊樣式表，控制頁面的顯示。以前是使用table進行布局的，但由於table布局不便於維護，每次修改的時候都需要更改頁面結構。所以後來就逐漸被css所代替，在需要使用表格的時候才使用table。
除了要使用css之外，還要使用html。html用來表明頁面的結構，css決定頁面結構的顯示方式。
10. 關於頁面布局（前端也就是頁面布局了吧（胡說））
一個前端連頁面都搞不好，真的就有點--------（廢物了，我說的我額）
我在做這個小程序頁面的時候，很快基本一會兒就搞定了，功能的話 基本上兩天就好了，但是！！我竟然調試了將近一個月。設計圖是我在做完之後才給的，當然我並不是說設計圖給我晚，而是！！我的布局一開始就寫的太隨意的，導致後期在蘋果和各種安卓機型上面 就出現了各種錯亂，又不想重新寫 又要兼容各種機型（說實話，當時我已經開始討厭我們的軟體測試了，因為他天天比著尺子讓我調試，我每天最不想面對的就是他了）
所以在做之前一定要先規劃 header就是header body就是body fotter就是底部 ，該浮動千萬別定位，改定位千萬別用margin:100 200 300的去調，個人認為 超過100就會出現問題了，pc端的話，就不說了。
形式方向那一塊在做的時候 我就是以為是一整塊 ，讓他在那裡擠著堆著，最後導致 上下兩個方向 就是在各種機子上面位置有問題。最後又重新在方向裡面設了一個塊 才解決了問題，還有就是濫用百分比，導致頁面咋不同的手機上面會左右滑動，那用戶體驗真的渣炸了，我找出問題的地方找了半個小時（浪費時間），
還有就是不要頻繁調重復的介面。能及時存下來數據就及時存下來，如果不這樣的話，就能著測試鄙視你吧。（沒有例如，我不想打字了 ）