float 父元素圍住浮動的子元素
1. 父元素設定為overflow
2. 父元素也浮動
3. 新增乙個空的 末元素 clear-both
4. clearfix規則:
.clearfix::after
布局:微博:左中右三欄 固定寬度
div:overflow
p1 p2 p3:float-left
google drive:左中右 中欄自適應
div:overflow
p1 p3 p2: p1 float-left p2 float-right
p3:magin-left magin-right width:auto
定位:relative 層級高於static
z-index
absolute 類似於float 脫離div
位置相對于父元素的定位元素位置若都為static 則相對於坐上開始
fixed 類似於absolute 但是相對於瀏覽器適口 滾動保持不動
css下拉列表?
固定垂直居中按鈕:
fixed top:50% magin-top:-1/2height
[拓]彈出視窗?
order:顯示順序 -1靠前 預設0
flexbox:(container)
display:flex
flex-direction(主軸方向):row從左往右(預設) row-reverse:從右往左
column從上往下 column-reverse:從下往上
flex-wrap:自動換行
no-wrap:預設不換行 會壓縮在一行
wrap:換行
flex-flow: flex-direction&& flex-wrap組合
justify-content:
flex-start 預設
center flex-end space-between 均勻放置 space-around 均勻 但沒有頂格 分散到兩側
align-content:
stretch 預設 撐大
flex-start 單行 center 側軸居中 flex-end
flex-item:
stretch 自動伸展為每一行高度(增量大小相同) 設定的不伸展
flex-start 對齊每一行上邊緣
flex-start 對齊每一行下邊緣
baseline 基線對齊
align-items:定義了各flex item在所在line中沿側軸對齊的方式
item:
order 預設0 小的靠前
align-self 自身對齊方式 auto繼承
flex-grow:1(增長因子) 搶占剩餘空間
flex-basis(主軸上item的基礎大小) 強於width,height
flex:1 1 200px 增長因子 縮減因子 基礎大小
居中布局方式:
1. 彈性盒子 container justify-content:center align-items:center
2. 普通 container absolute
div relative top 50% left 50% margin-left:-1/2width margin-top:-1/2height
autoprefixer css online (新增廠商字首 flex-box)
grid 網格布局
跨越兩行 第二行clear-both
跨越兩列 設定寬度
bootstrap3 grid
第三章 web設計原則
程式設計師的修煉從優秀帶卓越 第三章 web設計原則 的評判標準 載入的速度要快 這到底是什麼東西 給我看乙個例子 清清楚楚的告訴我要做什麼,並且掃除障礙 擁抱你的受眾,即使意味著要把其他受眾排除在外,你不可能滿足所有的使用者 追求簡單 不要設計太多按鈕,不要堆砌無效的需求,少即使多,像谷歌瀏覽器 ...
第三章 堆疊
1.基礎知識 堆疊可以實現很多的應用,遞迴的問題轉化成非遞迴形式,在本質上也是堆疊的問題.它是一種 filo 操作的資料結構,一般也有兩種儲存方式 陣列跟鍊錶實現形式,這裡我給出了鍊錶形式的堆疊模板,裡面包括了基本的堆疊所有的操作,還有兩個比較著名的應用例子,時間倉促,精力比較有限,關於迷宮老鼠還沒...
第三章 曙光
第三章 曙光 第二場校園招聘開始了。其實,洋對這個公司的不是很了解。因為前幾天突然在bbs上面看到了這個公司的招聘資訊,洋覺得這個公司不錯,就上網投了簡歷。接下來的乙個多小時,讓洋很震撼!想不到這個公司這個厲害,而且無論從哪方面來說,絕對不比之前的那個公司差。想不到自己的乙個不經意的決定到了這個大的...