網頁區域性布局 （layout布局就是css常用布局）
浮動布局
定位布局
多列布局
1-1table: dispaly：table此元素會作為塊級**來顯示（類似 table），**前後帶有換行符。table-cell此元素會作為乙個**單元格顯示（類似 td和 th)。
用法：1-1-1父元素寬度固定，想讓若干個子元素平分寬度：通常的做法是手動設定子元素的寬度.parent
1-1-2塊級子元素垂直居中：想讓乙個div或p在父元素中垂直居中一直是很多人解決不了的問題（注意直接對塊級元素使用vertical-align是不能解決這個問題的，vertical-align定義行內元素的基線相對於該元素所在行的基線的垂直對齊），同樣可以使用display：table方便解決： 將塊級子元素的display設定為table-cell之後再使用vertical-align就可以了。
注意：雖然display：table解決了避免使用**的問題，但有幾個需要注意的：
（1）display: table時padding會失效
（2）display: table-row時margin、padding同時失效
（3）display: table-cell時margin會失效
1-2grid網格布局：grid 布局則是將容器劃分成"行"和"列"，產生單元格，然後指定"專案所在"的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。div
設定該容器的網格屬性
設定列寬
grid-template-columns
: 100px 100px 100px;//屬性定義每一列的列寬，
設定行高屬性
grid-template-rows
:100px 100px 100px;//屬性定義每一行的行高。
使用repeat 方法重複
grid-template-columns
:repeat
(3,100px)
;grid-template-rows
:repeat
(3,100px)
grid-template-columns
:repeat
(2,100px 10px 50px)
;//三個值重複兩次共六列
grid-template-rows
:repeat
(1,100px 20px)
自動填充 auto-fill 父容器不知道寬高 知道子容器的寬高
grid-template-columns
:repeat
(auto-fill,50px)
;grid-template-rows
:repeat
(3,100px)
1-3float：1-3-1用浮動做兩列，左邊浮動，右邊不浮動。
1-3-2用浮動做三列，左邊左浮動，右邊右浮動， 中間不浮動（右欄部分要寫在中間部分之前）
.boxfloat>div:nth-child(1)
.boxfloat>div:nth-child(3)
.boxfloat>div:nth-child(2)
2-1.單列布局 （主要採用居中布局）（固定布局 px）heade指的上導航/footer指下導航 和content等寬居中
2-2.流式布局 （百分比布局）：是頁面元素的寬度按照螢幕解析度進行適配調整，但整體布局不變
設計方法：使用%百分比定義寬度，高度大都是用px固定住
經典的流式布局；
2-2-1.左側固定，右側自適應
2-2-2.右側固定左側自適應
2-2-3.兩側固定，中間自適應（聖杯布局，雙飛翼布局）
2-2-4.等分布局：是指子元素平均分配父元素寬度的布局方式
2-3.自適應布局：網頁自適應的顯示在不同大小終端裝置上的新網頁設計方式，它需要開發多套介面來適應不同的終端。
方法：左側固定寬度，右側自適應布局
左側自適應，右側固定寬度
三列布局
css的相容性如何處理：
優雅降級 向上相容
（ ie7 ie8 ie9 ie10 ms 谷歌-webkit- 火狐moz ）
瀏覽器眾多：對css解析出的效果不一致
如何： 根據瀏覽器的核心不同 可以這樣寫css
3-1
"x-ua-compatible" content="ie=edge,chrome=1">
*/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td
body, button, input, select, textarea
h1, h2, h3, h4, h5, h6
address, cite, dfn, em, var
code, kbd, pre, samp
small
ul, ol
aa:hover
supsub
legend
fieldset, img
button, input, select, textarea
table
1. vertical-align: middle;//垂直居中
2. font-weight: bold;//加粗
3. 自適應網頁布局,用浮動做兩列:左邊浮動，右邊不浮動。
.left
.right
Web全棧課程4 資料互動 http
http所有的資料請求對於伺服器的處理來說，都是表單提交 除了websocket 表單ajax jsonp websocket 1 3個版本 http1.0 http1.1 http2.0 2 http和https http 容易被攻擊被竊聽 https http secrity 安全，https需...
javascript全棧開發實踐 web 2
我們目前僅僅測試實現了鉛筆的功能。接下來我們繼續增加乙個新的功能 螢光筆。螢光筆通常是帶有一定顏色，並且具有半透明特性，可以把下面的字跡顯露出來。而為了在鉛筆和螢光筆之間進行切換，我們就需要增加兩個按鈕，來實現這個切換功能。如下 background lightgrey pencil onclick...
Web全棧 決定了就去做吧
在過去的一兩個月裡，我也曾為自己該選擇哪個方向而迷茫過。可能出於對前端的莫名歡喜，我最終決定學習它，努力高階web全棧。在擁有持之以恆的信念的前提下，就應該切入正題了。我將記錄每一次的學習總結，在鞏固基礎的同時，也希望能帶給大家一些幫助。2.關於開發工具 很多人在用 1 visual studio ...