前端學習筆記一

這裡推薦乙個簡短有趣的鏈結，可以同時對比其他的布局方案：學習css布局-flexbox。

另外moz的開源**也有介紹：使用 css 彈性盒子。

不過介紹最清晰的還是阮一峰的flex布局教程：語法篇。

在各種場合下，居中使用的方式也不一樣。這裡簡要記錄一下目前使用到的比較有效的方式：

.flex

設定父物體為relative，子物體為absolute，再新增以下css

top: 50%; 

left: 50%; 
transform: translate(-50%, -50%)

設定height=line-height，再新增text-align=center屬性

width:100px;             

height:100px;             
line-height:100px;             
text-align:center;             
background:gray;

還有乙個精華濃縮版：css垂直居中的6種方法

前端學習筆記《一》

表頭 caption 合併行單元格 colspan 合併列單元格 rowspan 取消邊框縫隙 cellspacing 0 中內容位置 valign top middle bottom 多行文字框 屬性 cols 字元長度 rows 輸入的字元的行數 input type file 上傳檔案 inp...

前端學習筆記一

這裡推薦乙個簡短有趣的鏈結，可以同時對比其他的布局方案 學習css布局 flexbox。另外moz的開源 也有介紹 使用 css 彈性盒子。不過介紹最清晰的還是阮一峰的flex布局教程 語法篇。在各種場合下，居中使用的方式也不一樣。這裡簡要記錄一下目前使用到的比較有效的方式 flex設定父物體為re...

前端學習筆記（一）2020 02 25

使用em標籤的強調作用時 通過font style normal改變字型傾斜 font屬性簡寫需要遵循順序 style weight size family a標籤偽類選擇器需要遵循順序 link visied hover active 有長寬獨佔一行 寬度預設為父級寬度 可以放行內元素和塊級元素 ...