然后是container-form兩個各占一行的輸入：

布局：由于是左icon右input的布局，所以用flex，并且這是主軸靠左，input設flex:1，完成大致布局.

左側icon：有圖片做icon右邊有輸入欄，由于icon是圖片并且有近似等高的同行小杠杠，于是設計圖片左右padding+右側border，看原型圖發現右側小杠杠似乎稍高，于是圖片上下也設置一點padding來撐高右側小杠杠，之后外面用一個div包住設置margin和行高來居中，完成左側；

右側input:簡單設置一下padding并去掉border&outline就好，在此順便對placeholder的樣式做一點探究(見下面總結)

接著是container-form的button, 由于button的display是inline-block所以可以控制width,設置為100%,然后設置上下padding.然后"登錄"之間有一個字左右的間距所以加上 

最后是forgetpw,包含文字并且靠右,繼續用flex,主軸flex-end，交叉軸center.設置好a標簽的顏色樣式

對比優化

對比

topbar高度不夠,左右padding稍寬,登錄字體不一樣

輸入左側icon的橫向padding加一點,行高加一點

登錄高度不夠.效果圖"登錄"應該是用letter-spacing做間隔的導致沒居中(這個不改哈哈)

忘記密碼字體過大

GIF效果圖沒有做點擊input顯示"圓圈+x".

處理：這個裁剪下PSD的圖然后簡單設置一下就可以簡單加入輸入行了.flex大法好!

完成之后效果如下：

學習更多CSS知識之后修改CSS，嘗試可復用yang"shi:

header使用分三種方案： flex、float+absolute、absolute，可以通過修改header的標簽應用不同效果.

form-row組建完成一行樣式

擴展性要求：去掉header的三塊文字的任意一兩個，剩下的一兩個都還在原位置上不會受到影響

一開始用的是flex三列布局，三個標簽按照flex的justify-content: space-between;等距離分成左中右，縱向按照align-items: center;垂直居中，但是這樣的樣式去掉一個標簽布局就會變化，去掉標簽的話需要用等長的 來頂上才能保持標簽位置不變.

為了滿足擴展性要求，將header改為左右float中間正常居中樣式，但是實測發現浮動的a標簽會占位導致中間的標簽不居中(span內聯包圍了float),所以暫時放棄這個方案，并計劃找時間學習float看看有無解決方法.

根據上面方法進行修改，左右使用absolute，中間不變,輕松搞定...

移動端：header始終固定頂部

解決：header加fixed,給定width并設置top,完成.

效果：

position定位有哪幾種？各有什么特點 參考：CSS 相對|絕對(relative/absolute)定位系列

static：默認定位

不可層疊,不脫離文檔流

relative：相對當前位置定位

不可層疊,不脫離文檔流

相對其正常位置進行定位,通過left、right、top、bottom位移

absolute：絕對定位

包裹性：讓元素由原來寬度變成自適應內部元素的寬度

破壞性：脫離文檔流，令原本占據的空間坍塌(布局破壞)

定位：相對最近的非static父級定位,如果沒有則繼續向上查找直到body,通過left、right、top、bottom位移,可通過z-index進行層次分級

會生成一個塊級框

fixed：固定定位

包裹性：讓元素由原來寬度變成自適應內部元素的寬度

破壞性：脫離文檔流，令原本占據的空間坍塌(布局破壞)

相對于瀏覽器viewport定位,通過left、right、top、bottom位移,可通過z-index進行層次分級

會生成一個塊級框

inherit：從父類繼承position屬性的值

哪些css屬性可以設置百分比，其計算原則是什么？

參考：MDN

計算原則：百分比*參照值

Tip: 百分比值是一種相對值，任何時候要分析它的效果，都需要正確找到它的參照值

可設置屬性

盒模型系列:

content: width(參照包含塊寬度)、height(參照包含塊高度)

padding(參照包含塊寬度)

border

border-radius(參照包自身寬度&高度)

border-image

border-image-slice(參考圖片尺寸)

border-image-width(參考自身寬度&高度)

margin(參照包含塊寬度)

定位系列：

left、right(參照包含塊寬度)

top、bottom(參照包含塊高度)

文本系列：

text-indent(參照包含塊寬度)

word-spacing(參照受影響字體寬度)

text-size-adjust(參考相對應文字字號)

font-size(參照包含父元素字號)

flex系列：

flex-basis(參考flex容器大小)

background系列:

background-position(參考背景定位區域大小-背景圖片大小，其中大小指的是水平偏移的寬度和垂直偏移的高度) 圖例

background-size(相對于定位區域)

常見的表單元素有哪些？各有什么屬性？

form 表單

屬性

action: 提交表單時執行的動作，可以在此指定某個服務器表單處理腳本(如果省略action，action被設置為當前頁面)

method: HTTP方法(GET|POST)

accept-charset：使用的字符集

autocomplete: 自動完成表單(默認開啟)

enctype：提交數據的編碼

novalidate：規定不驗證表單

target：規定action屬性中地址的目標(默認_self，也就是指向當前)

input 輸入，可通過改變type變換形態

屬性 其他屬性參考了解HTML表單之input元素的30個元素屬性

type: text(文本) | password(密碼,變圓點) | checkbox(復選框) | radio(單選)

html5新增屬性：color & date & datetime & datetime-local & email & month & number & range & search & tel & time & url & week

datalist(html5) 的預定義選項列表, input的list屬性引用datalist的id即可關聯

子元素option 待選項

label 標簽，可以通過for屬性綁定對應input的id

select 下拉列表

子元素option 待選項

textarea 多行文本框, 用rows&cols控制大小

button 按鈕，可通過改變type變換作用

屬性type: button(按鈕) | sumbit(提交) | reset(重置)

fieldset 表單外框

子元素legend 表單外框名稱

如何理解HTML結構的語義化？ 參考：理解HTML語義化

含義：標簽有特定的意義，即內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）. 例如header指頁面頂部欄，nav指導航欄.

意義：

代碼結構優雅,便于閱讀理解文檔布局，便于開發合作維護

爬蟲解析方便

用戶體驗 & 特殊設備解析(title、alt的信息注釋)

最佳實踐：

少用無意義的div&span, 無特定意義時盡量用p取代div

純樣式標簽用CSS替代

表格標題用caption，表頭用thead&th,主體用tbody&td,尾部用tfoot包圍.

每個input標簽的對應的說明文本都要使用label標簽，通過設置label的for=(input"s id)即可關聯

使用fixed的時候，在手機上查看是否會有問題，怎么解決？

這部分個人經驗不足，在網上找部分案例和解決方法

1)Web移動端Fixed布局的解決方案

問題圖片：

問題描述：設置好上下fixed，中間普通margin與上下隔開.下拉列表超過一頁，點擊輸入框，在軟鍵盤喚起之后頁面底部的fixed元素將失效.

問題原因：軟鍵盤喚起之后,頁面fixed元素將失效，當頁面超過一屏并滾動時，失效的fixed元素也會隨之滾動.

問題解決：

思路：如果當前層級頁面不滾動，那么即便fixed元素失效也無法隨頁面滾動.

修改：中間使用absolute與上下隔開，并且y軸設置可滾動(如果出現滾動卡頓，可以加入-webkit-overflow-scrolling:touch【非標準,用于SafariMobile】)

2) 其他一些問題處理

輸入框focus后被軟鍵盤遮擋，可以嘗試input的scrollIntoView.

iOS可能有坑：軟鍵盤遮擋輸入框然后在輸入一條文字后重寫顯示輸入框

最好將header和footer的touchmove事件禁止，防止出發瀏覽器全屏模式切換導致header和footer被工具欄遮蔽.

滾動到頁面上下邊緣時繼續拖拽會將view拖走導致頁面"露底".可以做一些確認邊緣的判斷來阻止touchmove事件的發生.

常見的移動端登錄頁header有哪些實現方式？

沒找到類似的文字，總結一下我用到的

簡單通用flex，水平三分垂直居中

特點：簡單好用適合布局，但是刪除元素會導致布局破壞

左右float中間自動

特點：使用簡單,但是布局上個人不太喜歡用float

左右absolute中間自動

特點：暴力, 穩

結果如下

/* Webkit瀏覽器支持(非標準) https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-input-placeholder */
.form-raw input::-webkit-input-placeholder {
  color: #aaa;
}
/* Chrome:57+已支持去前綴 https://www.chromestatus.com/feature/6715780926275584 */
.form-raw input::placeholder {
  color: #aaa;
}
/* IE10+支持  https://developer.mozilla.org/zh-CN/docs/Web/CSS/:-ms-input-placeholder */
.form-raw input:-ms-input-placeholder {
  color: #aaa;
}
/* Firefox 4-18 */
.form-raw input:-moz-placeholder {
  color: #aaa;
}
/* 很奇怪， FireFox60實測不支持 */
/* Firefox 19+(非標準) https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-moz-placeholder*/
.form-raw input::-moz-placeholder {
  color: #aaa;
}
/* 實驗中特性 https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown */
.form-raw input:placeholder-shown {
  color: #aaa;
  /* border: 2px solid red; */   /* border有效并且只有在Firefox有效*/
}

Github

線上展示

【CSS練習】IT修真院--練習1-九宮格

【CSS練習】IT修真院--練習2-開發工具

【CSS練習】IT修真院--練習3-簡單界面

【CSS練習】IT修真院--練習4-移動端界面

【CSS練習】IT修真院--練習5-護工個人界面

【CSS練習】IT修真院--練習6-護工列表界面