A. 前端開發應該知道的幾個CSS網頁表單布局技巧
1、絕對定位
在絕大過程中，想確定一個元素在網站當中的固定位置，絕對定位是實現這個方式的解決辦法。在網頁當中，絕對定位可精確的控制元素在網頁當中的位置，我們可使用頂部、底部、左側和右側，附上一個像素值來控制元素所在的位置。
position:absolute;top:50px;right:50px
上面的CSS設置一個元素的位置從瀏覽器的頂部和右邊保持50px。你也可以在div內使用絕對定位。
2、覆蓋所有樣式
寫CSS的時候都應該知道，當你想給一個元素添加一個新的CSS樣式，但這個樣式之前已經被定義過了。此時我們可以採用！important來定義。
例如，如果我想在我的網站的特定部分的H3標題是紅色而不是黃色，可以使用下面的CSS：
.section h3 {color:red !important; }
3、居中
居中分很多情況，一般會分成文本居中和DIV的內容居中。
文本居中
文本居中使用text-align：center; 。如果想讓文本在左右兩側，可以使用左側或右側。
DIV內容
DIV內容居中跟文本居中不一樣。CSS可以這樣定義：
#div1 { display: block; margin: auto; width: anything under 100% }
把寬度設置為「100％以下」的原因是因為如果它是100％寬度，那麼如果是全寬度，並且不需要居中。最好有一個固定的寬度，如60％或550像素等。
4、垂直對齊（對於一行文本）
要使菜單的高度和文本的行高一致，可以這么設置：
.nav li{line-height:50px; height:50px;}
5、懸停效果
這適用於按鈕，文本鏈接，網站的部分，圖標等等。如果你想做一個懸停效果，可以試試：
.entry h2{font-size:36px; color:#000; font-weight:800;} .entry h2:hover{color:#ffeb3b;}
這個功能可以讓你的h2標簽的顏色從黑色變成黃色。
6、懸停效果過渡
對於懸停效果，如使用菜單或網站上的圖像，我們肯定不希望顏色快速貼近結果，所以我們可以通過使用時間變化來達到過渡的效果。
.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}
這就使得樣式上的改變，可以是從黑色變黃色的過渡時間是0.5秒，而不是立即變成黃色。這使得懸停效果更加和諧而不會顯得太突兀。
7、a標簽的狀態
我們在遇到a標簽的時候，一定要給a標簽做樣式定義，否則特別容易造成用戶在使用上的困惑。通過樣式可以讓用戶知道這個鏈接是否被點擊過，更利於用戶體驗。
a:link {color: blue; } a:visited {color: red; }
8、輕松調整圖像大小以適應
說到這個樣式，我之前不知道可以通過以下方式達到圖片的自適應效果。作為一個新手，我相信這個效果肯定有很多人都想做，當然，我提供的方法也只是其中的一種：
img {max-width:100%;height:auto;}
這個樣式意味著最大的圖像可能是100％，並根據圖像寬度自動計算高度。在某些情況下，您可能還必須指定寬度為100％。
9、父級元素和子元素
如果ni不希望選擇任意的後代元素，而是希望縮小范圍，只選擇某個元素的子元素，請使用子元素選擇器：
h1 > strong {color:red;}
特殊情況下你可能會想定義第N個子元素的樣式，這樣就可以用到下面這個樣式：li:nth-child(n)
具體的使用方法可以去w3school上看。
10、將CSS應用於多個類或選擇器
如果你想要在所有圖片，博客部分和側邊欄上添加相同的邊框。你不必寫出相同的CSS樣式重復3次。只需列出這些項目，用逗號分隔：
.blog,img,.sidebar {border: 1px solid #000;}
B. 前端面試題系列之-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為例，優雅降級的寫法如下。
漸進增強，開發時間長，成本高，優雅降級，節約成本，開發周期短。
C. web前端開發需要哪些技能
一、HTML5+CSS3
HTML5和CSS3是通往Web工程師路上必須學會的基本內容，主要包括了解常用瀏覽器和瀏覽器內核;了解語義化的概念;掌握HTML5語法及使用技巧;掌握HTML5常用標簽。掌握CSS語法及使用技巧;掌握DIV+CSS布局方式;掌握常見網頁布局模式。掌握HTML5新布局標簽、多媒體標簽;掌握CSS32D、3D變換、動畫效果;能夠使用CSS3新屬性美化修飾網頁;了解移動端屏幕、移動端瀏覽器、操作系統的不同等內容。
二、JS交互設計
JS交互技術可以賦予頁面一個動態的效果展示，提升用戶的瀏覽體驗，這部分主要是通過JS的學習掌握JavaScript基本語法;掌握常見JavaScript演算法;掌握DOM的各種操作;熟練使用面向對象思想進行DOM編程;掌握JavaScript的高級語法;掌握JavaScript常見兼容性方案。熟練使用jQuery操作DOM;熟練使用和編寫jQuery案例。
三、Node開發
Node.js不僅僅是一個框架，它是一個完整的JavaScript環境，配備了開發人員可能需要的開發工具。所以學好Node是在打通前後端開發中需要掌握的技術。這部分需要掌握ES6的基礎用法和兼容性;掌握ES6的核心語法;使用ES6實現前端模塊化開發。使用Webpack模塊打包器;使用Node.js進行Web服務端開發;掌握JavaScript非同步編程模型;掌握JavaScript模塊化編程方式;使用Node.js操作MongoDB資料庫;獨立開發基於後台介面的動態網站、Ajax數據交互的項目;獨立完成企業網站從前台到後台的基本開發工作。
四、前端框架
前端框架是Web開發人員需要熟練掌握的技能，並且在實際開發中是會被廣泛應用的，那麼對於前端框架方面需要掌握現在主流的Vue、React、Angular等，掌握D3.js進行大數據可視化交互開發;掌握Vue技術棧進行項目開發;掌握React技術棧進行項目開發;掌握使用主流框架開發門戶網站、管理系統、移動Web等客戶端;掌握Webpack項目構建配置流程;掌握Web項目的部署與發布模式;掌握常見網站業務模塊開發等。
五、小程序與APP開發現在移動應用越來越受歡迎，掌握了小程序和APP開發技術可以增強自身競爭力，這就需要掌握小程序的開發基礎;能夠獨立開發小程序項目;能夠掌握Canvas的使用;能夠掌握小程序的部署與發布;能夠掌握小程序開發框架mpvue的使用;掌握第三方AI平台的使用。能夠掌握小游戲開發基礎;能夠獨立開發小游戲項目;能夠掌握小游戲的部署與發布;能夠獨立使用ReactNative開發原生App。
視頻教程：
網頁鏈接
D. 如何提高網頁布局速度
你好，本人擁有三年的前端網頁布局工作經驗，根據你的回答，其實應該從兩方面解答：
第一方面：如果你是一個業余興趣愛好者，並不想深究網頁布局的方方面面，其實你不需要全部都手寫完成網頁布局，你可以選擇DW軟體快速幫你實現所見即所得的布局工作，DW快速布局是類似於其他辦公可視化編輯軟體的步驟，比如插入表格啊，插入DIV塊啊，然後可以直接在預覽窗體中拖動布局。
另一個方面：就是如果你是一個希望深究或者希望在網頁布局上進入專業領域的，還是建議你拋開那些自動排版的工具，老老實實從HTML標簽學習開始了解網頁，因為自動化的布局方式不適用於復雜的環境，抑或者說不能很好的兼容大部分瀏覽器，並且也不利於二次布局調整。使用HTML標簽和語言在 DW 中使用 代碼視圖進行 布局才是比較科學的方式，但是建議你應該要遵守W3C標准進行切圖寫碼工作，這樣才能保證最少的後期兼容性調整，如果你按照標准方式去寫，基本兼容調整的東西是很少的，這樣才是本質提高自身水平和提高布局速度的方法！
E. 網站前端開發慣用的布局方式有哪些
網站布局之「廠」字型
所謂的「廠」字型布局結構，就是指頁面頂部為橫條網站標識和廣告條，下方左面為主菜單，右面顯示內容的布局。菜單條與背景，整體效果類似「廠」字。「廠」布局是目前最常見的一種網頁布局方式。這種布局的優點是頁面結構清晰，主次分明。缺點是由於被使用得過多，顯得缺乏創意，略顯呆板。
網站布局之「三」字型
這種布局多用於國外站點，通常頁面上方橫向幾條色塊，將頁面整體分割為若幹部分，色塊中大多放廣告圖片或者Flash動畫。
網站布局之 「國」字型
「國」字型布局通常上下各有一個廣告條或者其他欄目條，左面是主菜單，右面放友情鏈接或者其他欄目等，中間是主要內容。這種布局的優點是充分利用版面，信息量大。缺點是頁面顯得比較擁擠和局促，不夠靈活。
網站布局之門戶型
這類網頁通常內容多，信息量大，通常沒有時顯的線條作為邊界，圖片用得也比較少，一般通過文字的排列產生視覺上的分區效果。
網站布局之區塊型
區塊型布局現在出現的越來越多，在網頁上各個區域具有封閉的邊界，經過合理放置顯得清晰美觀。其缺點是由於片面固定，各區域很難根據其中的內容的多少而調整大小，因此不適宜用於區域內容的長度經常變化的網頁。
網站布局之宣傳單型
宣傳單型布局頁面就像一張宣傳海報，以一張精美圖片作為頁面的設計中心，常用於個性類站點。其優點是漂亮吸引人；缺點就是頁面中大面積使用圖片，導致瀏覽速度相對較慢。所以這類頁面同是可以作為宣傳單使用。
F. 【web前端】十分鍾徹底弄懂 flex 布局
flex（flexible box：彈性布局盒模型），是 2009 年 w3c 提出的一種可以簡潔、快速對頁面進行彈性布局的屬性。主要思想是給予容器控制內部元素高度和寬度的能力。目前已得到以下瀏覽器支持：
其中在webkit內核的瀏覽器中使用時，必須加上 -webkit- 前綴。
使用 flex 布局的容器（flex container），它內部的元素自動成為 flex 項目（flex item）。容器擁有 兩根 隱形的軸，水平的 主軸 （main axis），和豎直的 交叉軸 （cross axis）。
主軸開始的位置，即主軸與左邊框的交點，稱為 main start；主軸結束的位置稱為 main end；交叉軸開始的位置，即交叉軸與上邊框的交點，稱為 cross start；交叉軸結束的位置稱為 cross end。
item 按主軸或交叉軸排列，item 在主軸方向上占據的寬度稱為 main size，在交叉軸方向上占據的寬度稱為 cross size。
注意：使用 flex 容器內元素，即 flex item 的 float，clear、vertical-align 屬性將失效。
flex-direction 決定主軸的方向，即項目排列的方向。有四個可能的值：row（默認） | row-reverse | column | column-reverse。
flex-wrap 決定項目在盒中無法撐滿的情況下，是否換行。
它是 flex-direction 和 flex-wrap 的集合簡寫形式，如：row wrap | column wrap-reverse 等。默認值為 row nowrap，即橫向排列 不換行。
決定 item 在橫向主軸上的對齊方式，可能的值有 flex-start（默認），flex-end，center，space-between，space-around。當為橫向主軸時，具體含義如下：
決定 item 在縱向主軸上的對齊方式，可能的值有 flex-start（默認），flex-end，center，space-between，space-around。當為縱向主軸時，具體含義如下：
決定了 item 在橫向主軸上的對齊方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，當為橫向主軸時，其具體含義為：
決定了 item 在縱向主軸上的對齊方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，當為縱向主軸時，其具體含義為：
該屬性定義了當有多根主軸時，即 item 不止一行時，多行在交叉軸上的對齊方式。注意當有多行時，定義了 align-content 後，align-items 屬性將失效。align-content 可能值含義如下（假設主軸為垂直方向）：
item 的屬性在 item 的 style 中設置，item 共有如下六種屬性：
order 的值是整數，默認為 0，整數越小，item 排列越靠前，如上圖所示。
它定義了當 flex 容器有多餘空間時，item 是否放大。默認值為 0，即當有多餘空間時也不放大；可能的值為整數，表示不同 item 的放大比例。
定義了當容器空間不足時，item 是否縮小。默認值為 1，表示當空間不足時，item 自動縮小，其可能的值為整數，表示不同 item 的縮小比例。
表示 item 在主軸上占據的空間，默認值為 auto。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 三屬性的簡寫總和。
align-self 屬性允許 item 有自己獨特的在交叉軸上的對齊方式，它有六個可能的值，默認值為 auto。
G. 前端在布局的時候如何做的精確些。
這位網友你好，做網頁的話不是截圖量距離的，是需要有PSD文件的，也就是UI（通俗點說就是美工）提供的效果圖，效果圖是可以精確到1像素的，字體也是在PSD圖中獲取的。
H. 前端之瀑布流布局（多種實現方案）
瀑布流布局，一般指根據內容高度自適應填充到某一列以使整體頁面和諧，常見的有圖片網站，比如每一行每一列的內容是錯開的。
瀑布流布局一般是下面這個樣子
css中有這么兩個屬性:
注意
這也是我推薦大家用第一種方法的最主要原因。
這種方案做出來的效果有點奇葩，特殊的應用場景可能會用到，最終效果是橫向瀑布流
flex布局中有一個屬性 flex-flow ,指明在哪個方向上在長度不夠的情況想拆行，詳情大家自己查閱
第一種方法其實是最合適的，也是對開發人員要求最高的，即使有思路與演算法在開發過程中也會踩很多坑，比如（1）圖片預載入，（2）querySelector取元素居然獲取不到，（3）使用box-sizing簡化計算過程降低復雜性，等等。 box-sizing 屬性用好了非常高效，推薦大家去仔細看看
第二種方法其實也可行，但是不推薦
第三種方法就有點扯了，估計不常用到，大家看看就行
I. 前端設計頭部布局,下圖該怎麼進行頭部布局
上+下+中間突出部分絕對定位